From f90ce41438a037d2dec855d9dfb32a2ac0a825c0 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 10 Dec 2024 20:50:21 +0000
Subject: [PATCH 01/20] Show gamut in sliders

---
 src/lib/components/colors/Sliders.svelte | 13 ++++++++++-
 src/lib/utils.ts                         | 28 +++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 25a6810..7e97070 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -95,6 +95,7 @@
       style={`--stops: ${alphaGradient}`}
       value={$color.alpha}
       oninput={(e) => handleInput(e)}
+      data-channel="alpha"
     />
   </div>
 </div>
@@ -104,7 +105,17 @@
     margin: 0;
     display: block;
     appearance: none;
-    background: linear-gradient(to right, var(--stops));
+    background: linear-gradient(to right, var(--stops)),
+      repeating-linear-gradient(
+        -45deg,
+        white 0%,
+        white 1%,
+        #ffd0d0 1%,
+        #ffd0d0 2%
+      );
+    &[data-channel='alpha'] {
+      background: linear-gradient(to right, var(--stops));
+    }
   }
 
   [data-group~='sliders'] {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 148a04a..f2e32a5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import {
   clone,
   display,
+  inGamut,
   type PlainColorObject,
   serialize,
   set,
@@ -32,9 +33,34 @@ export const sliderGradient = (
     steps: 10,
     space: color.space,
     hue: 'raw',
+    maxDeltaE: 10,
   });
+  let wasInGamut = false;
+  const inGamutSteps: string[] = [];
+  const stepWidth = 100 / (gradientSteps.length - 1);
 
-  return gradientSteps.map((c) => display(c)).join(', ');
+  if (channel === 'alpha') {
+    return gradientSteps.map((c) => display(c)).join(', ');
+  }
+
+  gradientSteps.forEach((step, index) => {
+    if (inGamut(step, 'p3')) {
+      if (!wasInGamut) {
+        inGamutSteps.push(`transparent ${stepWidth * (index + 1)}%`);
+      }
+      wasInGamut = true;
+      inGamutSteps.push(`${display(step)} ${stepWidth * index}%`);
+    } else {
+      if (wasInGamut) {
+        inGamutSteps.push(`transparent ${stepWidth * (index - 1)}%`);
+      }
+      inGamutSteps.push(`transparent ${stepWidth * index}%`);
+
+      wasInGamut = false;
+    }
+  });
+
+  return inGamutSteps.join(', ');
 };
 
 function decodeColor(colorHash: string, format: ColorFormatId) {

From 525812e3f1ef804795ca1058ab6bdea17076b1c2 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 17:23:00 +0000
Subject: [PATCH 02/20] Fix initial edge bug

---
 src/lib/utils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f2e32a5..f432f6e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -35,7 +35,7 @@ export const sliderGradient = (
     hue: 'raw',
     maxDeltaE: 10,
   });
-  let wasInGamut = false;
+  let wasInGamut: boolean;
   const inGamutSteps: string[] = [];
   const stepWidth = 100 / (gradientSteps.length - 1);
 
@@ -45,13 +45,13 @@ export const sliderGradient = (
 
   gradientSteps.forEach((step, index) => {
     if (inGamut(step, 'p3')) {
-      if (!wasInGamut) {
+      if (wasInGamut === false) {
         inGamutSteps.push(`transparent ${stepWidth * (index + 1)}%`);
       }
       wasInGamut = true;
       inGamutSteps.push(`${display(step)} ${stepWidth * index}%`);
     } else {
-      if (wasInGamut) {
+      if (wasInGamut === true) {
         inGamutSteps.push(`transparent ${stepWidth * (index - 1)}%`);
       }
       inGamutSteps.push(`transparent ${stepWidth * index}%`);

From 5c83b3252274c7be6e4ba8a3d41f82846caf4e2b Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 18:57:50 +0000
Subject: [PATCH 03/20] Add gamut selector

---
 src/lib/components/GamutSelect.svelte    | 45 ++++++++++++++++++++++++
 src/lib/components/Header.svelte         |  2 ++
 src/lib/components/SpaceSelect.svelte    |  2 +-
 src/lib/components/colors/Sliders.svelte | 16 +++++++--
 src/lib/constants.ts                     |  8 +++++
 src/lib/stores.ts                        |  4 ++-
 src/lib/utils.ts                         | 20 +++++++----
 src/sass/initial/_layout.scss            |  2 +-
 8 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/components/GamutSelect.svelte

diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
new file mode 100644
index 0000000..86e31e1
--- /dev/null
+++ b/src/lib/components/GamutSelect.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { GAMUTS } from '$lib/constants';
+  import { gamut } from '$lib/stores';
+</script>
+
+<div data-field="color-format">
+  <label for="color-format" data-label>Gamut</label>
+  <select name="color-format" id="color-format" bind:value={$gamut}>
+    {#each GAMUTS as gamut (gamut.format)}
+      {#if gamut}
+        <option value={gamut.format}>{gamut.name}</option>
+      {/if}
+    {/each}
+  </select>
+</div>
+
+<style lang="scss">
+  @use 'config';
+
+  [data-field='color-format'] {
+    align-items: center;
+    column-gap: var(--gutter);
+    display: grid;
+    grid-template:
+      'format-label' auto
+      'format-input' auto / 1fr;
+    justify-content: end;
+
+    @include config.above('sm-page-break') {
+      grid-template: 'format-label format-input' auto / 1fr minmax(10rem, auto);
+    }
+  }
+
+  label {
+    grid-area: format-label;
+
+    @include config.above('sm-page-break') {
+      text-align: right;
+    }
+  }
+
+  select {
+    grid-area: format-input;
+  }
+</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 360fff7..0bb934f 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import GamutSelect from '$lib/components/GamutSelect.svelte';
   import SpaceSelect from '$lib/components/SpaceSelect.svelte';
   import Icon from '$lib/components/util/Icon.svelte';
 </script>
@@ -9,6 +10,7 @@
     <span class="sr-only">OddContrast</span>
   </h1>
   <SpaceSelect />
+  <GamutSelect />
 </header>
 
 <style lang="scss">
diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte
index 41fd50f..c922c5e 100644
--- a/src/lib/components/SpaceSelect.svelte
+++ b/src/lib/components/SpaceSelect.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div data-field="color-format">
-  <label for="color-format" data-label>Color Format</label>
+  <label for="color-format" data-label>Format</label>
   <select name="color-format" id="color-format" bind:value={$format}>
     {#each spaces as space (space.id)}
       {#if space}
diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 7e97070..9009b0d 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -3,7 +3,7 @@
   import type { Writable } from 'svelte/store';
 
   import { type ColorFormatId, SLIDERS } from '$lib/constants';
-  import { ColorSpace } from '$lib/stores';
+  import { ColorSpace, gamut } from '$lib/stores';
   import { getSpaceFromFormatId, sliderGradient } from '$lib/utils';
 
   interface Props {
@@ -20,7 +20,12 @@
     SLIDERS[format].map((id) => {
       const coord = spaceObject.coords[id];
       const range = coord?.range ?? coord?.refRange ?? [0, 1];
-      const gradient = sliderGradient($color, id, range);
+      const gradient = sliderGradient({
+        color: $color,
+        channel: id,
+        range: range,
+        gamut: $gamut,
+      });
       return {
         id,
         name: coord?.name ?? '',
@@ -37,7 +42,12 @@
   );
 
   let alphaGradient = $derived(
-    sliderGradient($color, 'alpha', [0, $color.alpha]),
+    sliderGradient({
+      color: $color,
+      channel: 'alpha',
+      range: [0, $color.alpha],
+      gamut: $gamut,
+    }),
   );
 
   const handleInput = (
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0edbcf8..36d94e1 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -24,6 +24,14 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
+export type ColorGamutId = 'srgb' | 'p3' | 'rec2020';
+
+export const GAMUTS: { name: string; format: ColorGamutId }[] = [
+  { name: 'sRGB', format: 'srgb' },
+  { name: 'P3', format: 'p3' },
+  { name: 'Rec2020', format: 'rec2020' },
+];
+
 export interface FormatGroup {
   name: string;
   formats: ColorFormatId[];
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index cc5773c..ee866f0 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -14,7 +14,7 @@ import { writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved
 import { browser, dev } from '$app/environment';
-import type { ColorFormatId } from '$lib/constants';
+import type { ColorFormatId, ColorGamutId } from '$lib/constants';
 
 // Register supported color spaces
 ColorSpace.register(HSL);
@@ -32,6 +32,7 @@ export { ColorSpace };
 
 export const INITIAL_VALUES = {
   format: 'p3' as ColorFormatId,
+  gamut: 'p3' as ColorGamutId,
   bg_coord: [0.0967, 0.167, 0.4494] as [number, number, number],
   fg_coord: [0.951, 0.675, 0.7569] as [number, number, number],
   alpha: 1,
@@ -49,6 +50,7 @@ const INITIAL_FG = {
 };
 
 export const format = writable<ColorFormatId>(INITIAL_VALUES.format);
+export const gamut = writable<ColorGamutId>(INITIAL_VALUES.gamut);
 export const bg = writable<PlainColorObject>(INITIAL_BG);
 export const fg = writable<PlainColorObject>(INITIAL_FG);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f432f6e..e5a006e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -9,16 +9,22 @@ import {
   to,
 } from 'colorjs.io/fn';
 
-import { type ColorFormatId, FORMATS } from '$lib/constants';
+import { type ColorFormatId, type ColorGamutId, FORMATS } from '$lib/constants';
 
 export const getSpaceFromFormatId = (formatId: ColorFormatId) =>
   formatId === 'hex' ? 'srgb' : formatId;
 
-export const sliderGradient = (
-  color: PlainColorObject,
-  channel: string,
-  range: [number, number],
-) => {
+export const sliderGradient = ({
+  color,
+  channel,
+  range,
+  gamut,
+}: {
+  color: PlainColorObject;
+  channel: string;
+  range: [number, number];
+  gamut: ColorGamutId;
+}) => {
   const start = clone(color);
   const end = clone(color);
   if (channel === 'alpha') {
@@ -44,7 +50,7 @@ export const sliderGradient = (
   }
 
   gradientSteps.forEach((step, index) => {
-    if (inGamut(step, 'p3')) {
+    if (inGamut(step, gamut)) {
       if (wasInGamut === false) {
         inGamutSteps.push(`transparent ${stepWidth * (index + 1)}%`);
       }
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index c851724..3e1020c 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -40,7 +40,7 @@ body {
   display: grid;
   gap: var(--shim) var(--double-gutter);
   grid-area: header;
-  grid-template: 'logo colorspace' auto / auto 1fr;
+  grid-template: 'logo colorspace gamut' auto / auto 1fr;
 
   @include config.above('sm-page-break') {
     gap: var(--double-gutter);

From 51888838e55463a47d99732f98909d4a1bd64114 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 19:06:45 +0000
Subject: [PATCH 04/20] Keep sliders opaque, add checkbox to alpha slider

---
 src/lib/components/colors/Sliders.svelte | 3 ++-
 src/lib/utils.ts                         | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 9009b0d..d6d9754 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -124,7 +124,8 @@
         #ffd0d0 2%
       );
     &[data-channel='alpha'] {
-      background: linear-gradient(to right, var(--stops));
+      background: linear-gradient(to right, var(--stops)),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
     }
   }
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e5a006e..e1f77d5 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -28,11 +28,13 @@ export const sliderGradient = ({
   const start = clone(color);
   const end = clone(color);
   if (channel === 'alpha') {
-    start.alpha = range[0];
-    end.alpha = range[1];
+    start.alpha = 0;
+    end.alpha = 1;
   } else {
     set(start, channel, range[0]);
+    start.alpha = 1;
     set(end, channel, range[1]);
+    end.alpha = 1;
   }
 
   const gradientSteps = steps(start, end, {

From 74eac4b537af8126e64ce8cb5c5441186a92b5c9 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 19:30:13 +0000
Subject: [PATCH 05/20] Remove pattern background

---
 src/lib/components/colors/Sliders.svelte | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index d6d9754..47e9e1e 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -115,14 +115,7 @@
     margin: 0;
     display: block;
     appearance: none;
-    background: linear-gradient(to right, var(--stops)),
-      repeating-linear-gradient(
-        -45deg,
-        white 0%,
-        white 1%,
-        #ffd0d0 1%,
-        #ffd0d0 2%
-      );
+    background: linear-gradient(to right, var(--stops));
     &[data-channel='alpha'] {
       background: linear-gradient(to right, var(--stops)),
         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');

From 06bd0f4d722ffc42ab6d614961c56960ad3678aa Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 20:22:09 +0000
Subject: [PATCH 06/20] Add no gamut map, tests

---
 src/lib/constants.ts                    |  3 ++-
 src/lib/utils.ts                        |  2 +-
 test/lib/components/GamutSelect.spec.ts | 22 ++++++++++++++++++++++
 test/lib/components/SpaceSelect.spec.ts |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 test/lib/components/GamutSelect.spec.ts

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 36d94e1..638b8d7 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -26,7 +26,8 @@ export const FORMATS: ColorFormatId[] = [
 
 export type ColorGamutId = 'srgb' | 'p3' | 'rec2020';
 
-export const GAMUTS: { name: string; format: ColorGamutId }[] = [
+export const GAMUTS: { name: string; format: ColorGamutId | null }[] = [
+  { name: 'None', format: null },
   { name: 'sRGB', format: 'srgb' },
   { name: 'P3', format: 'p3' },
   { name: 'Rec2020', format: 'rec2020' },
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e1f77d5..43fb2c7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -47,7 +47,7 @@ export const sliderGradient = ({
   const inGamutSteps: string[] = [];
   const stepWidth = 100 / (gradientSteps.length - 1);
 
-  if (channel === 'alpha') {
+  if (channel === 'alpha' || gamut === null) {
     return gradientSteps.map((c) => display(c)).join(', ');
   }
 
diff --git a/test/lib/components/GamutSelect.spec.ts b/test/lib/components/GamutSelect.spec.ts
new file mode 100644
index 0000000..eadaeb6
--- /dev/null
+++ b/test/lib/components/GamutSelect.spec.ts
@@ -0,0 +1,22 @@
+import { fireEvent, render } from '@testing-library/svelte';
+import { get } from 'svelte/store';
+
+import Gamut from '$lib/components/GamutSelect.svelte';
+import { gamut, INITIAL_VALUES, reset } from '$lib/stores';
+
+describe('Space', () => {
+  afterEach(() => {
+    reset();
+  });
+
+  it('renders editable gamut select', async () => {
+    const { getByLabelText } = render(Gamut);
+
+    expect(get(gamut)).toBe(INITIAL_VALUES.gamut);
+
+    const select = getByLabelText('Gamut');
+    await fireEvent.change(select, { target: { value: 'rec2020' } });
+
+    expect(get(gamut)).toBe('rec2020');
+  });
+});
diff --git a/test/lib/components/SpaceSelect.spec.ts b/test/lib/components/SpaceSelect.spec.ts
index 8979bc3..4697278 100644
--- a/test/lib/components/SpaceSelect.spec.ts
+++ b/test/lib/components/SpaceSelect.spec.ts
@@ -15,7 +15,7 @@ describe('Space', () => {
     expect(get(bg).space.id).toBe(INITIAL_VALUES.format);
     expect(get(fg).space.id).toBe(INITIAL_VALUES.format);
 
-    const select = getByLabelText('Color Format');
+    const select = getByLabelText('Format');
     await fireEvent.change(select, { target: { value: 'hsl' } });
 
     expect(get(bg).space.id).toBe('hsl');

From fdecc3bc9ac300f30d5a140cccc2120ea415439f Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 11 Dec 2024 20:27:37 +0000
Subject: [PATCH 07/20] Unique id for GamutSelect

---
 src/lib/components/GamutSelect.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
index 86e31e1..c7e48b3 100644
--- a/src/lib/components/GamutSelect.svelte
+++ b/src/lib/components/GamutSelect.svelte
@@ -3,9 +3,9 @@
   import { gamut } from '$lib/stores';
 </script>
 
-<div data-field="color-format">
-  <label for="color-format" data-label>Gamut</label>
-  <select name="color-format" id="color-format" bind:value={$gamut}>
+<div data-field="color-gamut">
+  <label for="color-gamut" data-label>Gamut</label>
+  <select name="color-gamut" id="color-gamut" bind:value={$gamut}>
     {#each GAMUTS as gamut (gamut.format)}
       {#if gamut}
         <option value={gamut.format}>{gamut.name}</option>
@@ -17,7 +17,7 @@
 <style lang="scss">
   @use 'config';
 
-  [data-field='color-format'] {
+  [data-field='color-gamut'] {
     align-items: center;
     column-gap: var(--gutter);
     display: grid;

From eb5aebd5025ed7c5a10efa0d042f2416a16211d3 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 28 Jan 2025 16:38:44 -0500
Subject: [PATCH 08/20] Throttle slider gradient, add comments

---
 src/lib/components/colors/Sliders.svelte |  9 +++++++--
 src/lib/utils.ts                         | 19 ++++++++++++-------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 47e9e1e..3f3690a 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { PlainColorObject } from 'colorjs.io/fn';
+  import _ from 'lodash';
   import type { Writable } from 'svelte/store';
 
   import { type ColorFormatId, SLIDERS } from '$lib/constants';
@@ -16,11 +17,15 @@
 
   let targetSpace = $derived(getSpaceFromFormatId(format));
   let spaceObject = $derived(ColorSpace.get(targetSpace));
+
+  // Create a throttled value for each channel
+  const throttled = SLIDERS[format].map(() => _.throttle(sliderGradient, 100));
+
   let sliders = $derived(
-    SLIDERS[format].map((id) => {
+    SLIDERS[format].map((id, index) => {
       const coord = spaceObject.coords[id];
       const range = coord?.range ?? coord?.refRange ?? [0, 1];
-      const gradient = sliderGradient({
+      const gradient = throttled[index]!({
         color: $color,
         channel: id,
         range: range,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 43fb2c7..f7d7993 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -41,9 +41,11 @@ export const sliderGradient = ({
     steps: 10,
     space: color.space,
     hue: 'raw',
+    // Smaller values will take longer, larger will be be less precise and
+    // produce fuzzy edges. This magic number seems to balance that.
     maxDeltaE: 10,
   });
-  let wasInGamut: boolean;
+  let wasInGamut = true;
   const inGamutSteps: string[] = [];
   const stepWidth = 100 / (gradientSteps.length - 1);
 
@@ -51,18 +53,21 @@ export const sliderGradient = ({
     return gradientSteps.map((c) => display(c)).join(', ');
   }
 
+  // Create a linear gradient string, mapping gradientSteps to 0%-100% by
+  // multiplying its index with `stepWidth`.
   gradientSteps.forEach((step, index) => {
     if (inGamut(step, gamut)) {
       if (wasInGamut === false) {
-        inGamutSteps.push(`transparent ${stepWidth * (index + 1)}%`);
+        // Coming back into gamut. Add a transparent gradient step for a crisp
+        // edge.
+        inGamutSteps.push(`transparent ${stepWidth * index}%`);
       }
       wasInGamut = true;
       inGamutSteps.push(`${display(step)} ${stepWidth * index}%`);
-    } else {
-      if (wasInGamut === true) {
-        inGamutSteps.push(`transparent ${stepWidth * (index - 1)}%`);
-      }
-      inGamutSteps.push(`transparent ${stepWidth * index}%`);
+    } else if (wasInGamut === true) {
+      // Leaving gamut. Add a transparent gradient step at the same percent as
+      // the previous in gamut step for a crisp edge.
+      inGamutSteps.push(`transparent ${stepWidth * (index - 1)}%`);
 
       wasInGamut = false;
     }

From 488d6564f8d59b379026dde2944e6389bd823124 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 28 Jan 2025 16:51:34 -0500
Subject: [PATCH 09/20] Persist gamut in url

---
 src/lib/constants.ts    |  5 +++--
 src/lib/stores.ts       |  4 ++--
 src/lib/utils.ts        | 21 +++++++++++++++++----
 src/routes/+page.svelte |  6 ++++--
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 638b8d7..422eca5 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -24,14 +24,15 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
-export type ColorGamutId = 'srgb' | 'p3' | 'rec2020';
+export type ColorGamutId = 'srgb' | 'p3' | 'rec2020' | null;
 
-export const GAMUTS: { name: string; format: ColorGamutId | null }[] = [
+export const GAMUTS: { name: string; format: ColorGamutId }[] = [
   { name: 'None', format: null },
   { name: 'sRGB', format: 'srgb' },
   { name: 'P3', format: 'p3' },
   { name: 'Rec2020', format: 'rec2020' },
 ];
+export const GAMUT_IDS = GAMUTS.map((gamut) => gamut.format);
 
 export interface FormatGroup {
   name: string;
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index ee866f0..ba07a02 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -32,7 +32,7 @@ export { ColorSpace };
 
 export const INITIAL_VALUES = {
   format: 'p3' as ColorFormatId,
-  gamut: 'p3' as ColorGamutId,
+  gamut: null as ColorGamutId | null,
   bg_coord: [0.0967, 0.167, 0.4494] as [number, number, number],
   fg_coord: [0.951, 0.675, 0.7569] as [number, number, number],
   alpha: 1,
@@ -50,7 +50,7 @@ const INITIAL_FG = {
 };
 
 export const format = writable<ColorFormatId>(INITIAL_VALUES.format);
-export const gamut = writable<ColorGamutId>(INITIAL_VALUES.gamut);
+export const gamut = writable<ColorGamutId | null>(INITIAL_VALUES.gamut);
 export const bg = writable<PlainColorObject>(INITIAL_BG);
 export const fg = writable<PlainColorObject>(INITIAL_FG);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f7d7993..347d794 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -9,7 +9,12 @@ import {
   to,
 } from 'colorjs.io/fn';
 
-import { type ColorFormatId, type ColorGamutId, FORMATS } from '$lib/constants';
+import {
+  type ColorFormatId,
+  type ColorGamutId,
+  FORMATS,
+  GAMUT_IDS,
+} from '$lib/constants';
 
 export const getSpaceFromFormatId = (formatId: ColorFormatId) =>
   formatId === 'hex' ? 'srgb' : formatId;
@@ -102,11 +107,13 @@ export const hashToStoreValues = (
   bg: PlainColorObject;
   fg: PlainColorObject;
   format: ColorFormatId;
+  gamut: ColorGamutId | undefined;
 } | void => {
   if (hash === '') return;
   hash = decodeURIComponent(hash);
 
-  const [formatValue, bgValue, fgValue] = hash.split('__') as [
+  const [formatValue, bgValue, fgValue, gamutValue] = hash.split('__') as [
+    string,
     string,
     string,
     string,
@@ -116,20 +123,26 @@ export const hashToStoreValues = (
   if (!FORMATS.includes(formatValue as ColorFormatId)) return;
   const format = formatValue as ColorFormatId;
 
+  const gamut = GAMUT_IDS.includes(gamutValue as ColorGamutId)
+    ? (gamutValue as ColorGamutId)
+    : null;
+
   const bg = decodeColor(bgValue, format);
   if (!bg) return;
   const fg = decodeColor(fgValue, format);
   if (!fg) return;
 
-  return { bg, fg, format };
+  return { bg, fg, format, gamut };
 };
 
 export const storeValuesToHash = (
   bg: PlainColorObject,
   fg: PlainColorObject,
   format: ColorFormatId,
+  gamut: ColorGamutId,
 ) => {
   const bgParam = encodeColor(bg, format);
   const fgParam = encodeColor(fg, format);
-  return encodeURIComponent(`${format}__${bgParam}__${fgParam}`);
+  const gamutParam = gamut ? `__${gamut}` : '';
+  return encodeURIComponent(`${format}__${bgParam}__${fgParam}${gamutParam}`);
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f3a1494..c854624 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,7 +9,7 @@
   import Footer from '$lib/components/Footer.svelte';
   import Header from '$lib/components/Header.svelte';
   import Ratio from '$lib/components/ratio/index.svelte';
-  import { bg, fg, format } from '$lib/stores';
+  import { bg, fg, format, gamut } from '$lib/stores';
   import { hashToStoreValues, storeValuesToHash } from '$src/lib/utils';
 
   let bg_fallback = $derived(display($bg));
@@ -20,10 +20,11 @@
     bg.subscribe(debouncedColorsToHash);
     fg.subscribe(debouncedColorsToHash);
     format.subscribe(debouncedColorsToHash);
+    gamut.subscribe(debouncedColorsToHash);
   });
 
   function colorsToHash() {
-    const hashString = storeValuesToHash($bg, $fg, $format);
+    const hashString = storeValuesToHash($bg, $fg, $format, $gamut);
     replaceState(`#${hashString}`, {});
   }
 
@@ -38,6 +39,7 @@
     bg.set(result.bg);
     fg.set(result.fg);
     format.set(result.format);
+    gamut.set(result.gamut ?? null);
   }
 </script>
 

From 4b1f277cf925cda4191d75f894dc5ba6fa803790 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 29 Jan 2025 11:29:20 -0500
Subject: [PATCH 10/20] Cover gamut in tests

---
 test/lib/utils.spec.ts | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/test/lib/utils.spec.ts b/test/lib/utils.spec.ts
index 98dcbae..108e924 100644
--- a/test/lib/utils.spec.ts
+++ b/test/lib/utils.spec.ts
@@ -3,7 +3,7 @@ import '$lib/stores';
 
 import { type PlainColorObject, serialize, to } from 'colorjs.io/fn';
 
-import type { ColorFormatId } from '$lib/constants';
+import type { ColorFormatId, ColorGamutId } from '$lib/constants';
 import {
   getSpaceFromFormatId,
   hashToStoreValues,
@@ -17,27 +17,31 @@ const cases = [
     'color(display-p3 1 1 1)',
     'color(display-p3 0.1 0.1 0.1)',
     'p3',
+    '',
   ],
   [
     'valid hex',
-    'hex__*132b77__*4a0022',
+    'hex__*132b77__*4a0022__srgb',
     'rgb(7.451% 16.863% 46.667%)',
     'rgb(29.02% 0% 13.333%)',
     'hex',
+    'srgb',
   ],
   [
     'oklab with percents',
-    'oklab__oklab(73.4~_0.177_0.107)__oklab(73.3~_0.102_0.0016)',
+    'oklab__oklab(73.4~_0.177_0.107)__oklab(73.3~_0.102_0.0016)__p3',
     'oklab(73.4% 0.177 0.107)',
     'oklab(73.3% 0.102 0.0016)',
     'oklab',
+    'p3',
   ],
   [
     'oklab with negative values',
-    'oklab__oklab(73.4~_-0.215_-0.215)__oklab(73.3~_-0.298_-0.317)',
+    'oklab__oklab(73.4~_-0.215_-0.215)__oklab(73.3~_-0.298_-0.317)__rec2020',
     'oklab(73.4% -0.215 -0.215)',
     'oklab(73.3% -0.298 -0.317)',
     'oklab',
+    'rec2020',
   ],
 ];
 describe('Utils', () => {
@@ -61,26 +65,33 @@ describe('Utils', () => {
     });
     test.each(cases)(
       '%s: %s returns values',
-      (_, input, bgExpected, fgExpected, formatExpected) => {
-        const { bg, fg, format } = hashToStoreValues(input) as {
+      (_, input, bgExpected, fgExpected, formatExpected, gamutExpected) => {
+        const { bg, fg, format, gamut } = hashToStoreValues(input) as {
           bg: PlainColorObject;
           fg: PlainColorObject;
           format: ColorFormatId;
+          gamut: ColorGamutId;
         };
         expect(format).toBe(formatExpected);
         expect(serialize(bg)).toBe(bgExpected);
         expect(serialize(fg)).toBe(fgExpected);
+        expect(gamut ?? '').toBe(gamutExpected);
       },
     );
   });
   describe('storeValuesToHash', () => {
     test.each(cases)(
       '%s: returns %s',
-      (_, output, bgInput, fgInput, format) => {
+      (_, output, bgInput, fgInput, format, gamut) => {
         const space = getSpaceFromFormatId(format as ColorFormatId);
         const bg = to(bgInput, space);
         const fg = to(fgInput, space);
-        const res = storeValuesToHash(bg, fg, format as ColorFormatId);
+        const res = storeValuesToHash(
+          bg,
+          fg,
+          format as ColorFormatId,
+          gamut as ColorGamutId,
+        );
         expect(res).toBe(output);
       },
     );

From 03dd34f70f0a51b25dd5b1bf05a91f1d592235d3 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Thu, 30 Jan 2025 15:15:12 -0500
Subject: [PATCH 11/20] review

---
 src/lib/components/colors/Sliders.svelte | 6 ++++--
 src/lib/stores.ts                        | 4 ++--
 src/lib/utils.ts                         | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 3f3690a..0288f9c 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { PlainColorObject } from 'colorjs.io/fn';
-  import _ from 'lodash';
+  import throttle from 'lodash/throttle';
   import type { Writable } from 'svelte/store';
 
   import { type ColorFormatId, SLIDERS } from '$lib/constants';
@@ -19,7 +19,9 @@
   let spaceObject = $derived(ColorSpace.get(targetSpace));
 
   // Create a throttled value for each channel
-  const throttled = SLIDERS[format].map(() => _.throttle(sliderGradient, 100));
+  const throttled = $derived(
+    SLIDERS[format].map(() => throttle(sliderGradient, 50)),
+  );
 
   let sliders = $derived(
     SLIDERS[format].map((id, index) => {
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index ba07a02..35b6692 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -32,7 +32,7 @@ export { ColorSpace };
 
 export const INITIAL_VALUES = {
   format: 'p3' as ColorFormatId,
-  gamut: null as ColorGamutId | null,
+  gamut: null as ColorGamutId,
   bg_coord: [0.0967, 0.167, 0.4494] as [number, number, number],
   fg_coord: [0.951, 0.675, 0.7569] as [number, number, number],
   alpha: 1,
@@ -50,7 +50,7 @@ const INITIAL_FG = {
 };
 
 export const format = writable<ColorFormatId>(INITIAL_VALUES.format);
-export const gamut = writable<ColorGamutId | null>(INITIAL_VALUES.gamut);
+export const gamut = writable<ColorGamutId>(INITIAL_VALUES.gamut);
 export const bg = writable<PlainColorObject>(INITIAL_BG);
 export const fg = writable<PlainColorObject>(INITIAL_FG);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 347d794..d3c2959 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -46,7 +46,7 @@ export const sliderGradient = ({
     steps: 10,
     space: color.space,
     hue: 'raw',
-    // Smaller values will take longer, larger will be be less precise and
+    // Smaller values will take longer, larger will be less precise and
     // produce fuzzy edges. This magic number seems to balance that.
     maxDeltaE: 10,
   });
@@ -107,7 +107,7 @@ export const hashToStoreValues = (
   bg: PlainColorObject;
   fg: PlainColorObject;
   format: ColorFormatId;
-  gamut: ColorGamutId | undefined;
+  gamut: ColorGamutId;
 } | void => {
   if (hash === '') return;
   hash = decodeURIComponent(hash);

From c40aaf1110e4dfd242fdde0b32d93736aea96713 Mon Sep 17 00:00:00 2001
From: Miriam Suzanne <miriam@oddbird.net>
Date: Mon, 3 Feb 2025 13:00:27 -0700
Subject: [PATCH 12/20] Add slider borders, and create settings pattern

---
 src/lib/components/GamutSelect.svelte    | 32 +-----------------------
 src/lib/components/Header.svelte         | 19 +++++++++++---
 src/lib/components/SpaceSelect.svelte    | 32 +-----------------------
 src/lib/components/colors/Sliders.svelte |  1 +
 src/sass/components/_color-settings.scss | 26 +++++++++++++++++++
 src/sass/components/_index.scss          |  1 +
 src/sass/initial/_layout.scss            |  2 +-
 src/sass/patterns/_forms.scss            |  1 +
 8 files changed, 47 insertions(+), 67 deletions(-)
 create mode 100644 src/sass/components/_color-settings.scss

diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
index c7e48b3..d5e287b 100644
--- a/src/lib/components/GamutSelect.svelte
+++ b/src/lib/components/GamutSelect.svelte
@@ -3,7 +3,7 @@
   import { gamut } from '$lib/stores';
 </script>
 
-<div data-field="color-gamut">
+<div data-setting="color-gamut">
   <label for="color-gamut" data-label>Gamut</label>
   <select name="color-gamut" id="color-gamut" bind:value={$gamut}>
     {#each GAMUTS as gamut (gamut.format)}
@@ -13,33 +13,3 @@
     {/each}
   </select>
 </div>
-
-<style lang="scss">
-  @use 'config';
-
-  [data-field='color-gamut'] {
-    align-items: center;
-    column-gap: var(--gutter);
-    display: grid;
-    grid-template:
-      'format-label' auto
-      'format-input' auto / 1fr;
-    justify-content: end;
-
-    @include config.above('sm-page-break') {
-      grid-template: 'format-label format-input' auto / 1fr minmax(10rem, auto);
-    }
-  }
-
-  label {
-    grid-area: format-label;
-
-    @include config.above('sm-page-break') {
-      text-align: right;
-    }
-  }
-
-  select {
-    grid-area: format-input;
-  }
-</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 0bb934f..d4e1515 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -5,16 +5,27 @@
 </script>
 
 <header data-layout="header">
-  <h1 class="app-logo">
+  <h1 id="app-logo">
     <Icon name="logo" />
     <span class="sr-only">OddContrast</span>
   </h1>
-  <SpaceSelect />
-  <GamutSelect />
+  <div id="color-settings">
+    <SpaceSelect />
+    <GamutSelect />
+  </div>
 </header>
 
 <style lang="scss">
-  .app-logo {
+  #app-logo {
     display: flex;
+    grid-area: logo;
+  }
+
+  #color-settings {
+    display: grid;
+    gap: inherit;
+    grid-area: settings;
+    grid-template-columns: repeat(2, auto);
+    justify-content: safe end;
   }
 </style>
diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte
index c922c5e..def6af7 100644
--- a/src/lib/components/SpaceSelect.svelte
+++ b/src/lib/components/SpaceSelect.svelte
@@ -23,7 +23,7 @@
   });
 </script>
 
-<div data-field="color-format">
+<div data-setting="color-format">
   <label for="color-format" data-label>Format</label>
   <select name="color-format" id="color-format" bind:value={$format}>
     {#each spaces as space (space.id)}
@@ -33,33 +33,3 @@
     {/each}
   </select>
 </div>
-
-<style lang="scss">
-  @use 'config';
-
-  [data-field='color-format'] {
-    align-items: center;
-    column-gap: var(--gutter);
-    display: grid;
-    grid-template:
-      'format-label' auto
-      'format-input' auto / 1fr;
-    justify-content: end;
-
-    @include config.above('sm-page-break') {
-      grid-template: 'format-label format-input' auto / 1fr minmax(10rem, auto);
-    }
-  }
-
-  label {
-    grid-area: format-label;
-
-    @include config.above('sm-page-break') {
-      text-align: right;
-    }
-  }
-
-  select {
-    grid-area: format-input;
-  }
-</style>
diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 0288f9c..fed71eb 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -123,6 +123,7 @@
     display: block;
     appearance: none;
     background: linear-gradient(to right, var(--stops));
+
     &[data-channel='alpha'] {
       background: linear-gradient(to right, var(--stops)),
         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
diff --git a/src/sass/components/_color-settings.scss b/src/sass/components/_color-settings.scss
new file mode 100644
index 0000000..38c1769
--- /dev/null
+++ b/src/sass/components/_color-settings.scss
@@ -0,0 +1,26 @@
+@use '../config';
+
+[data-setting] {
+  align-items: center;
+  column-gap: var(--gutter);
+  display: grid;
+  grid-template:
+    'format-label' auto
+    'format-input' auto / 1fr;
+  justify-content: end;
+
+  @include config.above('sm-page-break') {
+    --align-label: right;
+
+    grid-template: 'format-label format-input' auto / 1fr auto;
+  }
+
+  label {
+    grid-area: format-label;
+    text-align: var(--align-label, left);
+  }
+
+  select {
+    grid-area: format-input;
+  }
+}
diff --git a/src/sass/components/_index.scss b/src/sass/components/_index.scss
index 33703f5..57f46e5 100644
--- a/src/sass/components/_index.scss
+++ b/src/sass/components/_index.scss
@@ -1,4 +1,5 @@
 // Components Manifest
 // ===================
 
+@forward 'color-settings';
 @forward 'social-nav';
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index 3e1020c..b3d2236 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -40,7 +40,7 @@ body {
   display: grid;
   gap: var(--shim) var(--double-gutter);
   grid-area: header;
-  grid-template: 'logo colorspace gamut' auto / auto 1fr;
+  grid-template: 'logo settings' auto / auto 1fr;
 
   @include config.above('sm-page-break') {
     gap: var(--double-gutter);
diff --git a/src/sass/patterns/_forms.scss b/src/sass/patterns/_forms.scss
index 65dacf9..68e2275 100644
--- a/src/sass/patterns/_forms.scss
+++ b/src/sass/patterns/_forms.scss
@@ -61,6 +61,7 @@ select {
 }
 
 input[type='range'] {
+  border: var(--border-width) solid var(--border);
   border-radius: var(--range-input);
   box-shadow: 1px 1px var(--border-width-md) 0 var(--border-light);
   height: var(--range-input);

From 2854bc97396979193f4dab6a03d2bc92fa38f8bc Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 4 Feb 2025 09:51:56 -0500
Subject: [PATCH 13/20] Reduce size of gradient chunks

---
 src/lib/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index d3c2959..a5403b0 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -48,7 +48,7 @@ export const sliderGradient = ({
     hue: 'raw',
     // Smaller values will take longer, larger will be less precise and
     // produce fuzzy edges. This magic number seems to balance that.
-    maxDeltaE: 10,
+    maxDeltaE: 2,
   });
   let wasInGamut = true;
   const inGamutSteps: string[] = [];

From c9969e9774f1d72bdd56c53983d6cf77476465c1 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 4 Feb 2025 12:44:51 -0500
Subject: [PATCH 14/20] Rename selects, add warning class and icon to swatch
 when out of gamut

---
 src/lib/components/GamutSelect.svelte   |  2 +-
 src/lib/components/SpaceSelect.svelte   |  2 +-
 src/lib/components/colors/Header.svelte | 15 +++++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
index d5e287b..70f3913 100644
--- a/src/lib/components/GamutSelect.svelte
+++ b/src/lib/components/GamutSelect.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div data-setting="color-gamut">
-  <label for="color-gamut" data-label>Gamut</label>
+  <label for="color-gamut" data-label>Show Gamut</label>
   <select name="color-gamut" id="color-gamut" bind:value={$gamut}>
     {#each GAMUTS as gamut (gamut.format)}
       {#if gamut}
diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte
index def6af7..ba21c9a 100644
--- a/src/lib/components/SpaceSelect.svelte
+++ b/src/lib/components/SpaceSelect.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <div data-setting="color-format">
-  <label for="color-format" data-label>Format</label>
+  <label for="color-format" data-label>Color Format</label>
   <select name="color-format" id="color-format" bind:value={$format}>
     {#each spaces as space (space.id)}
       {#if space}
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index adb627e..ea9de89 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-  import { type PlainColorObject, serialize, to } from 'colorjs.io/fn';
+  import { inGamut,type PlainColorObject, serialize, to } from 'colorjs.io/fn';
   import { type Writable } from 'svelte/store';
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { gamut } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
+  import Icon from '../util/Icon.svelte';
+
   interface Props {
     type: 'bg' | 'fg';
     color: Writable<PlainColorObject>;
@@ -17,6 +20,7 @@
   let targetSpace = $derived(getSpaceFromFormatId(format));
   let display = $derived(serialize($color, { inGamut: false, format }));
   let displayType = $derived(type === 'bg' ? 'Background' : 'Foreground');
+  let colorInGamut = $derived($gamut ? inGamut($color, $gamut) : true);
   let editing = $state(false);
   let inputValue = $state('');
   let hasError = $state(false);
@@ -88,7 +92,11 @@
   data-column="tool"
   data-needs-changes={hasError}
 >
-  <div class="swatch {type}"></div>
+  <div class="swatch {type} {colorInGamut ? 'in-gamut' : 'out-of-gamut'}">
+    <div class="gamut-warning">
+      <span class="sr-only">Out of gamut</span><Icon name="warning" />
+    </div>
+  </div>
   <label for="{type}-color" data-label>
     {displayType} Color
   </label>
@@ -132,6 +140,9 @@
     grid-area: swatch;
     height: 100%;
     position: relative;
+    &.out-of-gamut {
+      outline: var(--warning) 3pt solid;
+    }
 
     &.bg {
       &:after {

From d318d7e40150caa911eb8fa1f44a3cbacfa1e3c5 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 4 Feb 2025 12:50:31 -0500
Subject: [PATCH 15/20] Lint, fix tests

---
 src/lib/components/colors/Header.svelte | 2 +-
 test/lib/components/GamutSelect.spec.ts | 2 +-
 test/lib/components/SpaceSelect.spec.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index ea9de89..b02055d 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { inGamut,type PlainColorObject, serialize, to } from 'colorjs.io/fn';
+  import { inGamut, type PlainColorObject, serialize, to } from 'colorjs.io/fn';
   import { type Writable } from 'svelte/store';
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
diff --git a/test/lib/components/GamutSelect.spec.ts b/test/lib/components/GamutSelect.spec.ts
index eadaeb6..4486a75 100644
--- a/test/lib/components/GamutSelect.spec.ts
+++ b/test/lib/components/GamutSelect.spec.ts
@@ -14,7 +14,7 @@ describe('Space', () => {
 
     expect(get(gamut)).toBe(INITIAL_VALUES.gamut);
 
-    const select = getByLabelText('Gamut');
+    const select = getByLabelText('Show Gamut');
     await fireEvent.change(select, { target: { value: 'rec2020' } });
 
     expect(get(gamut)).toBe('rec2020');
diff --git a/test/lib/components/SpaceSelect.spec.ts b/test/lib/components/SpaceSelect.spec.ts
index 4697278..8979bc3 100644
--- a/test/lib/components/SpaceSelect.spec.ts
+++ b/test/lib/components/SpaceSelect.spec.ts
@@ -15,7 +15,7 @@ describe('Space', () => {
     expect(get(bg).space.id).toBe(INITIAL_VALUES.format);
     expect(get(fg).space.id).toBe(INITIAL_VALUES.format);
 
-    const select = getByLabelText('Format');
+    const select = getByLabelText('Color Format');
     await fireEvent.change(select, { target: { value: 'hsl' } });
 
     expect(get(bg).space.id).toBe('hsl');

From c592135f8470204e329e874f85133b95e61a6f58 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Tue, 4 Feb 2025 15:37:48 -0500
Subject: [PATCH 16/20] lint

---
 src/lib/components/colors/FormatGroup.svelte | 3 +--
 src/lib/components/colors/Header.svelte      | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/colors/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 7cbca4f..9a0a481 100644
--- a/src/lib/components/colors/FormatGroup.svelte
+++ b/src/lib/components/colors/FormatGroup.svelte
@@ -2,12 +2,11 @@
   import { inGamut, type PlainColorObject } from 'colorjs.io/fn';
 
   import Output from '$lib/components/colors/Output.svelte';
+  import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import type { FormatGroup } from '$lib/constants';
   import { ColorSpace } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  import ExternalLink from '../util/ExternalLink.svelte';
-
   interface Props {
     type: 'bg' | 'fg';
     color: PlainColorObject;
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index b02055d..c8b32f5 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -3,12 +3,11 @@
   import { type Writable } from 'svelte/store';
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
+  import Icon from '$lib/components/util/Icon.svelte';
   import type { ColorFormatId } from '$lib/constants';
   import { gamut } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
-  import Icon from '../util/Icon.svelte';
-
   interface Props {
     type: 'bg' | 'fg';
     color: Writable<PlainColorObject>;

From cdfec9a57b39a6f961e87f1b33b0f739d7c64cbc Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 5 Feb 2025 08:51:28 -0500
Subject: [PATCH 17/20] Make gamut warning conditional, add z-index

---
 src/lib/components/colors/Header.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
index c8b32f5..52a3d2d 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -92,9 +92,11 @@
   data-needs-changes={hasError}
 >
   <div class="swatch {type} {colorInGamut ? 'in-gamut' : 'out-of-gamut'}">
-    <div class="gamut-warning">
-      <span class="sr-only">Out of gamut</span><Icon name="warning" />
-    </div>
+    {#if !colorInGamut}
+      <div class="gamut-warning">
+        <span class="sr-only">Out of gamut</span><Icon name="warning" />
+      </div>
+    {/if}
   </div>
   <label for="{type}-color" data-label>
     {displayType} Color
@@ -143,6 +145,11 @@
       outline: var(--warning) 3pt solid;
     }
 
+    .gamut-warning {
+      z-index: 1;
+      position: absolute;
+    }
+
     &.bg {
       &:after {
         background-color: var(--bgcolor);

From 7e4a540c55aec52858d2c092c9215f30afa16bb5 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Wed, 5 Feb 2025 10:26:41 -0500
Subject: [PATCH 18/20] Force sliders to recalculate when gamut changes

---
 src/lib/components/colors/Sliders.svelte | 12 +++++++++---
 src/lib/utils.ts                         |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index fed71eb..983bbeb 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -19,9 +19,15 @@
   let spaceObject = $derived(ColorSpace.get(targetSpace));
 
   // Create a throttled value for each channel
-  const throttled = $derived(
-    SLIDERS[format].map(() => throttle(sliderGradient, 50)),
-  );
+  const throttled = $derived.by(() => {
+    // Throttling isn't really necessary when gamut is not displayed,
+    // and using `$gamut` here forces this `derived` to be recalculated
+    // when the gamut changes
+    if ($gamut === null) {
+      return SLIDERS[format].map(() => sliderGradient);
+    }
+    return SLIDERS[format].map(() => throttle(sliderGradient, 100));
+  });
 
   let sliders = $derived(
     SLIDERS[format].map((id, index) => {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a5403b0..86fcccb 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -48,7 +48,7 @@ export const sliderGradient = ({
     hue: 'raw',
     // Smaller values will take longer, larger will be less precise and
     // produce fuzzy edges. This magic number seems to balance that.
-    maxDeltaE: 2,
+    maxDeltaE: channel === 'alpha' || gamut === null ? undefined : 2,
   });
   let wasInGamut = true;
   const inGamutSteps: string[] = [];

From aac9bd3bec42ae2c97262c4b29ed4dec6e1553a4 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Wed, 5 Feb 2025 11:12:59 -0500
Subject: [PATCH 19/20] Separate alpha gradient slider"

---
 src/lib/components/colors/Sliders.svelte | 11 ++++----
 src/lib/utils.ts                         | 35 ++++++++++++++----------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 983bbeb..5a760bb 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -5,7 +5,11 @@
 
   import { type ColorFormatId, SLIDERS } from '$lib/constants';
   import { ColorSpace, gamut } from '$lib/stores';
-  import { getSpaceFromFormatId, sliderGradient } from '$lib/utils';
+  import {
+    alphaSliderGradient,
+    getSpaceFromFormatId,
+    sliderGradient,
+  } from '$lib/utils';
 
   interface Props {
     type: 'bg' | 'fg';
@@ -55,11 +59,8 @@
   );
 
   let alphaGradient = $derived(
-    sliderGradient({
+    alphaSliderGradient({
       color: $color,
-      channel: 'alpha',
-      range: [0, $color.alpha],
-      gamut: $gamut,
     }),
   );
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 86fcccb..373a3f8 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -19,6 +19,17 @@ import {
 export const getSpaceFromFormatId = (formatId: ColorFormatId) =>
   formatId === 'hex' ? 'srgb' : formatId;
 
+export const alphaSliderGradient = ({ color }: { color: PlainColorObject }) => {
+  const start = clone(color);
+  const end = clone(color);
+  start.alpha = 0;
+  end.alpha = 1;
+  const gradientSteps = steps(start, end, {
+    steps: 2,
+  });
+  return gradientSteps.map((c) => display(c)).join(', ');
+};
+
 export const sliderGradient = ({
   color,
   channel,
@@ -32,15 +43,11 @@ export const sliderGradient = ({
 }) => {
   const start = clone(color);
   const end = clone(color);
-  if (channel === 'alpha') {
-    start.alpha = 0;
-    end.alpha = 1;
-  } else {
-    set(start, channel, range[0]);
-    start.alpha = 1;
-    set(end, channel, range[1]);
-    end.alpha = 1;
-  }
+
+  set(start, channel, range[0]);
+  start.alpha = 1;
+  set(end, channel, range[1]);
+  end.alpha = 1;
 
   const gradientSteps = steps(start, end, {
     steps: 10,
@@ -48,15 +55,15 @@ export const sliderGradient = ({
     hue: 'raw',
     // Smaller values will take longer, larger will be less precise and
     // produce fuzzy edges. This magic number seems to balance that.
-    maxDeltaE: channel === 'alpha' || gamut === null ? undefined : 2,
+    maxDeltaE: gamut === null ? undefined : 2,
   });
-  let wasInGamut = true;
-  const inGamutSteps: string[] = [];
-  const stepWidth = 100 / (gradientSteps.length - 1);
 
-  if (channel === 'alpha' || gamut === null) {
+  if (gamut === null) {
     return gradientSteps.map((c) => display(c)).join(', ');
   }
+  let wasInGamut = true;
+  const inGamutSteps: string[] = [];
+  const stepWidth = 100 / (gradientSteps.length - 1);
 
   // Create a linear gradient string, mapping gradientSteps to 0%-100% by
   // multiplying its index with `stepWidth`.

From 1e2f22da949f6658fd71eb0dbba6c1ac410d3bd9 Mon Sep 17 00:00:00 2001
From: Miriam Suzanne <miriam@oddbird.net>
Date: Wed, 5 Feb 2025 10:10:28 -0700
Subject: [PATCH 20/20] Cleanup header layout for small screens

---
 src/lib/components/Header.svelte         | 2 +-
 src/sass/components/_color-settings.scss | 3 ---
 src/sass/initial/_layout.scss            | 5 ++++-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index d4e1515..2c1578b 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -26,6 +26,6 @@
     gap: inherit;
     grid-area: settings;
     grid-template-columns: repeat(2, auto);
-    justify-content: safe end;
+    justify-content: var(--justify-settings);
   }
 </style>
diff --git a/src/sass/components/_color-settings.scss b/src/sass/components/_color-settings.scss
index 38c1769..51d53a4 100644
--- a/src/sass/components/_color-settings.scss
+++ b/src/sass/components/_color-settings.scss
@@ -10,14 +10,11 @@
   justify-content: end;
 
   @include config.above('sm-page-break') {
-    --align-label: right;
-
     grid-template: 'format-label format-input' auto / 1fr auto;
   }
 
   label {
     grid-area: format-label;
-    text-align: var(--align-label, left);
   }
 
   select {
diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss
index b3d2236..bea7ef8 100644
--- a/src/sass/initial/_layout.scss
+++ b/src/sass/initial/_layout.scss
@@ -40,10 +40,13 @@ body {
   display: grid;
   gap: var(--shim) var(--double-gutter);
   grid-area: header;
-  grid-template: 'logo settings' auto / auto 1fr;
+  grid-template: 'logo' auto 'settings' auto / 1fr;
 
   @include config.above('sm-page-break') {
+    --justify-settings: safe end;
+
     gap: var(--double-gutter);
+    grid-template: 'logo settings' auto / auto 1fr;
   }
 }