oklch-pickerPlaygroundGitHub

Solid

Everything the picker does, in Solid, on one page. The value binding is value and onChange, reading the signal at the call site.

Install

npm install @oklch-picker/solid

The stylesheet lives in the shared core, which the adapter already depends on. Import it once, anywhere.

import "@oklch-picker/core/styles.css";
This is the result, feel free to drag and experiment

The basics

A controlled picker. The value you get back is always canonical and always in gamut.

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} />;
}

Presets

Swatches under the sliders. Clicking one commits it, so it joins the recent colours too.

<ColourPicker value={colour()} onChange={setColour} presets={presets} />

A wider gamut

P3 and Rec. 2020 as output spaces, not decoration: the slider reaches further and the value is clamped to the space you chose.

import { P3 } from "@oklch-picker/core/gamuts";

<ColourPicker value={colour()} onChange={setColour} gamut={P3} />

Letting the user switch space

A segmented control over the output space. Off by default, since most pickers target one.

<ColourPicker
  value={colour()}
  onChange={setColour}
  gamut={gamut()}
  onGamutChange={setGamut}
  gamutChoices={[SRGB, P3, REC2020]}
  parts={{ gamutSwitch: true }}
/>

Alpha

On by default. An opaque colour is unchanged in every format, so the alpha forms appear only when a colour is actually transparent.

<ColourPicker value={colour()} onChange={setColour} parts={{ alpha: false }} />

Storing recent colours yourself

The picker keeps a list per session. Pass one in to store them in a backend or share them between pickers.

<ColourPicker
  value={colour()}
  onChange={setColour}
  recents={recents()}
  onRecentsChange={setRecents}
/>

On a server

The markup the server sends is the finished picker, not a shell that fills in on hydration.

import { renderToString } from "solid-js/web";

renderToString(() => <ColourPicker value={colour()} onChange={setColour} />);

Where next