https://github.com/ryankiley/tweakpane-plugin-wide-gamut
Gamut-aware colour picker for Tweakpane v4 — the native picker UI with an sRGB/P3 gamut boundary, across 10 colour spaces (OKLCH, OKLab, LCH, Lab, RGB, HSL, HWB, HEX, P3, Rec2020).
https://github.com/ryankiley/tweakpane-plugin-wide-gamut
color color-picker colour-picker css-color display-p3 gamut oklab oklch p3 tweakpane tweakpane-plugin typescript wide-gamut
Last synced: 13 days ago
JSON representation
Gamut-aware colour picker for Tweakpane v4 — the native picker UI with an sRGB/P3 gamut boundary, across 10 colour spaces (OKLCH, OKLab, LCH, Lab, RGB, HSL, HWB, HEX, P3, Rec2020).
- Host: GitHub
- URL: https://github.com/ryankiley/tweakpane-plugin-wide-gamut
- Owner: ryankiley
- License: mit
- Created: 2026-05-30T01:08:53.000Z (14 days ago)
- Default Branch: main
- Last Pushed: 2026-05-30T21:03:05.000Z (13 days ago)
- Last Synced: 2026-05-30T22:16:18.728Z (13 days ago)
- Topics: color, color-picker, colour-picker, css-color, display-p3, gamut, oklab, oklch, p3, tweakpane, tweakpane-plugin, typescript, wide-gamut
- Language: TypeScript
- Homepage: https://ryankiley.github.io/tweakpane-plugin-wide-gamut/
- Size: 285 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# tweakpane-plugin-wide-gamut
A wide-gamut colour picker for [Tweakpane][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 ↗](https://ryankiley.github.io/tweakpane-plugin-wide-gamut/)**
- **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
```sh
npm install tweakpane-plugin-wide-gamut
```
```js
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');
```
## Credits
The colour area is adapted from Adam Argyle's [`color-input`][color-input].
[tweakpane]: https://github.com/cocopon/tweakpane/
[color-input]: https://github.com/argyleink/css-color-component