Component · OKLCH Color Picker

01 · Hue wheel + L/C slidersconic + linear-gradient

oklch

Lightness0.720

Chroma0.180

live preview

oklch(0.72 0.18 280)

#a78bfa · approx

H280°

L · C0.72 / 0.18

02 · Constellation axestemperature · role · contrast peer

Constellation projection of current pick

Temperaturewarm-ish · 0.42

Role energyexpressive · 0.72

Contrast peer · vs --bggood · AA

Motion signatureaurora-fluid

03 · Constellation palette · 5 related±30° hue spread

Suggested familyclick to seed

04 · Token-slot · which accent does this paint?data-slot

Token: --accent —

UsageAPI surface

Authoring contract

The wheel writes --okl-h (0–360), the sliders write --okl-l (0–1) and --okl-c (0–0.4). The host reads those into an oklch(L C H) colour and writes the result into --accent, --accent-2, or --accent-3 on whatever surface is bound. Palette swatches are seeded by hue rotation (±30° spread).

Hook	Values	Effect
`--okl-h`	0–360	Hue angle in degrees.
`--okl-l`	0–1	Perceptual lightness.
`--okl-c`	0–0.4	Chroma. 0 = grey, 0.4 = max saturated.
`data-slot`	accent · accent-2 · accent-3	Which canonical token to write to.
JS event	`oklch:change`	Fires with `detail.l, c, h, oklch`.
`prefers-reduced-motion`	—	Pin transition removed; drags remain.

View HTML

<div class="lsd-oklch" data-slot="accent">
  <div class="lsd-oklch__wheel" data-wheel>
    <div class="lsd-oklch__wheel-inner"></div>
    <div class="lsd-oklch__wheel-pin" data-pin></div>
  </div>
  <div class="lsd-oklch__sliders">
    <div class="lsd-oklch__track lsd-oklch__track--l" data-track="l">…</div>
    <div class="lsd-oklch__track lsd-oklch__track--c" data-track="c">…</div>
  </div>
</div>