diff --git a/static/css/04-interactive/_buttons.css b/static/css/04-interactive/_buttons.css
index 8a9b344..0a714e6 100644
--- a/static/css/04-interactive/_buttons.css
+++ b/static/css/04-interactive/_buttons.css
@@ -11,7 +11,7 @@
     left: 2rem;
     width: 50px;
     height: 50px;
-    background: rgba(155, 89, 182, 0.7); /* Purple with transparency - distinct from info button blue */
+    background: rgba(92, 89, 182, 0.7); /* Purple (#5c59b6) with transparency - distinct from info button blue */
     color: white;
     border: none;
     border-radius: 50%;
@@ -29,12 +29,12 @@
     opacity: 1;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-    background: #9b59b6; /* Purple hover - distinct from info button blue */
+    background: #5c59b6; /* Purple hover - distinct from info button blue */
 }
 
 .zoom-toggle-btn.at-bottom {
     opacity: 1;
-    background: #9b59b6; /* Purple - matches hover, distinct from info button */
+    background: #5c59b6; /* Purple - matches hover, distinct from info button */
 }
 
 /* No special styling for active state - button looks same whether zoom is on or off */
diff --git a/tests/mjs/67-button-colors-and-visibility-test.mjs b/tests/mjs/67-button-colors-and-visibility-test.mjs
index 898f237..67f384c 100755
--- a/tests/mjs/67-button-colors-and-visibility-test.mjs
+++ b/tests/mjs/67-button-colors-and-visibility-test.mjs
@@ -260,7 +260,7 @@ async function testViewport(browser, viewport) {
     if (failures.length === 0) {
         console.log('✅ ALL TESTS PASSED\n');
         console.log('Button colors are distinct:');
-        console.log('  🔍 Zoom button: Purple (#9b59b6)');
+        console.log('  🔍 Zoom button: Purple (#5c59b6)');
         console.log('  ℹ️  Info button: Blue (#3498db)');
         console.log('\nButton visibility works correctly:');
         console.log('  ✅ All buttons visible at desktop viewport (>900px)');