@oklch-picker/core

The OKLCH colour maths and headless picker model behind every oklch-picker adapter. No UI. Framework-free, no DOM, zero dependencies.

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/core

Usage

Every adapter depends on this package, so you rarely install it directly for a picker. On its own it is useful for colour work with no UI attached: validating stored values on a server, generating palettes, or naming colours in a table.

import { colourName, clampToGamut, maxChroma, toOklch } from "@oklch-picker/core";

colourName("oklch(0.75 0.16 145)");  // "Green"
maxChroma(0.75, 145);                // highest chroma sRGB can show here
clampToGamut({ l: 0.2, c: 0.3, h: 145 });  // reduced to what fits

It also holds the shared stylesheet:

import "@oklch-picker/core/styles.css";      // or styles.min.css

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