diff --git a/README.md b/README.md
index c076c7a0..f0b41378 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,6 @@ First time you start it up you should also run `yarn prep data`
 # General Todos
 
 - [ ] Its really annoying to have to update schema, types, docs whenever a lang change is made. Can this be automated?
-- [ ] Color Space selections should persist
 - [ ] Make name discrim hueristc fix more resilient, see switching to basic colors
 - [ ] Search palettes-by-lint screen
 - [ ] Drag to re-order points?
@@ -47,6 +46,7 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Allow no palettes
 - [ ] allows renaming of non-current palettes
 - [ ] Parameterize the scatter column completely, allow edits to the compare stuff
+- [x] Color Space selections should persist
 - [x] Dont allow saves to examples when there's an error
 - [x] Switch the examples to be tabs or single
 - [x] Consider moving the names and color chunks into the left hand column for space
diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte
index 0a88adeb..13e788fc 100644
--- a/src/components/ColorChannelPicker.svelte
+++ b/src/components/ColorChannelPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import configStore from "../stores/config-store";
+
   import { Color, colorPickerConfig } from "../lib/Color";
   import ColorIO from "colorjs.io";
   export let color: Color;
@@ -21,11 +23,11 @@
         { name: "Green", min: 0, max: 255, step: 1 },
         { name: "Blue", min: 0, max: 255, step: 1 },
       ],
-      srgb: [
-        { name: "Red", min: 0, max: 1, step: 0.01 },
-        { name: "Green", min: 0, max: 1, step: 0.01 },
-        { name: "Blue", min: 0, max: 1, step: 0.01 },
-      ],
+      // srgb: [
+      //   { name: "Red", min: 0, max: 1, step: 0.01 },
+      //   { name: "Green", min: 0, max: 1, step: 0.01 },
+      //   { name: "Blue", min: 0, max: 1, step: 0.01 },
+      // ],
       hsl: [
         { name: "Hue", min: 0, max: 360, step: 1 },
         { name: "Saturation", min: 0, max: 100, step: 1 },
@@ -36,11 +38,11 @@
         { name: "a", min: -125, max: 125, step: 1 },
         { name: "b", min: -125, max: 125, step: 1 },
       ],
-      oklab: [
-        { name: "L", min: 0, max: 1, step: 0.01 },
-        { name: "a", min: -0.4, max: 0.4, step: 0.01 },
-        { name: "b", min: -0.4, max: 0.4, step: 0.01 },
-      ],
+      // oklab: [
+      //   { name: "L", min: 0, max: 1, step: 0.01 },
+      //   { name: "a", min: -0.4, max: 0.4, step: 0.01 },
+      //   { name: "b", min: -0.4, max: 0.4, step: 0.01 },
+      // ],
       hsv: [
         { name: "h", min: 0, max: 360, step: 1 },
         { name: "s", min: 0, max: 100, step: 1 },
@@ -51,11 +53,11 @@
         { name: "c", min: 0, max: 150, step: 1 },
         { name: "h", min: 0, max: 360, step: 1 },
       ],
-      jzazbz: [
-        { name: "jz", min: 0, max: 1, step: 0.01 },
-        { name: "az", min: -0.5, max: 0.5, step: 0.01 },
-        { name: "bz", min: -0.5, max: 0.5, step: 0.01 },
-      ],
+      // jzazbz: [
+      //   { name: "jz", min: 0, max: 1, step: 0.01 },
+      //   { name: "az", min: -0.5, max: 0.5, step: 0.01 },
+      //   { name: "bz", min: -0.5, max: 0.5, step: 0.01 },
+      // ],
     } as Record<string, Channel[]>);
   const colorModeMap: any = { rgb: "srgb" };
   function toColorIO() {
@@ -66,6 +68,7 @@
     }
   }
   $: color &&
+    colorMode &&
     toColorIO()
       .to(colorModeMap[colorMode] || colorMode)
       .coords.forEach((val, idx) => {
@@ -123,7 +126,7 @@
     ret.push(steps);
     return ret;
   }
-  $: sliderSteps = color && (buildSliderSteps() as any);
+  $: sliderSteps = color && colorMode && (buildSliderSteps() as any);
 
   function colorUpdate(e: any, idx: number) {
     let values = [...colorConfigs[colorMode].map((x) => x.value)] as number[];
@@ -143,7 +146,13 @@
 </script>
 
 <div class="flex flex-col">
-  <select bind:value={colorMode}>
+  <select
+    value={colorMode}
+    on:change={(e) => {
+      // @ts-ignore
+      configStore.setChannelPickerSpace(e.currentTarget.value);
+    }}
+  >
     {#each [...Object.keys(colorConfigs)] as colorMode}
       <option value={colorMode}>{colorMode}</option>
     {/each}
@@ -161,7 +170,7 @@
                       {channel.name} ({channel.min}-{channel.max})
                     </span>
                     <input
-                      class="h-4 text-right w-16 text-sm"
+                      class="h-6 text-right w-16"
                       type="number"
                       value={formatter(channel.value)}
                       min={channel.min}
@@ -208,7 +217,7 @@
     height: 2.2em;
     border-radius: 0.3em;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-    min-width: 265px;
+    min-width: 285px;
   }
 
   .color-slider::-webkit-slider-thumb {
diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
index 157b2e33..1fd89fec 100644
--- a/src/components/PalPreview.svelte
+++ b/src/components/PalPreview.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
   import focusStore from "../stores/focus-store";
   import type { Palette } from "../types";
-  import Tooltip from "./Tooltip.svelte";
-  import SwatchTooltipContent from "./SwatchTooltipContent.svelte";
-  import { toggleElement } from "../lib/utils";
   export let pal: Palette;
   export let allowModification: boolean = false;
   export let highlightSelected: boolean = false;
 
-  $: focusColors = $focusStore.focusedColors;
+  import { dealWithFocusEvent } from "../lib/utils";
+
   $: focusSet = new Set($focusStore.focusedColors);
 </script>
 
@@ -21,32 +19,17 @@
 >
   {#each pal.colors as color, idx}
     {#if allowModification}
-      <Tooltip allowDrag={true}>
-        <div slot="content" class="flex flex-col" let:onClick>
-          <SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
-        </div>
-        <button
-          slot="target"
-          let:tooltipOpen
-          let:toggle
-          on:click|stopPropagation|preventDefault={(e) => {
-            const isMeta = e.metaKey || e.ctrlKey || e.shiftKey;
-            let newColors = [...focusColors];
-            if (isMeta) {
-              newColors = toggleElement(focusColors, idx);
-            } else {
-              newColors = tooltipOpen ? [] : [idx];
-            }
-
-            focusStore.setColors(newColors);
-            toggle();
-          }}
-          class={"w-6 h-6 mx-2 rounded-full transition-all"}
-          class:w-8={highlightSelected && focusSet.has(idx)}
-          class:h-8={highlightSelected && focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
-        ></button>
-      </Tooltip>
+      <button
+        on:click|stopPropagation|preventDefault={(e) =>
+          focusStore.setColors(
+            dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+          )}
+        class={"w-6 h-6 mx-2 rounded-full transition-all"}
+        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()}"
+      ></button>
     {:else}
       <div
         class={"w-6 h-6 mx-1 rounded-full transition-all"}
diff --git a/src/components/SwatchTooltipContent.svelte b/src/components/SwatchTooltipContent.svelte
deleted file mode 100644
index f215d42d..00000000
--- a/src/components/SwatchTooltipContent.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script lang="ts">
-  import ColorChannelPicker from "./ColorChannelPicker.svelte";
-  import { Color } from "../lib/Color";
-  import colorStore from "../stores/color-store";
-  import focusStore from "../stores/focus-store";
-  import { buttonStyle } from "../lib/styles";
-  export let idx: number;
-  export let color: Color;
-  export let closeTooltip: () => void;
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: colors = currentPal.colors;
-  $: colorSpace = currentPal.colorSpace;
-
-  function updateColor(color: Color) {
-    const updatedColors = [...colors];
-    updatedColors[idx] = color;
-    colorStore.setCurrentPalColors(updatedColors);
-  }
-  $: modes = (
-    colorSpace === "hsv" ? ["hsv", "lab"] : [colorSpace, "hsv"]
-  ) as any;
-</script>
-
-<div class="px-4 pb-4 pt-2">
-  <div class="flex mb-2">
-    <input
-      value={color.toHex()}
-      on:change={(e) => {
-        // @ts-ignore
-        updateColor(Color.colorFromString(e.target.value, colorSpace));
-      }}
-    />
-
-    <button
-      class="{buttonStyle} mr-2"
-      on:click={() => {
-        colorStore.setCurrentPalColors(colors.filter((_, jdx) => jdx !== idx));
-        focusStore.removeColor(idx);
-        closeTooltip();
-      }}
-    >
-      Delete
-    </button>
-    <button
-      class="{buttonStyle} mr-2"
-      on:click={() => {
-        const updatedColors = [...colors];
-        updatedColors.splice(idx, 0, color);
-        colorStore.setCurrentPalColors(updatedColors);
-      }}
-    >
-      Duplicate
-    </button>
-  </div>
-  <div class="flex">
-    {#each modes as colorMode, jdx}
-      <div class="flex flex-col">
-        <ColorChannelPicker
-          color={color.toColorSpace(colorMode)}
-          {colorMode}
-          onColorChange={(color) => {
-            const updatedColors = [...colors];
-            updatedColors[idx] = color;
-            colorStore.setCurrentPalColors(updatedColors);
-          }}
-        />
-      </div>
-    {/each}
-  </div>
-</div>
-
-<style>
-  input {
-    width: 100px;
-  }
-</style>
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
index 2df65e2c..28fb5f2f 100644
--- a/src/content-modules/Controls.svelte
+++ b/src/content-modules/Controls.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
+
+  import { Color } from "../lib/Color";
+
   import AlignSelection from "../controls/AlignSelection.svelte";
   import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
   import InterpolatePoints from "../controls/InterpolatePoints.svelte";
@@ -22,9 +26,21 @@
   <AdjustColor />
   {#if focusedColors.length === 1}
     <div class="w-full border-t-2 border-black my-2"></div>
+    <input
+      class="w-full"
+      value={colors[focusedColors[0]].toHex()}
+      on:change={(e) => {
+        const updatedColors = [...colors];
+        updatedColors[focusedColors[0]] = Color.colorFromString(
+          e.currentTarget.value,
+          colorSpace
+        );
+        colorStore.setCurrentPalColors(updatedColors);
+      }}
+    />
     <ColorChannelPicker
       color={colors[focusedColors[0]].toColorSpace(colorSpace)}
-      colorMode={colorSpace}
+      colorMode={$configStore.channelPickerSpace}
       onColorChange={(color) => {
         const updatedColors = [...colors];
         updatedColors[focusedColors[0]] = color.toColorSpace(colorSpace);
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
index 82cd6c3b..163f5e2d 100644
--- a/src/content-modules/LeftPanel.svelte
+++ b/src/content-modules/LeftPanel.svelte
@@ -15,13 +15,13 @@
   let innerWidth = window.innerWidth;
 
   $: leftPanelTabs =
-    innerWidth < 1500
+    innerWidth < 1600
       ? ["palettes", "controls", "colors"]
       : ["palettes", "controls"];
 </script>
 
 <!-- left panel -->
-<div class="bg-stone-200 w-72 container flex flex-col h-full flex-none">
+<div class="bg-stone-200 w-80 container flex flex-col h-full flex-none">
   <div class="text-4xl font-bold bg-stone-800 text-white px-2 py-1">
     Color Buddy 𑁍
   </div>
diff --git a/src/example/Example.svelte b/src/example/Example.svelte
index c0dee6f9..5bdf145d 100644
--- a/src/example/Example.svelte
+++ b/src/example/Example.svelte
@@ -3,8 +3,6 @@
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
   import { Color } from "../lib/Color";
-  import Tooltip from "../components/Tooltip.svelte";
-  import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
   import focusStore from "../stores/focus-store";
   import { idxToKey } from "../lib/charts";
   import simulate_cvd from "../lib/blindness";
@@ -101,25 +99,6 @@
   <div bind:this={container} class="example-container">
     {@html insertColorsToExample(example, mappedColors, bg.toHex(), size)}
   </div>
-  {#if color && focusedColor !== false}
-    <Tooltip
-      top={"-20px"}
-      allowDrag={true}
-      initiallyOpen={true}
-      onClose={() => {
-        focusStore.clearColors();
-        focusedColor = false;
-      }}
-    >
-      <div slot="content" class="flex flex-col" let:onClick>
-        <SwatchTooltipContent
-          {color}
-          closeTooltip={onClick}
-          idx={focusedColor}
-        />
-      </div>
-    </Tooltip>
-  {/if}
 </div>
 
 <style>
diff --git a/src/example/Swatches.svelte b/src/example/Swatches.svelte
index c10d0695..8b2ef8e9 100644
--- a/src/example/Swatches.svelte
+++ b/src/example/Swatches.svelte
@@ -3,12 +3,10 @@
   import colorStore from "../stores/color-store";
   import focusStore from "../stores/focus-store";
   import configStore from "../stores/config-store";
-  import Tooltip from "../components/Tooltip.svelte";
-  import exampleStore from "../stores/example-store";
-  import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
-  import { buttonStyle } from "../lib/styles";
   import simulate_cvd from "../lib/blindness";
 
+  import { dealWithFocusEvent } from "../lib/utils";
+
   export let paletteIdx: number;
   export let allowInteraction: boolean = true;
   export let hideHeader: boolean = false;
@@ -59,47 +57,6 @@
     },
     []
   );
-
-  function onClickColor(
-    colorIdx: number,
-    toggle: () => void,
-    tooltipOpen: boolean
-  ) {
-    if (!allowInteraction) {
-      return () => {};
-    }
-    return (e: any) => {
-      const isFocused = focusSet.has(colorIdx);
-      const shiftKey = e.shiftKey;
-      if (!tooltipOpen && !isFocused) {
-        if (shiftKey) {
-          focusStore.addColor(colorIdx);
-        } else {
-          focusStore.setColors([colorIdx]);
-        }
-        toggle();
-      } else if (!tooltipOpen && isFocused) {
-        if (shiftKey) {
-          focusStore.toggleColor(colorIdx);
-        } else {
-          focusStore.clearColors();
-        }
-      } else if (tooltipOpen && !isFocused) {
-        if (shiftKey) {
-          focusStore.addColor(colorIdx);
-        } else {
-          focusStore.setColors([colorIdx]);
-        }
-      } else {
-        toggle();
-        if (shiftKey) {
-          focusStore.toggleColor(colorIdx);
-        } else {
-          focusStore.clearColors();
-        }
-      }
-    };
-  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -115,50 +72,20 @@
   }}
 >
   {#if !hideHeader}
-    <div class="bg-stone-300 w-full justify-between flex p-1">
-      Swatches
-      <!-- <Tooltip>
-        <button
-          slot="target"
-          class={buttonStyle}
-          let:toggle
-          on:click|preventDefault|stopPropagation={toggle}
-        >
-          Options
-        </button>
-        <div slot="content">
-          <button
-            class={buttonStyle}
-            on:click|preventDefault|stopPropagation={() =>
-              exampleStore.toggleSection("swatches")}
-          >
-            Hide
-          </button>
-          {#if numToShow > 1}
-            <button
-              class={buttonStyle}
-              on:click|preventDefault|stopPropagation={() => {
-                exampleStore.onlySwatches();
-              }}
-            >
-              Focus
-            </button>
-          {/if}
-        </div>
-      </Tooltip> -->
-    </div>
+    <div class="bg-stone-300 w-full justify-between flex p-1">Swatches</div>
   {/if}
   <div style={`background-color: ${bgColor}; max-width: 600px`} class="flex">
     <div class="flex flex-col">
       {#each colors as color, i}
         <button
           style={`background-color: ${color.toHex()};`}
-          class="w-24 h-5"
-          on:click|preventDefault|stopPropagation={onClickColor(
-            i,
-            () => {},
-            false
-          )}
+          class="w-24 h-5 transition-all"
+          class:ml-5={focusSet.has(i)}
+          class:mr-5={!focusSet.has(i)}
+          on:click|preventDefault|stopPropagation={(e) =>
+            focusStore.setColors(
+              dealWithFocusEvent(e, i, $focusStore.focusedColors)
+            )}
         ></button>
       {/each}
     </div>
@@ -169,29 +96,21 @@
             {#each colorsInGroupsOf3 as colorGroup}
               <div class="flex">
                 {#each colorGroup as colorIdx}
-                  <Tooltip top={"100px"} allowDrag={true}>
-                    <div slot="content" class="flex flex-col" let:onClick>
-                      <SwatchTooltipContent
-                        color={colors[colorIdx]}
-                        closeTooltip={onClick}
-                        idx={colorIdx}
-                      />
-                    </div>
-                    <button
-                      let:toggle
-                      let:tooltipOpen
-                      slot="target"
-                      class={`${className} ${
-                        focusSet.has(colorIdx) ? selectionClass : ""
-                      }`}
-                      style={`${styleMap(colors[colorIdx])}`}
-                      on:click|preventDefault|stopPropagation={onClickColor(
-                        colorIdx,
-                        toggle,
-                        tooltipOpen
-                      )}
-                    ></button>
-                  </Tooltip>
+                  <button
+                    class={`${className} ${
+                      focusSet.has(colorIdx) ? selectionClass : ""
+                    }`}
+                    style={`${styleMap(colors[colorIdx])}`}
+                    on:click|preventDefault|stopPropagation={(e) => {
+                      focusStore.setColors(
+                        dealWithFocusEvent(
+                          e,
+                          colorIdx,
+                          $focusStore.focusedColors
+                        )
+                      );
+                    }}
+                  ></button>
                 {/each}
               </div>
             {/each}
@@ -205,11 +124,11 @@
               focusSet.has(i) ? 10 : 0
             }deg)`}
             class="mr-2 w-16"
-            on:click|preventDefault|stopPropagation={onClickColor(
-              i,
-              () => {},
-              false
-            )}
+            on:click|preventDefault|stopPropagation={(e) => {
+              focusStore.setColors(
+                dealWithFocusEvent(e, i, $focusStore.focusedColors)
+              );
+            }}
           >
             {color.toHex()}
           </button>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 81e75615..e6099d83 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -626,3 +626,20 @@ export function summarizePal(pal: Palette) {
     : "";
   return `This is a ${pal.type} palette called '${pal.name}'.${affectMsg}${contextMsg}`;
 }
+
+export function dealWithFocusEvent(
+  e: any,
+  clickedItem: number,
+  focusedItems: number[]
+) {
+  const newFocusedItems = toggleElement(focusedItems, clickedItem);
+  const isShift = e.shiftKey;
+  const isCtrl = e.ctrlKey;
+  if (isShift) {
+    return newFocusedItems;
+  }
+  if (isCtrl) {
+    return newFocusedItems;
+  }
+  return [clickedItem];
+}
diff --git a/src/linting/Eval.svelte b/src/linting/Eval.svelte
index 8734fce9..fa4eaf80 100644
--- a/src/linting/Eval.svelte
+++ b/src/linting/Eval.svelte
@@ -44,7 +44,7 @@
   $: isCompact = $configStore.evalDisplayMode === "compact";
 
   let innerWidth = window.innerWidth;
-  $: showEvalColumn = innerWidth >= 1500;
+  $: showEvalColumn = innerWidth >= 1600;
   $: {
     if (showEvalColumn && $configStore.leftRoute === "colors") {
       configStore.setLeftPanelRoute("controls");
diff --git a/src/linting/EvalColorColumn.svelte b/src/linting/EvalColorColumn.svelte
index 080ac3e9..040468e9 100644
--- a/src/linting/EvalColorColumn.svelte
+++ b/src/linting/EvalColorColumn.svelte
@@ -4,14 +4,11 @@
   import configStore from "../stores/config-store";
   import lintStore from "../stores/lint-store";
 
-  import Tooltip from "../components/Tooltip.svelte";
-  import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
   import { colorNameSimple } from "../lib/lints/name-discrim";
-  import ExplanationViewer from "./ExplanationViewer.svelte";
   import EvalResponse from "./EvalResponse.svelte";
   import simulate_cvd from "../lib/blindness";
   import { Color } from "../lib/Color";
-  import { checkLevelToSymbol } from "../lib/utils";
+  import { checkLevelToSymbol, dealWithFocusEvent } from "../lib/utils";
   import { buttonStyle } from "../lib/styles";
 
   $: checks = $lintStore.currentChecks;
@@ -44,83 +41,67 @@
       : computeDeltas(colors, $configStore.evalDeltaDisplay);
 </script>
 
-<div class="flex flex-col overflow-auto mr-5 px-4 h-full">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="flex flex-col overflow-auto mr-5 px-4 h-full w-64"
+  on:click={() => {
+    focusStore.setColors([]);
+  }}
+>
   {#if $configStore.colorSim !== "none"}
     <button
       class={`${buttonStyle} ml-0 pl-0 mt-4`}
-      on:click={() => configStore.setColorSim("none")}
+      on:click|stopPropagation={() => configStore.setColorSim("none")}
     >
       Disable Color Blindness Simulation
     </button>
   {/if}
   {#each colors as color, idx}
-    <Tooltip
-      allowDrag={true}
-      onClose={() => focusStore.clearColors()}
-      top="50px"
+    <button
+      on:click|stopPropagation={(e) => {
+        focusStore.setColors(
+          dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+        );
+      }}
+      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:ml-5={$focusStore.focusedColors.includes(idx)}
+      class:mr-5={!$focusStore.focusedColors.includes(idx)}
+      style="min-height: 40px"
     >
-      <div slot="content" class="flex flex-col" let:onClick>
-        <SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
-      </div>
-
-      <button
-        slot="target"
-        let:toggle
-        on:click={() => {
-          toggle();
-          focusStore.setColors([idx]);
-        }}
-        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:ml-5={$focusStore.focusedColors.includes(idx)}
-        class:mr-5={!$focusStore.focusedColors.includes(idx)}
-        style="min-height: 40px"
-      >
-        <div class="w-full flex flex-col h-full absolute">
+      <div class="w-full flex flex-col h-full absolute">
+        <div
+          class="grow h-full"
+          style="background-color: {color.toHex()}"
+        ></div>
+        {#if selectedBlindType !== "none"}
           <div
             class="grow h-full"
-            style="background-color: {color.toHex()}"
+            style={`background-color: ${sim(color)}`}
           ></div>
-          {#if selectedBlindType !== "none"}
-            <div
-              class="grow h-full"
-              style={`background-color: ${sim(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>
-            {#if colorNames[idx]}<span class="text-right text-xs">
-                {colorNames[idx]?.word}
-              </span>{/if}
-          </span>
-          <span class="flex flex-wrap flex-row-reverse">
-            {#each colorsToIssues[idx] as check}
-              {#if !evalConfig[check.name]?.ignore}
-                <EvalResponse
-                  {check}
-                  positionAlongRightEdge={false}
-                  customWord={checkLevelToSymbol[check.level]}
-                />
-                <!-- <Tooltip>
-                  <div slot="content" class="flex flex-col max-w-lg">
-                    <div class="font-bold">{check.name}</div>
-                  </div>
-                  <button
-                    slot="target"
-                    let:toggle
-                    on:click|stopPropagation={toggle}
-                  >
-                    {checkLevelToSymbol[check.level]}
-                  </button>
-                </Tooltip> -->
-              {/if}
-            {/each}
-          </span>
-        </div>
-      </button>
-    </Tooltip>
+        {/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>
+          {#if colorNames[idx]}<span class="text-right text-xs">
+              {colorNames[idx]?.word}
+            </span>{/if}
+        </span>
+        <span class="flex flex-wrap flex-row-reverse">
+          {#each colorsToIssues[idx] as check}
+            {#if !evalConfig[check.name]?.ignore}
+              <EvalResponse
+                {check}
+                positionAlongRightEdge={false}
+                customWord={checkLevelToSymbol[check.level]}
+              />
+            {/if}
+          {/each}
+        </span>
+      </div>
+    </button>
 
     {#if stats[idx]}
       <div class=" text-black text-right text-xs">
diff --git a/src/stores/config-store.ts b/src/stores/config-store.ts
index aee96f5f..56f86bd9 100644
--- a/src/stores/config-store.ts
+++ b/src/stores/config-store.ts
@@ -4,6 +4,7 @@ interface StoreData {
   colorSim: "deuteranopia" | "protanopia" | "tritanopia" | "none" | "grayscale";
   comparePal: number | undefined;
   compareSelectedExample: number;
+  channelPickerSpace: "lab" | "lch" | "hsl" | "hsv" | "rgb";
   engine: "openai" | "google";
   evalDisplayMode: "regular" | "compact";
   evalDeltaDisplay: "none" | "76" | "CMC" | "2000" | "ITP" | "Jz" | "OK";
@@ -41,6 +42,7 @@ const InitialStore: StoreData = {
   mainColumnRoute: "palette-config",
   mainColumnSelectedExample: -1,
   useSimulatorOnExamples: false,
+  channelPickerSpace: "lab",
   xZoom: [0, 1],
   yZoom: [0, 1],
   zZoom: [0, 1],
@@ -115,6 +117,8 @@ function createStore() {
       persist((old) => ({ ...old, compareSelectedExample: n })),
     setExampleRoute: (n: StoreData["exampleRoute"]) =>
       persist((old) => ({ ...old, exampleRoute: n })),
+    setChannelPickerSpace: (n: StoreData["channelPickerSpace"]) =>
+      persist((old) => ({ ...old, channelPickerSpace: n })),
   };
 }