@oklch-picker/solid

An OKLCH colour picker for Solid, 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/solid

Usage

import { createSignal } from "solid-js";
import { ColourPicker } from "@oklch-picker/solid";
import "@oklch-picker/core/styles.css";

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

onChange always receives a canonical, gamut-clamped oklch(L C H) string.

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.

Ships JSX source so it compiles against your app's own Solid runtime.

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