@oklch-picker/react

An OKLCH colour picker for React and Preact, with gamut-aware sliders.

Documentation and live demos

Every axis is a slider over a gamut cross-section. The filled silhouette is the range sRGB can actually show, so the reachable colours are visible. You do not have to discover them by dragging into a region that does nothing.

See it running, in light or dark, with every layout and part on a page of its own.

• The chroma slider is bounded by what is reachable. A fixed 0..0.37 slider is up to 87% dead travel at low lightness. Here the maximum is recomputed as the other axes move.
• Out-of-gamut regions are hatched, on every axis.
• Nothing out-of-gamut is ever emitted. Values are clamped by reducing chroma, keeping lightness and hue.

Install

npm install @oklch-picker/react

Usage

import { useState } from "react";
import { ColourPicker } from "@oklch-picker/react";
import "@oklch-picker/core/styles.css";

export function Example() {
  const [colour, setColour] = useState("oklch(0.7 0.15 255)");
  return <ColourPicker value={colour} onChange={setColour} />;
}

onChange always receives a canonical, gamut-clamped oklch(L C H) string. value accepts that, rgb(), hsl(), hwb() or hex.

The picker is controlled, always. It keeps no colour of its own: whatever you pass as value is what it renders, so the value it hands back has to come back in. Wire only the callback and the sliders will not move, while the picker quietly emits values against a colour that never changes.

Preact works through preact/compat, which most Preact setups already alias.

The family

| Using | Install | | --- | --- | | No framework: HTML, HTMX, Alpine, Astro, Rails, Laravel, Django | oklch-picker | | React / Preact | @oklch-picker/react | | Vue | @oklch-picker/vue | | Svelte 5 | @oklch-picker/svelte | | Solid | @oklch-picker/solid | | Angular 17+ | @oklch-picker/angular | | Qwik | @oklch-picker/qwik | | The maths and headless model alone | @oklch-picker/core |

Full documentation lives in the repository README.

Licence

MIT © Nick Bevers