tweakpane-plugin-wide-gamut

A wide-gamut colour picker for Tweakpane v4. It mirrors the native colour picker and adds an sRGB / P3 gamut boundary on the OKLCH L×C plane, plus 11 colour spaces to read and edit in. Live demo ↗

• Drop-in — registered once, it claims any colour-string binding; no view parameter.
• 11 spaces — HEX, RGB, CSS, HSL, HWB, OKLCH, OKLab, LCH, Lab, P3, Rec2020.
• Wide-gamut — the sRGB/P3 boundary draws on the OKLCH plane; values keep their source format and support alpha.

Usage

npm install tweakpane-plugin-wide-gamut tweakpane

import {Pane} from 'tweakpane';
import * as WideGamutPlugin from 'tweakpane-plugin-wide-gamut';

const pane = new Pane();
pane.registerPlugin(WideGamutPlugin);

pane.addBinding({brand: 'oklch(0.7 0.15 250)'}, 'brand');

How it works

The colour maths — conversions across all 11 spaces, gamut testing, and gamut mapping — is written straight from the CSS Color 4 specification (and Björn Ottosson's OKLab), with no runtime colour-library dependency.