diff --git a/app/assets/javascripts/totalMessagesChart.js b/app/assets/javascripts/totalMessagesChart.js
index 9a0c8b325..bebd6e106 100644
--- a/app/assets/javascripts/totalMessagesChart.js
+++ b/app/assets/javascripts/totalMessagesChart.js
@@ -62,7 +62,7 @@
             .attr("x", 0) // Initially set to 0, will be updated during animation
             .attr("y", 0)
             .attr("height", height)
-            .attr("fill", '#c6cace')
+            .attr("fill", '#C7CACE')
             .attr("width", 0) // Start with width 0 for animation
             .on('mouseover', function(event) {
                 tooltip.style('display', 'block')
diff --git a/tests/javascripts/totalMessagesChart.test.js b/tests/javascripts/totalMessagesChart.test.js
index b5cf3e6a8..87c671430 100644
--- a/tests/javascripts/totalMessagesChart.test.js
+++ b/tests/javascripts/totalMessagesChart.test.js
@@ -159,7 +159,7 @@ test('SVG bars are created and animated correctly', done => {
 
   // Initial check
   const sentBar = svg.querySelector('rect[fill="#0076d6"]');
-  const remainingBar = svg.querySelector('rect[fill="#fa9441"]');
+  const remainingBar = svg.querySelector('rect[fill="#C7CACE"]');
 
   expect(sentBar).not.toBeNull();
   expect(remainingBar).not.toBeNull();