Layouts

Four arrangements of the same controls. Every one below is live, so drag them and compare.

chart, the default

One large lightness × chroma plot above all three sliders, reshaping as the hue slider moves. Drag the plot to set lightness and chroma at once.

side-by-side

The same large plot and sliders, with preview, hex, name, and presets in a right rail. For wide settings panels. It caps itself at--okp-side-by-side-width (560px) so the chart has room to be worth reading; override that and --okp-rail-width to resize it.

compact

No charts, tighter spacing, single-letter labels inline with each slider. For popovers and toolbars. Screen readers still get the full labels.

stacked

A thin gamut chart above each axis instead of one large one. Each sweeps the two axes it does not control, so all three show a different slice: the L chart plots hue against chroma, the C chart hue against lightness, and the H chart lightness against chroma.

Setting it

<ColourPicker value={colour} onChange={setColour} layout="compact" />

<ColourPicker v-model="colour" layout="compact" />

<ColourPicker bind:value={colour} layout="compact" />

<ColourPicker value={colour()} onChange={setColour} layout="compact" />

<oklch-colour-picker [value]="colour()" (valueChange)="colour.set($event)" layout="compact" />

<ColourPicker value={colour.value} onChange$={$((c: string) => (colour.value = c))} layout="compact" />

<oklch-picker layout="compact"></oklch-picker>

<oklch-picker layout="compact"></oklch-picker>

Dragging the chart

In the chart layout the plot is a control, not a picture: dragging it sets lightness and chroma at once, using pointer events so it works under touch as well as a mouse.

The thin per-axis charts in stacked are read-only. They are 34px tall, so a drag would have almost no vertical travel, and it would set two axes at once directly above the slider that sets one precisely.

Charts are hidden from assistive tech either way. The sliders are the accessible route, and they reach everything a chart can.