diff --git a/main-site/color/script.js b/main-site/color/script.js
index 33f6bc4..83d38c6 100644
--- a/main-site/color/script.js
+++ b/main-site/color/script.js
@@ -130,7 +130,7 @@ function createColorSwatch(color) {
 
   const swatch = document.createElement('div');
   swatch.classList.add('color-swatch');
-  swatch.dataset.color = color.hex;
+  swatch.dataset.color = color.name;
   swatch.style.color = color.hex;
   swatch.setAttribute('role', 'button');
   swatch.setAttribute('tabindex', '0');
@@ -171,9 +171,9 @@ function createColorSwatch(color) {
   colorName.textContent = color.name;
 
   swatch.addEventListener('click', () => {
-    const isSelected = selectedPalette.some(c => c.hex === color.hex);
+    const isSelected = selectedPalette.some(c => c.name === color.name);
     if (isSelected) {
-      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+      selectedPalette = selectedPalette.filter(c => c.name !== color.name);
     } else {
       selectedPalette.push(color);
     }
@@ -432,7 +432,7 @@ function renderSelectedPalette() {
     swatchWrapper.appendChild(colorName);
 
     swatch.addEventListener('click', () => {
-      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
+      selectedPalette = selectedPalette.filter(c => c.name !== color.name);
       renderSelectedPalette();
       updateSwatchHighlights();
     });
@@ -460,7 +460,7 @@ function updateSwatchHighlights() {
     const color = swatch.dataset.color;
     const background = swatch.querySelector('.color-background');
     const nameEl = swatch.parentElement.querySelector('.color-name');
-    const isSelected = selectedPalette.some(c => c.hex === color);
+    const isSelected = selectedPalette.some(c => c.name === color);
 
     if (isSelected) {
       background.classList.add('chosen');