oklch-pickerPlaygroundGitHub

No framework

Everything the picker does, in No framework, on one page. The value binding is the value attribute and a change listener.

Install

npm install oklch-picker

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.

<link rel="stylesheet" href="https://esm.sh/@oklch-picker/core/styles.min.css" />

<oklch-picker id="picker" value="oklch(0.7 0.15 255)"></oklch-picker>

<script type="module">
  import "https://esm.sh/oklch-picker/register";

  document.getElementById("picker").addEventListener("change", (event) => {
    console.log(event.detail.colour); // "oklch(0.7 0.15 120)"
  });
</script>

Presets

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

<oklch-picker
  presets='["oklch(0.75 0.16 145)", "oklch(0.7 0.15 255)"]'
></oklch-picker>

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.

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

// A gamut is an object, so it is a property rather than an attribute.
document.querySelector("oklch-picker").gamut = P3;

Letting the user switch space

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

const picker = document.querySelector("oklch-picker");
picker.gamutChoices = [SRGB, P3, REC2020];
picker.parts = { gamutSwitch: true };

picker.addEventListener("gamutchange", (event) => {
  picker.gamut = event.detail.gamut;
});

Alpha

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

<oklch-picker
  value="oklch(0.7 0.15 255 / 0.4)"
  parts='{"alpha": false}'
></oklch-picker>

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.

const picker = document.querySelector("oklch-picker");
picker.recents = loadFromServer();

picker.addEventListener("recentschange", (event) => {
  save(event.detail.recents);
});

On a server

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

<!-- The element upgrades in the browser, so render the tag on the
     server and import the module from a client-only block. -->
<oklch-picker value="oklch(0.7 0.15 255)"></oklch-picker>

<script type="module">
  import "oklch-picker/register";
</script>

Where next