diff --git a/src/lib/components/GamutSelect.svelte b/src/lib/components/GamutSelect.svelte
new file mode 100644
index 00000000..70f39133
--- /dev/null
+++ b/src/lib/components/GamutSelect.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { GAMUTS } from '$lib/constants';
+  import { gamut } from '$lib/stores';
+</script>
+
+<div data-setting="color-gamut">
+  <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}
+        <option value={gamut.format}>{gamut.name}</option>
+      {/if}
+    {/each}
+  </select>
+</div>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 360fff76..2c1578b8 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,18 +1,31 @@
 <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>
 
 <header data-layout="header">
-  <h1 class="app-logo">
+  <h1 id="app-logo">
     <Icon name="logo" />
     <span class="sr-only">OddContrast</span>
   </h1>
-  <SpaceSelect />
+  <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: var(--justify-settings);
   }
 </style>
diff --git a/src/lib/components/SpaceSelect.svelte b/src/lib/components/SpaceSelect.svelte
index 41fd50fd..ba21c9a4 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>Color 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/FormatGroup.svelte b/src/lib/components/colors/FormatGroup.svelte
index 7cbca4f2..9a0a481c 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 6b3cf086..39037e67 100644
--- a/src/lib/components/colors/Header.svelte
+++ b/src/lib/components/colors/Header.svelte
@@ -1,10 +1,11 @@
 <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 Icon from '$lib/components/util/Icon.svelte';
   import type { ColorFormatId } from '$lib/constants';
-  import { switchColors } from '$lib/stores';
+  import { gamut, switchColors } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
   interface Props {
@@ -20,6 +21,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);
@@ -120,14 +122,20 @@
 >
   <div
     role="complementary"
-    class="swatch {type}"
+    class="swatch {type} {colorInGamut ? 'in-gamut' : 'out-of-gamut'}"
     draggable="true"
     ondrop={onDrop}
     ondragenter={makeDropable}
     ondragover={makeDropable}
     ondragstart={onDragStart}
     ondragend={() => (isDragging = false)}
-  ></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
   </label>
@@ -171,6 +179,14 @@
     grid-area: swatch;
     height: 100%;
     position: relative;
+    &.out-of-gamut {
+      outline: var(--warning) 3pt solid;
+    }
+
+    .gamut-warning {
+      z-index: 1;
+      position: absolute;
+    }
 
     &.bg {
       &:after {
diff --git a/src/lib/components/colors/Sliders.svelte b/src/lib/components/colors/Sliders.svelte
index 25a6810d..5a760bbc 100644
--- a/src/lib/components/colors/Sliders.svelte
+++ b/src/lib/components/colors/Sliders.svelte
@@ -1,10 +1,15 @@
 <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 { getSpaceFromFormatId, sliderGradient } from '$lib/utils';
+  import { ColorSpace, gamut } from '$lib/stores';
+  import {
+    alphaSliderGradient,
+    getSpaceFromFormatId,
+    sliderGradient,
+  } from '$lib/utils';
 
   interface Props {
     type: 'bg' | 'fg';
@@ -16,11 +21,28 @@
 
   let targetSpace = $derived(getSpaceFromFormatId(format));
   let spaceObject = $derived(ColorSpace.get(targetSpace));
+
+  // Create a throttled value for each channel
+  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) => {
+    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 +59,9 @@
   );
 
   let alphaGradient = $derived(
-    sliderGradient($color, 'alpha', [0, $color.alpha]),
+    alphaSliderGradient({
+      color: $color,
+    }),
   );
 
   const handleInput = (
@@ -95,6 +119,7 @@
       style={`--stops: ${alphaGradient}`}
       value={$color.alpha}
       oninput={(e) => handleInput(e)}
+      data-channel="alpha"
     />
   </div>
 </div>
@@ -105,6 +130,11 @@
     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'] {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 0edbcf8e..422eca56 100644
--- a/src/lib/constants.ts
+++ b/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[];
diff --git a/src/lib/stores.ts b/src/lib/stores.ts
index 2928b2a5..14172a8c 100644
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -14,7 +14,7 @@ import { get, 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);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 148a04a6..373a3f89 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import {
   clone,
   display,
+  inGamut,
   type PlainColorObject,
   serialize,
   set,
@@ -8,33 +9,83 @@ import {
   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 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,
+  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];
-  } else {
-    set(start, channel, range[0]);
-    set(end, channel, range[1]);
-  }
+
+  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: gamut === null ? undefined : 2,
   });
 
-  return gradientSteps.map((c) => display(c)).join(', ');
+  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`.
+  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)}%`);
+
+      wasInGamut = false;
+    }
+  });
+
+  return inGamutSteps.join(', ');
 };
 
 function decodeColor(colorHash: string, format: ColorFormatId) {
@@ -63,11 +114,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 +130,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 32c7402d..97fff26a 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 ColorIssues from '$src/lib/components/ratio/ColorIssues.svelte';
   import { hashToStoreValues, storeValuesToHash } from '$src/lib/utils';
 
@@ -21,10 +21,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}`, {});
   }
 
@@ -39,6 +40,7 @@
     bg.set(result.bg);
     fg.set(result.fg);
     format.set(result.format);
+    gamut.set(result.gamut ?? null);
   }
 </script>
 
diff --git a/src/sass/components/_color-settings.scss b/src/sass/components/_color-settings.scss
new file mode 100644
index 00000000..51d53a4b
--- /dev/null
+++ b/src/sass/components/_color-settings.scss
@@ -0,0 +1,23 @@
+@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') {
+    grid-template: 'format-label format-input' auto / 1fr auto;
+  }
+
+  label {
+    grid-area: format-label;
+  }
+
+  select {
+    grid-area: format-input;
+  }
+}
diff --git a/src/sass/components/_index.scss b/src/sass/components/_index.scss
index 33703f58..57f46e51 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 35e3fa39..6c269086 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 colorspace' 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;
   }
 }
 
diff --git a/src/sass/patterns/_forms.scss b/src/sass/patterns/_forms.scss
index 65dacf9b..68e22752 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);
diff --git a/test/lib/components/GamutSelect.spec.ts b/test/lib/components/GamutSelect.spec.ts
new file mode 100644
index 00000000..4486a755
--- /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('Show Gamut');
+    await fireEvent.change(select, { target: { value: 'rec2020' } });
+
+    expect(get(gamut)).toBe('rec2020');
+  });
+});
diff --git a/test/lib/utils.spec.ts b/test/lib/utils.spec.ts
index 98dcbae5..108e9247 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);
       },
     );