From 57ad5c468ae4a53197880b650d664a2820805cf0 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Sun, 10 Mar 2024 20:56:16 -0700
Subject: [PATCH] all the type errors cleared, bugs

---
 src/components/ColorChannelPicker.svelte      |  2 --
 src/components/KeyboardHooks.svelte           | 32 +++++++++++++------
 src/components/MiniPalPreview.svelte          |  2 +-
 src/components/PalDiff.svelte                 |  6 ++--
 src/components/PalPreview.svelte              | 11 ++++---
 src/content-modules/ComparePal.svelte         |  2 +-
 src/content-modules/Controls.svelte           | 15 ++++++---
 src/controls/AddColor.svelte                  | 10 ++++--
 src/controls/AdjustColor.svelte               |  7 ++--
 src/controls/AlignSelection.svelte            |  9 ++++--
 src/controls/ColorTagger.svelte               | 28 ++++++++--------
 src/controls/Config.svelte                    |  2 +-
 src/controls/DistributePoints.svelte          | 14 ++++----
 src/controls/InterpolatePoints.svelte         | 13 +++++---
 src/controls/NewPal.svelte                    | 14 +++++---
 src/controls/Rotate.svelte                    | 10 +++---
 src/controls/Sort.svelte                      |  4 +--
 src/controls/SuggestColorPal.svelte           |  8 ++---
 .../SuggestionModificationToSelection.svelte  | 19 +++++++----
 src/example/Example.svelte                    | 11 +++++--
 src/example/Swatches.svelte                   | 26 +++++++++------
 src/lib/CustomLint.ts                         |  4 +--
 src/lib/api-calls.ts                          |  4 +--
 src/lib/lint-language/lint-language.ts        |  2 +-
 src/lib/linter-tools/lint-fixer.ts            |  7 ++--
 src/lib/lints/background-contrast.ts          | 15 +++++----
 src/lib/lints/diverging-order.ts              | 16 ++++++----
 src/lib/lints/in-gamut.ts                     |  7 ++--
 src/lib/lints/name-discrim.ts                 |  6 ++--
 src/lib/lints/sequential-order.ts             |  2 +-
 src/lib/utils.ts                              |  8 +++--
 src/linting/EvalColorColumn.svelte            | 19 ++++++-----
 src/linting/ExplanationViewer.svelte          |  2 +-
 src/linting/LintCustomizationPreview.svelte   | 25 +++++++++------
 .../ColorScatterPlotPolarGuide.svelte         |  4 +--
 .../ColorScatterPlotXYGuides.svelte           |  2 +-
 src/stores/lint-store.ts                      | 15 +++++++--
 37 files changed, 237 insertions(+), 146 deletions(-)

diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte
index b0809b52..f2fddb1a 100644
--- a/src/components/ColorChannelPicker.svelte
+++ b/src/components/ColorChannelPicker.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import configStore from "../stores/config-store";
-
   import { Color, colorPickerConfig } from "../lib/Color";
   import ColorIO from "colorjs.io";
   export let color: Color;
diff --git a/src/components/KeyboardHooks.svelte b/src/components/KeyboardHooks.svelte
index 57d4ba2f..b69ada69 100644
--- a/src/components/KeyboardHooks.svelte
+++ b/src/components/KeyboardHooks.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { Color, colorPickerConfig } from "../lib/Color";
+  import type { ColorWrap } from "../types";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   $: focusedSet = new Set($focusStore.focusedColors);
-  $: copiedData = [] as Color[];
+  $: copiedData = [] as ColorWrap<Color>[];
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal ? currentPal.colorSpace : "lab";
   $: config = colorPickerConfig[colorSpace];
@@ -73,30 +74,43 @@
         if (!focusSet.has(idx)) {
           return color;
         }
-        const channels = color.toChannels();
+        const channels = color.color.toChannels();
         const xVal = channels[config.xChannelIndex];
         const yVal = channels[config.yChannelIndex];
         const zVal = channels[config.zChannelIndex];
 
+        let newColor = color.color;
         if (!optionKey && key === "arrowdown") {
-          return color.setChannel(config.yChannel, yVal + verticalDir * step);
+          newColor = newColor.setChannel(
+            config.yChannel,
+            yVal + verticalDir * step
+          );
         }
         if (!optionKey && key === "arrowup") {
-          return color.setChannel(config.yChannel, yVal - verticalDir * step);
+          newColor = newColor.setChannel(
+            config.yChannel,
+            yVal - verticalDir * step
+          );
         }
         if (optionKey && key === "arrowdown") {
-          return color.setChannel(config.zChannel, zVal + zDir * step);
+          newColor = newColor.setChannel(config.zChannel, zVal + zDir * step);
         }
         if (optionKey && key === "arrowup") {
-          return color.setChannel(config.zChannel, zVal - zDir * step);
+          newColor = newColor.setChannel(config.zChannel, zVal - zDir * step);
         }
         if (key === "arrowleft") {
-          return color.setChannel(config.xChannel, xVal - horizontalDir * step);
+          newColor = newColor.setChannel(
+            config.xChannel,
+            xVal - horizontalDir * step
+          );
         }
         if (key === "arrowright") {
-          return color.setChannel(config.xChannel, xVal + horizontalDir * step);
+          newColor = newColor.setChannel(
+            config.xChannel,
+            xVal + horizontalDir * step
+          );
         }
-        return color;
+        return { ...color, color: newColor };
       });
 
       colorStore.setCurrentPalColors(newColors);
diff --git a/src/components/MiniPalPreview.svelte b/src/components/MiniPalPreview.svelte
index cfdb8e51..a996c0d8 100644
--- a/src/components/MiniPalPreview.svelte
+++ b/src/components/MiniPalPreview.svelte
@@ -12,7 +12,7 @@
     {#each pal.colors as color}
       <div
         class="h-6"
-        style="background-color: {color.toHex()}; width: {100 /
+        style="background-color: {color.color.toHex()}; width: {100 /
           pal.colors.length}%"
       ></div>
     {/each}
diff --git a/src/components/PalDiff.svelte b/src/components/PalDiff.svelte
index eee34bd3..5bddc162 100644
--- a/src/components/PalDiff.svelte
+++ b/src/components/PalDiff.svelte
@@ -12,7 +12,7 @@
   $: arrows = beforePal.colors.reduce(
     (acc, x, idx) => {
       const afterIdx = afterPal.colors.findIndex(
-        (y) => y.toHex() === x.toHex()
+        (y) => y.color.toHex() === x.color.toHex()
       );
       if (afterIdx === -1) return acc;
       acc.push({
@@ -56,7 +56,7 @@
       cx={idx * xStep + xMargin}
       cy={rowHeight / 2}
       r={radius}
-      fill={color.toHex()}
+      fill={color.color.toHex()}
     />
   {/each}
 
@@ -65,7 +65,7 @@
       cx={idx * xStep + xMargin}
       cy={rowHeight * 1.5}
       r={radius}
-      fill={color.toHex()}
+      fill={color.color.toHex()}
     />
   {/each}
   <text
diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
index 0b26325d..37348e6d 100644
--- a/src/components/PalPreview.svelte
+++ b/src/components/PalPreview.svelte
@@ -9,6 +9,7 @@
   import { dealWithFocusEvent } from "../lib/utils";
 
   $: focusSet = new Set($focusStore.focusedColors);
+  console.log("todo tag presentation", pal);
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -30,20 +31,20 @@
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
           class:mb-5={highlightSelected && !focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
+          style="background-color: {color.color.toDisplay()}"
         ></button>
       {:else}
         <div
           class={"w-6 h-6 mx-1 rounded-full transition-all"}
           class:w-8={highlightSelected && focusSet.has(idx)}
           class:h-8={highlightSelected && focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
+          style="background-color: {color.color.toDisplay()}"
         ></div>
       {/if}
       {#if showTags}
-        <div class="text-xs flex flex-col">
-          {#each pal.colorSemantics[idx].tags as tag}
-            <span>{tag}</span>
+        <div class="flex flex-col text-center">
+          {#each color.tags as tag, idx}
+            <div class="text-xs">{tag}</div>
           {/each}
         </div>
       {/if}
diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
index 17b7e845..654e2fac 100644
--- a/src/content-modules/ComparePal.svelte
+++ b/src/content-modules/ComparePal.svelte
@@ -84,7 +84,7 @@
         startDragging={() => {}}
         stopDragging={() => {}}
         blindColors={(showDiff
-          ? currentPal.colors.map((x) => x.toColorSpace(colorSpace))
+          ? currentPal.colors.map((x) => x.color.toColorSpace(colorSpace))
           : []
         ).slice(
           0,
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 6b74b830..c2949e69 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -29,18 +29,22 @@
     <div class="w-full border-t-2 border-black my-2"></div>
     <input
       class="w-full"
-      value={colors[focusedColors[0]].toHex()}
+      value={colors[focusedColors[0]].color.toHex()}
       on:change={(e) => {
         const updatedColors = [...colors];
-        updatedColors[focusedColors[0]] = Color.colorFromString(
+        const newColor = Color.colorFromString(
           e.currentTarget.value,
           colorSpace
         );
+        updatedColors[focusedColors[0]] = {
+          ...updatedColors[focusedColors[0]],
+          color: newColor,
+        };
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />
     <ColorChannelPicker
-      color={colors[focusedColors[0]].toColorSpace(colorSpace)}
+      color={colors[focusedColors[0]].color.toColorSpace(colorSpace)}
       colorMode={$configStore.channelPickerSpace}
       onSpaceChange={(space) => {
         // @ts-ignore
@@ -48,7 +52,10 @@
       }}
       onColorChange={(color) => {
         const updatedColors = [...colors];
-        updatedColors[focusedColors[0]] = color.toColorSpace(colorSpace);
+        updatedColors[focusedColors[0]] = {
+          ...updatedColors[focusedColors[0]],
+          color: color.toColorSpace(colorSpace),
+        };
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />
diff --git a/src/controls/AddColor.svelte b/src/controls/AddColor.svelte
index 5a747f88..ff7514ca 100644
--- a/src/controls/AddColor.svelte
+++ b/src/controls/AddColor.svelte
@@ -5,7 +5,7 @@
   import { suggestAdditionsToPalette } from "../lib/api-calls";
   import ColorButton from "../components/ColorButton.svelte";
   import AutocompleteOrSearch from "../components/AutocompleteOrSearch.svelte";
-  import { webColors } from "../lib/utils";
+  import { webColors, wrapInBlankSemantics } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colors = currentPal.colors;
@@ -51,7 +51,9 @@
     <AutocompleteOrSearch
       setValue={(x) => {
         console.log("x", x);
-        const newColor = Color.colorFromString(x, colorSpace);
+        const newColor = wrapInBlankSemantics(
+          Color.colorFromString(x, colorSpace)
+        );
         const newColors = [...colors, newColor];
         colorStore.setCurrentPalColors(newColors);
       }}
@@ -77,7 +79,9 @@
         <ColorButton
           {color}
           clickColor={() => {
-            const newColor = Color.colorFromString(color, colorSpace);
+            const newColor = wrapInBlankSemantics(
+              Color.colorFromString(color, colorSpace)
+            );
             const newColors = [...colors, newColor];
             colorStore.setCurrentPalColors(newColors);
             interpretations = interpretations.filter((x) => x !== color);
diff --git a/src/controls/AdjustColor.svelte b/src/controls/AdjustColor.svelte
index 6ab702de..859900cc 100644
--- a/src/controls/AdjustColor.svelte
+++ b/src/controls/AdjustColor.svelte
@@ -15,8 +15,11 @@
   function actionOnColor(focusedColors: number[], action: ColorEffect) {
     const newColors = [...colors];
     focusedColors.forEach((idx) => {
-      const channels = action(colors[idx]);
-      newColors[idx] = Color.colorFromChannels(channels, colorSpace);
+      const channels = action(colors[idx].color);
+      newColors[idx] = {
+        ...colors[idx],
+        color: Color.colorFromChannels(channels, colorSpace),
+      };
     });
     colorStore.setCurrentPalColors(newColors);
   }
diff --git a/src/controls/AlignSelection.svelte b/src/controls/AlignSelection.svelte
index d802d67f..7dc688c9 100644
--- a/src/controls/AlignSelection.svelte
+++ b/src/controls/AlignSelection.svelte
@@ -60,12 +60,12 @@
         on:click={() => {
           const newCoordinate = op(
             ...colors
-              .map((x) => x.toChannels())
+              .map((x) => x.color.toChannels())
               .filter((_, idx) => focusSet.has(idx))
               .map((x) => x[pos])
           );
           const newColors = colors
-            .map((x) => x.toChannels())
+            .map((x) => x.color.toChannels())
             .map((x, idx) => {
               let y = x;
               if (focusSet.has(idx)) {
@@ -73,7 +73,10 @@
               }
               return y;
             })
-            .map((x) => Color.colorFromChannels(x, colorSpace));
+            .map((x, idx) => ({
+              ...colors[idx],
+              color: Color.colorFromChannels(x, colorSpace),
+            }));
 
           colorStore.setCurrentPalColors(newColors);
         }}
diff --git a/src/controls/ColorTagger.svelte b/src/controls/ColorTagger.svelte
index eefc0d3b..724dac26 100644
--- a/src/controls/ColorTagger.svelte
+++ b/src/controls/ColorTagger.svelte
@@ -7,20 +7,20 @@
   $: currentPalette = $colorStore.palettes[$colorStore.currentPal];
   // guaranteed to be a single value by usage context
   $: focusedColorIdx = $focusStore.focusedColors[0];
-  $: semantics = currentPalette.colorSemantics[focusedColorIdx];
+  $: currentColor = currentPalette.colors[focusedColorIdx];
 
-  const updateTags = (updatedTags: string[]) =>
-    updateSemantics({ ...semantics, tags: updatedTags });
-  const updateSize = (size: (typeof sizes)[number]) =>
-    updateSemantics({ ...semantics, size });
+  // const updateTags = (updatedTags: string[]) =>
+  //   updateSemantics({ ...semantics, tags: updatedTags });
+  // const updateSize = (size: (typeof sizes)[number]) =>
+  //   updateSemantics({ ...semantics, size });
 
-  const updateMarkType = (markType: (typeof markTypes)[number]) =>
-    updateSemantics({ ...semantics, markType });
-  function updateSemantics(updatedSemantics: typeof semantics) {
-    const newSemantics = [...currentPalette.colorSemantics];
-    newSemantics[focusedColorIdx] = updatedSemantics;
-    colorStore.updateColorSemantics(newSemantics);
-  }
+  // const updateMarkType = (markType: (typeof markTypes)[number]) =>
+  //   updateSemantics({ ...semantics, markType });
+  // function updateSemantics(updatedSemantics: typeof semantics) {
+  //   const newSemantics = [...currentPalette.colorSemantics];
+  //   newSemantics[focusedColorIdx] = updatedSemantics;
+  //   colorStore.updateColorSemantics(newSemantics);
+  // }
   let tagInput = "";
   const sizes = [undefined, "small", "medium", "large"] as const;
   const markTypes = [
@@ -39,7 +39,7 @@
   These to mark properties like color, brand, and so on
 </div>
 
-<form
+<!-- <form
   on:submit|preventDefault|stopPropagation={() => {
     updateTags([...semantics.tags, tagInput]);
     tagInput = "";
@@ -85,4 +85,4 @@
   {#each sizes as option}
     <option value={option}>{option}</option>
   {/each}
-</select>
+</select> -->
diff --git a/src/controls/Config.svelte b/src/controls/Config.svelte
index 05534461..fc105779 100644
--- a/src/controls/Config.svelte
+++ b/src/controls/Config.svelte
@@ -88,7 +88,7 @@
             return {
               background: background.toHex(),
               colorSpace,
-              colors: colors.map((c) => c.toHex()),
+              colors: colors.map((c) => c.color.toHex()),
               name,
               type,
             };
diff --git a/src/controls/DistributePoints.svelte b/src/controls/DistributePoints.svelte
index 47a5bda9..b17a1de6 100644
--- a/src/controls/DistributePoints.svelte
+++ b/src/controls/DistributePoints.svelte
@@ -19,20 +19,20 @@
     let sortedIndexes = focusedColors.sort((a, b) => {
       const modeToIdx = { horizontal: 1, vertical: 2, "in z space": 0 };
       const idx = modeToIdx[dir.direction] || 0;
-      const pointA = colors[a].toChannels()[idx];
-      const pointB = colors[b].toChannels()[idx];
+      const pointA = colors[a].color.toChannels()[idx];
+      const pointB = colors[b].color.toChannels()[idx];
       return pointA - pointB;
     });
     type Channels = [number, number, number];
-    const minPoint = colors[sortedIndexes[0]].toChannels() as Channels;
+    const minPoint = colors[sortedIndexes[0]].color.toChannels() as Channels;
     const maxPoint = colors[
       sortedIndexes[sortedIndexes.length - 1]
-    ].toChannels() as Channels;
+    ].color.toChannels() as Channels;
 
     const numPoints = sortedIndexes.length - 1;
     let newPoints = sortedIndexes.map((colorIdx, arrIdx) => {
       const t = arrIdx / numPoints;
-      const newPoint = colors.at(colorIdx)!.toChannels() as Channels;
+      const newPoint = colors.at(colorIdx)!.color.toChannels() as Channels;
       const xIdx = config.xChannelIndex;
       const yIdx = config.yChannelIndex;
       const zIdx = config.zChannelIndex;
@@ -51,7 +51,9 @@
 
     const newColors = [...colors].map((color, idx) => {
       const point = pointsByIndex[idx];
-      return point ? Color.colorFromChannels(point, colorSpace) : color;
+      return point
+        ? { ...color, color: Color.colorFromChannels(point, colorSpace) }
+        : color;
     });
 
     colorStore.setCurrentPalColors(newColors);
diff --git a/src/controls/InterpolatePoints.svelte b/src/controls/InterpolatePoints.svelte
index 4571a352..252284b7 100644
--- a/src/controls/InterpolatePoints.svelte
+++ b/src/controls/InterpolatePoints.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import type { ColorWrap } from "../types";
   import { Color } from "../lib/Color";
   import type { Palette } from "../types";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import { buttonStyle } from "../lib/styles";
   import PalPreview from "../components/PalPreview.svelte";
+  import { wrapInBlankSemantics } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: focusedColors = $focusStore.focusedColors;
@@ -41,12 +43,12 @@
 
     return points;
   }
-  function createInterpolation(): Color[] {
+  function createInterpolation(): ColorWrap<Color>[] {
     const newColors = [];
     const seenHexes = new Set<string>([]);
     const deDuppedFocusedColors = focusedColors
-      .map((x) => [x, colors[x].toHex()] as [number, string])
-      .filter(([idx, hexColor]) => {
+      .map((x) => [x, colors[x].color.toHex()] as [number, string])
+      .filter(([_idx, hexColor]) => {
         if (seenHexes.has(hexColor)) {
           return false;
         }
@@ -57,7 +59,10 @@
     for (let idx = 0; idx < deDuppedFocusedColors.length - 1; idx++) {
       const pointA = colors[deDuppedFocusedColors[idx]];
       const pointB = colors[deDuppedFocusedColors[idx + 1]];
-      const newPoints = createInterpolatedPoints(pointA, pointB);
+      const newPoints = createInterpolatedPoints(
+        pointA.color,
+        pointB.color
+      ).map((x) => wrapInBlankSemantics(x));
       newColors.push(pointA, ...newPoints);
     }
     newColors.push(
diff --git a/src/controls/NewPal.svelte b/src/controls/NewPal.svelte
index 6bb44c39..7196bd9b 100644
--- a/src/controls/NewPal.svelte
+++ b/src/controls/NewPal.svelte
@@ -6,7 +6,11 @@
   import focusStore from "../stores/focus-store";
   import Tooltip from "../components/Tooltip.svelte";
   import { buttonStyle, denseButtonStyle } from "../lib/styles";
-  import { newGenericPal, createPalFromHexes } from "../lib/utils";
+  import {
+    newGenericPal,
+    createPalFromHexes,
+    wrapInBlankSemantics,
+  } from "../lib/utils";
   import SuggestColorPal from "./SuggestColorPal.svelte";
 
   import MiniPalPreview from "../components/MiniPalPreview.svelte";
@@ -20,11 +24,13 @@
   );
 
   function newPal(newPal: StringPalette) {
+    const colors = newPal.colors.map((x) => {
+      const color = Color.colorFromString(x.color, colorSpace);
+      return { ...x, color };
+    });
     const pal = {
       ...newPal,
-      colors: newPal.colors.map((x: string) =>
-        Color.colorFromString(x, colorSpace)
-      ),
+      colors,
       background: Color.colorFromString(newPal.background, colorSpace),
       colorSpace,
     } as Palette;
diff --git a/src/controls/Rotate.svelte b/src/controls/Rotate.svelte
index f6d27a46..d5825e86 100644
--- a/src/controls/Rotate.svelte
+++ b/src/controls/Rotate.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+  import type { ColorWrap } from "../types";
   import { Color, colorPickerConfig } from "../lib/Color";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
-  import { avgColors } from "../lib/utils";
 
   $: focusedColors = $focusStore.focusedColors;
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -14,7 +14,7 @@
   $: angle = 0;
 
   $: angle, colorSpace, rotatePoints();
-  $: memorizedColors = false as false | Color[];
+  $: memorizedColors = false as false | ColorWrap<Color>[];
 
   function rotatePoints() {
     if (focusedColors.length === 0) {
@@ -36,7 +36,7 @@
       focusedColors
         .map((x) => localColors[x])
         .map((localColor) => {
-          const color = Color.toColorSpace(localColor, colorSpace);
+          const color = Color.toColorSpace(localColor.color, colorSpace);
           const channels = color.toChannels();
           //   https://math.stackexchange.com/questions/4354438/how-to-rotate-a-point-on-a-cartesian-plane-around-something-other-than-the-origi
 
@@ -88,7 +88,9 @@
         .map((x, y) => [y, x])
     );
     const newColors = localColors.map((x, idx) =>
-      focusedColors.includes(idx) ? rotated[focusedColors.indexOf(idx)] : x
+      focusedColors.includes(idx)
+        ? { ...x, color: rotated[focusedColors.indexOf(idx)] }
+        : x
     );
     colorStore.setCurrentPalColors(newColors);
   }
diff --git a/src/controls/Sort.svelte b/src/controls/Sort.svelte
index 5b3da5b2..0735da89 100644
--- a/src/controls/Sort.svelte
+++ b/src/controls/Sort.svelte
@@ -10,8 +10,8 @@
 
   function sortByChannel(colorSpace: string, channel: number) {
     const newSort = [...colors].sort((a, b) => {
-      const aVal = a.toColorIO().to(colorSpace).coords[channel];
-      const bVal = b.toColorIO().to(colorSpace).coords[channel];
+      const aVal = a.color.toColorIO().to(colorSpace).coords[channel];
+      const bVal = b.color.toColorIO().to(colorSpace).coords[channel];
       return aVal - bVal;
     });
     colorStore.setSort(newSort);
diff --git a/src/controls/SuggestColorPal.svelte b/src/controls/SuggestColorPal.svelte
index fdc76d28..b20fe309 100644
--- a/src/controls/SuggestColorPal.svelte
+++ b/src/controls/SuggestColorPal.svelte
@@ -6,6 +6,7 @@
   import type { Palette } from "../types";
   import PalPreview from "../components/PalPreview.svelte";
   import { buttonStyle } from "../lib/styles";
+  import { wrapInBlankSemantics } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal ? currentPal.colorSpace : "lab";
@@ -19,17 +20,12 @@
   }): Palette {
     return {
       colors: suggestion.colors.map((x) =>
-        Color.colorFromString(x, colorSpace as any)
+        wrapInBlankSemantics(Color.colorFromString(x, colorSpace as any))
       ),
       background: Color.colorFromString(
         suggestion.background,
         colorSpace as any
       ),
-      colorSemantics: suggestion.colors.map(() => ({
-        size: undefined,
-        markType: undefined,
-        tags: [],
-      })),
       name: palPrompt,
       type: "categorical",
       evalConfig: {},
diff --git a/src/controls/SuggestionModificationToSelection.svelte b/src/controls/SuggestionModificationToSelection.svelte
index 7ea81347..6ed32095 100644
--- a/src/controls/SuggestionModificationToSelection.svelte
+++ b/src/controls/SuggestionModificationToSelection.svelte
@@ -6,14 +6,14 @@
   import { suggestContextualAdjustments } from "../lib/api-calls";
   import { buttonStyle } from "../lib/styles";
   import PalDiff from "../components/PalDiff.svelte";
-  import { toPal } from "../lib/utils";
+  import { toPal, wrapInBlankSemantics } from "../lib/utils";
 
   let requestState: "idle" | "loading" | "loaded" | "failed" = "idle";
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: colorSpace = currentPal ? currentPal.colorSpace : "lab";
   $: colors = currentPal.colors;
   $: selectedColors = $focusStore.focusedColors
-    .map((x) => colors[x]?.toHex())
+    .map((x) => colors[x]?.color.toHex())
     .filter((x) => x !== undefined) as string[];
   let suggestedColorSets: string[][] = [];
   let palPrompt: string = "";
@@ -24,7 +24,7 @@
       ? {
           ...currentPal,
           colors: selectedColors.map((x) =>
-            Color.colorFromString(x, colorSpace)
+            wrapInBlankSemantics(Color.colorFromString(x, colorSpace))
           ),
         }
       : currentPal;
@@ -58,20 +58,25 @@
     if (selectedColors.length) {
       let usedSuggestions = new Set<number>([]);
       newColors = colors.map((x, jdx) => {
-        const idx = selectedColors.indexOf(x.toHex());
+        const idx = selectedColors.indexOf(x.color.toHex());
         if (idx === -1) return x;
         usedSuggestions.add(idx);
-        return Color.colorFromString(suggestedColors[idx], colorSpace);
+        return {
+          ...x,
+          color: Color.colorFromString(suggestedColors[idx], colorSpace),
+        };
       });
       const unusedSuggestions = suggestedColors.filter(
         (_, idx) => !usedSuggestions.has(idx)
       );
       newColors = newColors.concat(
-        unusedSuggestions.map((x) => Color.colorFromString(x, colorSpace))
+        unusedSuggestions.map((x) =>
+          wrapInBlankSemantics(Color.colorFromString(x, colorSpace))
+        )
       );
     } else {
       newColors = suggestedColors.map((x) =>
-        Color.colorFromString(x, colorSpace)
+        wrapInBlankSemantics(Color.colorFromString(x, colorSpace))
       );
     }
     colorStore.setCurrentPalColors(newColors);
diff --git a/src/example/Example.svelte b/src/example/Example.svelte
index 5bdf145d..20f1355b 100644
--- a/src/example/Example.svelte
+++ b/src/example/Example.svelte
@@ -50,7 +50,10 @@
       $configStore.colorSim !== "none" &&
       $configStore.useSimulatorOnExamples
     ) {
-      colors = colors.map((x) => simulate_cvd($configStore.colorSim, x));
+      colors = colors.map((x) => ({
+        ...x,
+        color: simulate_cvd($configStore.colorSim, x.color),
+      }));
     } else {
       colors = currentPal.colors;
     }
@@ -63,7 +66,9 @@
     const color = Color.colorFromString(computedFill, "lab")
       .toHex()
       .toLowerCase();
-    const colorIdx = colors.findIndex((x) => x.toHex().toLowerCase() === color);
+    const colorIdx = colors.findIndex(
+      (x) => x.color.toHex().toLowerCase() === color
+    );
     if (colorIdx > -1) {
       focusedColor = colorIdx;
       focusStore.setColors([colorIdx]);
@@ -92,7 +97,7 @@
   }
   let container: HTMLDivElement;
   $: color = focusedColor !== false && colors[focusedColor];
-  $: mappedColors = colors.map((x) => x.toHex());
+  $: mappedColors = colors.map((x) => x.color.toHex());
 </script>
 
 <div class="relative">
diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
index f489f718..1ebdcbc8 100644
--- a/src/example/Swatches.svelte
+++ b/src/example/Swatches.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ColorWrap } from "../types";
   import { Color } from "../lib/Color";
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
@@ -19,7 +20,10 @@
       $configStore.colorSim !== "none" &&
       $configStore.useSimulatorOnExamples
     ) {
-      colors = colors.map((x) => simulate_cvd($configStore.colorSim, x));
+      colors = colors.map((x) => ({
+        ...x,
+        color: simulate_cvd($configStore.colorSim, x.color),
+      }));
     } else {
       colors = currentPal?.colors || [];
     }
@@ -32,23 +36,27 @@
   let classes = [
     {
       className: `${common} big-swatch `,
-      styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
+      styleMap: (color): string => `background-color: ${color.color.toHex()};`,
       selectionClass: "rotate-12",
     },
     {
       className: `${common} small-swatch`,
-      styleMap: (color: Color): string => `background-color: ${color.toHex()};`,
+      styleMap: (color): string => `background-color: ${color.color.toHex()};`,
       selectionClass: "rotate-12",
     },
     {
       className: `${common} small-swatch rounded-full`,
-      styleMap: (color: Color): string => `border: 2px solid ${color.toHex()};`,
+      styleMap: (color): string => `border: 2px solid ${color.color.toHex()};`,
       selectionClass: "relative top-1 left-1",
     },
-  ];
+  ] as {
+    className: string;
+    styleMap: (c: ColorWrap<Color>) => string;
+    selectionClass: string;
+  }[];
 
   $: colorsInGroupsOf3 = colors.reduce(
-    (acc: number[][], x: Color, i: number) => {
+    (acc: number[][], x: ColorWrap<Color>, i: number) => {
       const idx = Math.floor(i / 3);
       if (!acc[idx]) {
         acc[idx] = [];
@@ -79,7 +87,7 @@
     <div class="flex flex-col">
       {#each colors as color, i}
         <button
-          style={`background-color: ${color.toHex()};`}
+          style={`background-color: ${color.color.toHex()};`}
           class="wide-bar transition-all"
           class:ml-5={focusSet.has(i)}
           class:mr-5={!focusSet.has(i)}
@@ -123,7 +131,7 @@
       <div class="flex flex-wrap justify-center w-full">
         {#each colors as color, i}
           <button
-            style={`color: ${color.toHex()}; transform: rotate(${
+            style={`color: ${color.color.toHex()}; transform: rotate(${
               focusSet.has(i) ? 10 : 0
             }deg)`}
             class="mr-2 w-16"
@@ -134,7 +142,7 @@
                 );
             }}
           >
-            {color.toHex()}
+            {color.color.toHex()}
           </button>
         {/each}
       </div>
diff --git a/src/lib/CustomLint.ts b/src/lib/CustomLint.ts
index 318378c5..788dc9f6 100644
--- a/src/lib/CustomLint.ts
+++ b/src/lib/CustomLint.ts
@@ -62,12 +62,12 @@ export function CreateCustomLint(props: CustomLint) {
       if (this.blameMode === "pair") {
         blame = (this.checkData as number[][])
           .map((x) =>
-            x.map((x) => this.palette.colors[x].toHex()).join(" and ")
+            x.map((x) => this.palette.colors[x].color.toHex()).join(" and ")
           )
           .join(", ");
       } else {
         blame = (this.checkData as number[])
-          .map((x) => this.palette.colors[x].toHex())
+          .map((x) => this.palette.colors[x].color.toHex())
           .join(", ");
       }
 
diff --git a/src/lib/api-calls.ts b/src/lib/api-calls.ts
index 743cdb86..2310aae8 100644
--- a/src/lib/api-calls.ts
+++ b/src/lib/api-calls.ts
@@ -7,7 +7,7 @@ type Engine = "openai" | "google";
 type SimplePal = { background: string; colors: string[] };
 const palToString = (pal: Palette) => ({
   background: pal.background.toHex(),
-  colors: pal.colors.map((x) => x.toHex()),
+  colors: pal.colors.map((x) => x.color.toHex()),
 });
 
 function openAIScaffold<A>(
@@ -169,7 +169,7 @@ export function lint(pal: Palette, computeMessage: boolean) {
     content: JSON.stringify({
       ...pal,
       background: pal.background.toString(),
-      colors: pal.colors.map((x) => x.toString()),
+      colors: pal.colors.map((x) => x.color.toString()),
     }),
   }).then((x) => {
     return x as unknown as any[];
diff --git a/src/lib/lint-language/lint-language.ts b/src/lib/lint-language/lint-language.ts
index 284747e2..0e47fad5 100644
--- a/src/lib/lint-language/lint-language.ts
+++ b/src/lib/lint-language/lint-language.ts
@@ -35,7 +35,7 @@ class Environment {
   get(name: string) {
     if (name === "colors") {
       const children = this.palette.colors
-        .map((x) => new LLColor(x, x.toHex()))
+        .map((x) => new LLColor(x.color, x.color.toHex()))
         .map((x) => new LLValue(x));
       return new LLValueArray(children);
     }
diff --git a/src/lib/linter-tools/lint-fixer.ts b/src/lib/linter-tools/lint-fixer.ts
index 6517ba91..6e2b650b 100644
--- a/src/lib/linter-tools/lint-fixer.ts
+++ b/src/lib/linter-tools/lint-fixer.ts
@@ -2,12 +2,13 @@ import type { Palette } from "../../types";
 import type { LintResult } from "../ColorLint";
 import { suggestFix } from "../api-calls";
 import { Color } from "../Color";
+import { wrapInBlankSemantics } from "../utils";
 
 export async function suggestLintAIFix(
   palette: Palette,
   lint: LintResult,
   engine: string
-) {
+): Promise<Palette[]> {
   const colorSpace = palette.colorSpace;
   const msg = `${lint.message}\n\nFailed: ${lint.naturalLanguageProgram}`;
   return suggestFix(palette, msg, engine as any).then((x) => {
@@ -19,7 +20,9 @@ export async function suggestLintAIFix(
         return {
           ...palette,
           colors: el.colors.map((x) =>
-            Color.colorFromHex(x.replace("##", "#"), colorSpace)
+            wrapInBlankSemantics(
+              Color.colorFromHex(x.replace("##", "#"), colorSpace)
+            )
           ),
         };
       } catch (e) {
diff --git a/src/lib/lints/background-contrast.ts b/src/lib/lints/background-contrast.ts
index 7a2021d3..5fe0cd7a 100644
--- a/src/lib/lints/background-contrast.ts
+++ b/src/lib/lints/background-contrast.ts
@@ -54,7 +54,7 @@ export const fixBackgroundDifferentiability: LintFixer = async (palette) => {
   const clamp = (x: number) => Math.max(0, Math.min(100, x));
   const newL = clamp(!bgCloserToWhite ? backgroundL * 1.5 : backgroundL * 0.5);
   const colorsCloseToBackground = getColorsCloseToBackground(
-    colors,
+    colors.map((x) => x.color),
     background
   );
   const newColors = colors.map((x, idx) => {
@@ -62,12 +62,15 @@ export const fixBackgroundDifferentiability: LintFixer = async (palette) => {
       return x;
     }
     const color = colors[idx];
-    const newColor = Color.toColorSpace(color, "lab");
+    const newColor = Color.toColorSpace(color.color, "lab");
     const [_l, a, b] = newColor.toChannels();
-    return Color.toColorSpace(
-      newColor.fromChannels([newL, a, b]),
-      colorSpace as any
-    );
+    return {
+      ...x,
+      color: Color.toColorSpace(
+        newColor.fromChannels([newL, a, b]),
+        colorSpace as any
+      ),
+    };
   });
   return [{ ...palette, colors: newColors }];
 };
diff --git a/src/lib/lints/diverging-order.ts b/src/lib/lints/diverging-order.ts
index 7ca951fb..11eef0e9 100644
--- a/src/lib/lints/diverging-order.ts
+++ b/src/lib/lints/diverging-order.ts
@@ -1,7 +1,7 @@
 import { ColorLint } from "../ColorLint";
 import type { PalType } from "../../types";
 import { Color } from "../Color";
-import type { Palette } from "../../types";
+import type { ColorWrap } from "../../types";
 import type { LintFixer } from "../linter-tools/lint-fixer";
 
 const meanPoint2d = (points: Color[]) => {
@@ -32,7 +32,9 @@ export default class DivergingOrder extends ColorLint<boolean, false> {
 
     const summarizedDirections = colors
       .slice(0, -1)
-      .map((x, i) => (x.luminance() > colors[i + 1].luminance() ? 1 : -1))
+      .map((x, i) =>
+        x.color.luminance() > colors[i + 1].color.luminance() ? 1 : -1
+      )
       .reduce((acc, x) => {
         if (acc.length === 0) return [x];
         if (acc[acc.length - 1] === x) return acc;
@@ -58,9 +60,9 @@ export const fixDivergingOrder: LintFixer = async (palette) => {
   //   (x) => x.luminance() < medianPoint.luminance()
   // ).length;
 
-  const sortByLum = (a: Color, b: Color) => {
-    const aL = a.luminance();
-    const bL = b.luminance();
+  const sortByLum = (a: ColorWrap<Color>, b: ColorWrap<Color>) => {
+    const aL = a.color.luminance();
+    const bL = b.color.luminance();
     if (aL === bL) return 0;
     return aL > bL ? 1 : -1;
   };
@@ -76,7 +78,9 @@ export const fixDivergingOrder: LintFixer = async (palette) => {
     const color = colors[i];
     const leftColor = leftColors.at(-1)!;
     const rightColor = rightColors.at(-1)!;
-    if (color.deltaE(leftColor) < color.deltaE(rightColor)) {
+    if (
+      color.color.deltaE(leftColor.color) < color.color.deltaE(rightColor.color)
+    ) {
       leftColors.push(color);
     } else {
       rightColors.push(color);
diff --git a/src/lib/lints/in-gamut.ts b/src/lib/lints/in-gamut.ts
index d8e519b1..9af7cb05 100644
--- a/src/lib/lints/in-gamut.ts
+++ b/src/lib/lints/in-gamut.ts
@@ -31,8 +31,9 @@ const lint: CustomLint = {
 export default lint;
 
 export const fixGamut: LintFixer = async (palette) => {
-  const colors = palette.colors.map((color) =>
-    color.fromChannels(clipToGamut(color))
-  );
+  const colors = palette.colors.map((color) => ({
+    ...color,
+    color: color.color.fromChannels(clipToGamut(color.color)),
+  }));
   return [{ ...palette, colors }];
 };
diff --git a/src/lib/lints/name-discrim.ts b/src/lib/lints/name-discrim.ts
index b6db1334..b862d113 100644
--- a/src/lib/lints/name-discrim.ts
+++ b/src/lib/lints/name-discrim.ts
@@ -76,7 +76,7 @@ export const fixColorNameDiscriminability: LintFixer = async (
 ) => {
   const colors = palette.colors;
   const colorNamesByIndex = colors.reduce((acc, color, index) => {
-    const name = getName(color);
+    const name = getName(color.color);
     acc[name] = (acc[name] || []).concat(index);
     return acc;
   }, {} as Record<string, number[]>);
@@ -84,10 +84,10 @@ export const fixColorNameDiscriminability: LintFixer = async (
   Object.values(colorNamesByIndex)
     .filter((x) => x.length > 1)
     .forEach((indices) => {
-      const localColors = indices.map((i) => newColors[i]);
+      const localColors = indices.map((i) => newColors[i].color);
       const updatedColors = suggestFixForColorsWithCommonNames(localColors);
       indices.forEach((i, j) => {
-        newColors[i] = updatedColors[j];
+        newColors[i] = { ...newColors[i], color: updatedColors[j] };
       });
     });
   return [{ ...palette, colors: newColors }];
diff --git a/src/lib/lints/sequential-order.ts b/src/lib/lints/sequential-order.ts
index 7d4bffc1..840970aa 100644
--- a/src/lib/lints/sequential-order.ts
+++ b/src/lib/lints/sequential-order.ts
@@ -47,6 +47,6 @@ export default lint;
 const getLightness = (color: Color) => color.toColorIO().to("lab").coords[0];
 export const fixSequentialOrder: LintFixer = async (palette: Palette) => {
   const colors = [...palette.colors];
-  colors.sort((a, b) => getLightness(a) - getLightness(b));
+  colors.sort((a, b) => getLightness(a.color) - getLightness(b.color));
   return [{ ...palette, colors }];
 };
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0f633aa6..be7eb929 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -215,7 +215,9 @@ export const makePal = (
   return {
     ...defaultHexPal,
     name,
-    colors: colors.map((x) => Color.colorFromString(x, colorSpace)),
+    colors: colors.map((x) =>
+      wrapInBlankSemantics(Color.colorFromString(x, colorSpace))
+    ),
     background: Color.colorFromString("#ffffff", colorSpace),
     type,
   };
@@ -320,7 +322,7 @@ export const selectColorsFromDragZ: selectColorsFromDrag = (
   const magicOffset = 15;
   const newFocusedColors = colors
     .map((color, idx) =>
-      between(config.z(color) + magicOffset, yMin, yMax) ? idx : -1
+      between(config.z(color.color) + magicOffset, yMin, yMax) ? idx : -1
     )
     .filter((x) => x !== -1);
   return [...newFocusedColors];
@@ -338,7 +340,7 @@ export const selectColorsFromDrag: selectColorsFromDrag = (
   // check if selected in screen space
   const newFocusedColors = colors
     .map((color, idx) => {
-      let [xVal, yVal] = [config.x(color), config.y(color)];
+      let [xVal, yVal] = [config.x(color.color), config.y(color.color)];
       if (config.isPolar) {
         xVal += config.plotWidth / 2;
         yVal += config.plotHeight / 2;
diff --git a/src/linting/EvalColorColumn.svelte b/src/linting/EvalColorColumn.svelte
index 040468e9..4ef28058 100644
--- a/src/linting/EvalColorColumn.svelte
+++ b/src/linting/EvalColorColumn.svelte
@@ -3,6 +3,7 @@
   import focusStore from "../stores/focus-store";
   import configStore from "../stores/config-store";
   import lintStore from "../stores/lint-store";
+  import type { ColorWrap } from "../types";
 
   import { colorNameSimple } from "../lib/lints/name-discrim";
   import EvalResponse from "./EvalResponse.svelte";
@@ -13,14 +14,14 @@
 
   $: checks = $lintStore.currentChecks;
 
-  $: colorNames = colorNameSimple(colors);
+  $: colorNames = colorNameSimple(colors.map((x) => x.color));
   $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
   $: selectedBlindType = $configStore.colorSim;
   $: sim = (color: Color): string =>
     simulate_cvd(selectedBlindType, color).toHex();
 
   $: colorsToIssues = colors.map((x) => {
-    const hex = `${x.toHex()}`;
+    const hex = `${x.color.toHex()}`;
     return checks.filter(
       (check) => !check.passes && check.message.includes(hex)
     );
@@ -28,10 +29,12 @@
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: evalConfig = currentPal.evalConfig;
-  function computeDeltas(colors: Color[], metric: string = "2000") {
+  function computeDeltas(colors: ColorWrap<Color>[], metric: string = "2000") {
     const deltas = [];
     for (let i = 1; i < colors.length; i++) {
-      deltas.push(colors[i].symmetricDeltaE(colors[i - 1], metric as any));
+      const left = colors[i - 1].color;
+      const right = colors[i].color;
+      deltas.push(left.symmetricDeltaE(right, metric as any));
     }
     return deltas;
   }
@@ -65,7 +68,7 @@
         );
       }}
       class="w-full flex flex-col justify-center items-center text-sm mt-2 transition-all relative"
-      class:text-white={color.luminance() < 0.5}
+      class:text-white={color.color.luminance() < 0.5}
       class:ml-5={$focusStore.focusedColors.includes(idx)}
       class:mr-5={!$focusStore.focusedColors.includes(idx)}
       style="min-height: 40px"
@@ -73,18 +76,18 @@
       <div class="w-full flex flex-col h-full absolute">
         <div
           class="grow h-full"
-          style="background-color: {color.toHex()}"
+          style="background-color: {color.color.toHex()}"
         ></div>
         {#if selectedBlindType !== "none"}
           <div
             class="grow h-full"
-            style={`background-color: ${sim(color)}`}
+            style={`background-color: ${sim(color.color)}`}
           ></div>
         {/if}
       </div>
       <div class="flex justify-between w-full px-2 items-center z-10">
         <span class="flex flex-col items-start">
-          <span>{color.toHex()}</span>
+          <span>{color.color.toHex()}</span>
           {#if colorNames[idx]}<span class="text-right text-xs">
               {colorNames[idx]?.word}
             </span>{/if}
diff --git a/src/linting/ExplanationViewer.svelte b/src/linting/ExplanationViewer.svelte
index f2ba8da7..c6e9133a 100644
--- a/src/linting/ExplanationViewer.svelte
+++ b/src/linting/ExplanationViewer.svelte
@@ -56,7 +56,7 @@
     {:else}
       <button
         on:click|stopPropagation={(e) => {
-          const hexes = colors.map((x) => x.toHex().toLowerCase());
+          const hexes = colors.map((x) => x.color.toHex().toLowerCase());
           const idx = hexes.findIndex((x) => x === block.content.toLowerCase());
           focusStore.setColors(
             dealWithFocusEvent(e, idx, $focusStore.focusedColors)
diff --git a/src/linting/LintCustomizationPreview.svelte b/src/linting/LintCustomizationPreview.svelte
index 94065a6c..c274b710 100644
--- a/src/linting/LintCustomizationPreview.svelte
+++ b/src/linting/LintCustomizationPreview.svelte
@@ -3,6 +3,7 @@
   import Tooltip from "../components/Tooltip.svelte";
   import { Color } from "../lib/Color";
   import Background from "../components/Background.svelte";
+  import { wrapInBlankSemantics } from "../lib/utils";
   import type { Palette } from "../types";
   import { buttonStyle } from "../lib/styles";
   export let pal: Palette;
@@ -20,12 +21,14 @@
       <div slot="content" class="flex flex-col">
         <input
           class="mb-2"
-          value={color.toHex()}
+          value={color.color.toHex()}
           on:change={(e) => {
             // @ts-ignore
             const val = e.target.value;
             const newColors = [...pal.colors];
-            newColors[idx] = Color.colorFromString(val, pal.colorSpace);
+            newColors[idx] = wrapInBlankSemantics(
+              Color.colorFromString(val, pal.colorSpace)
+            );
             updatePal({ ...pal, colors: newColors });
           }}
         />
@@ -40,10 +43,10 @@
             });
           }}
           colorMode={pal.colorSpace}
-          {color}
+          color={color.color}
           onColorChange={(newColor) => {
             const newColors = [...pal.colors];
-            newColors[idx] = newColor;
+            newColors[idx] = wrapInBlankSemantics(newColor);
             updatePal({ ...pal, colors: newColors });
           }}
         />
@@ -66,9 +69,10 @@
         class={"w-6 h-6 mx-2 rounded-full transition-all"}
         class:border-4={blamedSet.has(idx)}
         class:border-dashed={blamedSet.has(idx)}
-        class:border-black={blamedSet.has(idx) && color.luminance() > 0.5}
-        class:border-white={blamedSet.has(idx) && color.luminance() <= 0.5}
-        style="background-color: {color.toDisplay()}"
+        class:border-black={blamedSet.has(idx) && color.color.luminance() > 0.5}
+        class:border-white={blamedSet.has(idx) &&
+          color.color.luminance() <= 0.5}
+        style="background-color: {color.color.toDisplay()}"
       ></button>
     </Tooltip>
   {/each}
@@ -77,7 +81,10 @@
       <button
         class={buttonStyle}
         on:click={() => {
-          const newColors = [...pal.colors, Color.colorFromString("steelblue")];
+          const newColors = [
+            ...pal.colors,
+            wrapInBlankSemantics(Color.colorFromString("steelblue")),
+          ];
           updatePal({ ...pal, colors: newColors });
         }}
       >
@@ -106,7 +113,7 @@
         }}
       />
       <div>
-        Colors: [{pal.colors.map((x) => `"${x.toHex()}"`).join(", ")}]
+        Colors: [{pal.colors.map((x) => `"${x.color.toHex()}"`).join(", ")}]
       </div>
     </div>
     <button slot="target" let:toggle on:click={toggle}>⚙</button>
diff --git a/src/scatterplot/ColorScatterPlotPolarGuide.svelte b/src/scatterplot/ColorScatterPlotPolarGuide.svelte
index 9bf904e2..eb38914f 100644
--- a/src/scatterplot/ColorScatterPlotPolarGuide.svelte
+++ b/src/scatterplot/ColorScatterPlotPolarGuide.svelte
@@ -63,9 +63,9 @@
     coords[xIdx] = r;
     coords[yIdx] = angle;
     coords[zIdx] = focusedColors.length
-      ? colors[focusedColors[0]].toChannels()[zIdx]
+      ? colors[focusedColors[0]].color.toChannels()[zIdx]
       : colors.length
-        ? colors[0].toChannels()[zIdx]
+        ? colors[0].color.toChannels()[zIdx]
         : 0;
     return Color.colorFromChannels(coords, colorSpace as any).toDisplay();
   };
diff --git a/src/scatterplot/ColorScatterPlotXYGuides.svelte b/src/scatterplot/ColorScatterPlotXYGuides.svelte
index bfabafb9..17388747 100644
--- a/src/scatterplot/ColorScatterPlotXYGuides.svelte
+++ b/src/scatterplot/ColorScatterPlotXYGuides.svelte
@@ -55,7 +55,7 @@
   const bgResolution = 15;
   const avgNums = (nums: number[]) =>
     nums.reduce((acc, x) => acc + x, 0) / nums.length;
-  $: fColors = focusedColors.map((x) => colors[x].toChannels());
+  $: fColors = focusedColors.map((x) => colors[x].color.toChannels());
   $: fillColor = (i: number, j: number) => {
     const coords = [0, 0, 0] as [number, number, number];
     coords[config.xChannelIndex] = xNonDimScale(i / bgResolution);
diff --git a/src/stores/lint-store.ts b/src/stores/lint-store.ts
index fcd4375f..f9fcdd39 100644
--- a/src/stores/lint-store.ts
+++ b/src/stores/lint-store.ts
@@ -10,7 +10,7 @@ import type {
 } from "../types";
 import { Color } from "../lib/Color";
 import type { LintResult } from "../lib/ColorLint";
-import { JSONStringify } from "../lib/utils";
+import { JSONStringify, wrapInBlankSemantics } from "../lib/utils";
 import { BUILT_INS } from "../lib/linter";
 import { loadLints } from "../lib/api-calls";
 
@@ -39,7 +39,10 @@ function serializePalette(pal: Palette): StringPalette {
   return {
     ...pal,
     background: pal.background.toString(),
-    colors: pal.colors.map((x) => x.toString()),
+    colors: pal.colors.map((x) => ({
+      ...x,
+      color: x.toString(),
+    })),
   };
 }
 
@@ -47,7 +50,13 @@ function deserializePalette(pal: StringPalette): Palette {
   return {
     ...pal,
     background: Color.colorFromString(pal.background, pal.colorSpace),
-    colors: pal.colors.map((x) => Color.colorFromString(x, pal.colorSpace)),
+    colors: pal.colors.map((x) => {
+      const color = Color.colorFromString(x.color, pal.colorSpace);
+      if (typeof x.color === "string") {
+        return wrapInBlankSemantics(color);
+      }
+      return { ...x, color };
+    }),
   };
 }