diff --git a/src/styles/main.css b/src/styles/main.css
index 962d6ef2..b09fa0dd 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2841,7 +2841,7 @@ html[data-show-path-bars='0'] .path-pair-bar {
   min-height: 18px !important;
   padding: 2px 4px !important;
   border: 1px solid #a0a0a0 !important;
-  background: #f5f5f5 !important;
+  background: #f0f0f0 !important;
 }
 
 .media-compare-view .media-report-panel {
diff --git a/src/styles/mediaChromeDensity.test.ts b/src/styles/mediaChromeDensity.test.ts
index 143b23b7..d1a6a9b3 100644
--- a/src/styles/mediaChromeDensity.test.ts
+++ b/src/styles/mediaChromeDensity.test.ts
@@ -132,11 +132,11 @@ describe('media rules importance strip residual', () => {
   it('keeps Media rules/importance strip on the capture band', () => {
     expect(mediaView).toMatch(/data-rules-density="capture-1to1"/)
     expect(mediaView).toMatch(/data-importance-chrome="capture-1to1"/)
-    expect(mediaView).toMatch(/\.media-rules-panel\s*\{[\s\S]*?background:\s*#f5f5f5/)
+    expect(mediaView).toMatch(/\.media-rules-panel\s*\{[\s\S]*?background:\s*#f0f0f0/)
     expect(mediaView).toMatch(/\.media-rules-panel\s*\{[\s\S]*?min-height:\s*18px/)
     expect(mediaView).toMatch(/\.media-rule-row\s*\{[\s\S]*?min-height:\s*16px/)
     expect(css).toMatch(
-      /\.media-compare-view \.media-rules-panel\s*\{[\s\S]*?background:\s*#f5f5f5/,
+      /\.media-compare-view \.media-rules-panel\s*\{[\s\S]*?background:\s*#f0f0f0/,
     )
     expect(css).toMatch(/\.media-compare-view \.media-rule-row\s*\{[\s\S]*?min-height:\s*16px/)
     expect(mediaView).not.toMatch(/min-height:\s*6px/)
@@ -144,7 +144,7 @@ describe('media rules importance strip residual', () => {
 })
 
 describe('media scrub surface residual', () => {
-  it('keeps Media scrub strip on capture #f5f5f5 without surface override', () => {
+  it('keeps Media scrub strip on capture #f0f0f0 without surface override', () => {
     expect(mediaView).toMatch(/data-media-scrub-residual="capture-1to1"/)
     expect(mediaView).toMatch(/\.media-scrub-row\s*\{[\s\S]*?background:\s*#f0f0f0/)
     expect(mediaView).not.toMatch(
diff --git a/src/views/MediaCompareView.vue b/src/views/MediaCompareView.vue
index 96a9addc..6c0d9ef9 100644
--- a/src/views/MediaCompareView.vue
+++ b/src/views/MediaCompareView.vue
@@ -1456,7 +1456,7 @@ h1 {
   padding: 2px 4px;
   border: 1px solid #a0a0a0;
   border-radius: 0;
-  background: #f5f5f5;
+  background: #f0f0f0;
 }
 
 .media-rules-panel header {