oklch-pickerPlaygroundGitHub

Svelte

Everything the picker does, in Svelte, on one page. The value binding is bind:value.

Install

npm install @oklch-picker/svelte

The stylesheet lives in the shared core, which the adapter already depends on. Import it once, anywhere.

import "@oklch-picker/core/styles.css";
This is the result, feel free to drag and experiment

The basics

A controlled picker. The value you get back is always canonical and always in gamut.

<script>
  import { ColourPicker } from "@oklch-picker/svelte";
  import "@oklch-picker/core/styles.css";

  let colour = $state("oklch(0.7 0.15 255)");
</script>

<ColourPicker bind:value={colour} />

Presets

Swatches under the sliders. Clicking one commits it, so it joins the recent colours too.

<ColourPicker bind:value={colour} {presets} />

A wider gamut

P3 and Rec. 2020 as output spaces, not decoration: the slider reaches further and the value is clamped to the space you chose.

<script>
  import { P3 } from "@oklch-picker/core/gamuts";
</script>

<ColourPicker bind:value={colour} gamut={P3} />

Letting the user switch space

A segmented control over the output space. Off by default, since most pickers target one.

<ColourPicker
  bind:value={colour}
  {gamut}
  gamutChoices={[SRGB, P3, REC2020]}
  parts={{ gamutSwitch: true }}
  ongamutchange={(next) => (gamut = next)}
/>

Alpha

On by default. An opaque colour is unchanged in every format, so the alpha forms appear only when a colour is actually transparent.

<ColourPicker bind:value={colour} parts={{ alpha: false }} />

Storing recent colours yourself

The picker keeps a list per session. Pass one in to store them in a backend or share them between pickers.

<ColourPicker
  bind:value={colour}
  {recents}
  onrecentschange={(next) => {
    recents = next;
    save(next);
  }}
/>

On a server

The markup the server sends is the finished picker, not a shell that fills in on hydration.

import { render } from "svelte/server";

const { body } = render(ColourPicker, { props: { value: colour } });

Where next