Show gamut in sliders

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-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>
+      {/if}
+    {/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>

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">

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}

src/lib/components/colors/Sliders.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type { PlainColorObject } from 'colorjs.io/fn';
+  import throttle from 'lodash/throttle';
   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 {
@@ -16,11 +17,22 @@
 
   let targetSpace = $derived(getSpaceFromFormatId(format));
   let spaceObject = $derived(ColorSpace.get(targetSpace));
+
+  // Create a throttled value for each channel
+  const throttled = $derived(
+    SLIDERS[format].map(() => throttle(sliderGradient, 50)),
+  );
+
   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($color, id, range);
+      const gradient = throttled[index]!({
+        color: $color,
+        channel: id,
+        range: range,
+        gamut: $gamut,
+      });
       return {
         id,
         name: coord?.name ?? '',
@@ -37,7 +49,12 @@
   );
 
   let alphaGradient = $derived(
-    sliderGradient($color, 'alpha', [0, $color.alpha]),
+    sliderGradient({
+      color: $color,
+      channel: 'alpha',
+      range: [0, $color.alpha],
+      gamut: $gamut,
+    }),
   );
 
   const handleInput = (
@@ -95,6 +112,7 @@
       style={`--stops: ${alphaGradient}`}
       value={$color.alpha}
       oninput={(e) => handleInput(e)}
+      data-channel="alpha"
     />
   </div>
 </div>
@@ -105,6 +123,10 @@
     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>');
+    }
   }
 
   [data-group~='sliders'] {

src/lib/constants.ts

@@ -24,6 +24,16 @@ export const FORMATS: ColorFormatId[] = [
   'srgb',
 ];
 
+export type ColorGamutId = 'srgb' | 'p3' | 'rec2020' | 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;
   formats: ColorFormatId[];

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: 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,
@@ -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);
 

src/lib/utils.ts

@@ -1,40 +1,84 @@
 import {
   clone,
   display,
+  inGamut,
   type PlainColorObject,
   serialize,
   set,
   steps,
   to,
 } from 'colorjs.io/fn';
 
-import { type ColorFormatId, FORMATS } from '$lib/constants';
+import {
+  type ColorFormatId,
+  type ColorGamutId,
+  FORMATS,
+  GAMUT_IDS,
+} 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') {
-    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, {
     steps: 10,
     space: color.space,
     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,
   });
+  let wasInGamut = true;
+  const inGamutSteps: string[] = [];
+  const stepWidth = 100 / (gradientSteps.length - 1);
+
+  if (channel === 'alpha' || gamut === null) {
+    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) {
+        // 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) {
+      // 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)}%`);
 
-  return gradientSteps.map((c) => display(c)).join(', ');
+      wasInGamut = false;
+    }
+  });
+
+  return inGamutSteps.join(', ');
 };
 
 function decodeColor(colorHash: string, format: ColorFormatId) {
@@ -63,11 +107,13 @@ export const hashToStoreValues = (
   bg: PlainColorObject;
   fg: PlainColorObject;
   format: ColorFormatId;
+  gamut: ColorGamutId;
 } | 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,
@@ -77,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}`);
 };

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>
 

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);

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');
+  });
+});

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');