oklch.co

Colour, the way the eye sees it.

Generate palettes with even lightness, reach wide-gamut P3, and ship accessible design tokens — all in OKLCH. Hex, RGB and CMYK welcome too.

Open the generator →Why OKLCH⌘K converts anything
L · lightness62%
C · chroma0.19
H · hue24°
sRGB P3 2020 space regenerates
Perceptual lightness

Same L looks equally bright across every hue — even ramps, no guesswork.

Wide-gamut ready

Reach Display-P3 colours hex and rgb() simply can’t describe.

Accessible by default

APCA + WCAG contrast baked into every tool, not bolted on.

Why OKLCH, in one slider

the full essay →
OKLCHEven steps — hue stays put the whole way.
3886E3
LCHEven brightness, but blues drift toward purple.
5196F5
HSLBrightness is lumpy; both ends wash out.
5395E2
HSB / HSVBrightens toward full colour, not white — still uneven.
255EA3
RGB / HEXNo lightness axis — it desaturates and shifts hue.
639EE5

Same hue, same lightness control. Watch the marker: in OKLCH every position is a clean, evenly-spaced shade that keeps its colour. The other models bend, dull or shift — which is why building consistent palettes in HSL, RGB or hex means endless manual fiddling.

Where the rest fit in: Lab and OKLab are the cartesian forms of LCH and OKLCH; HSB/HSV and HWB are siblings of HSL; and CSS color() writes any of these — including wide-gamut display-p3 — directly.

Start from a palette

browse all →
Aurorapage →
Sunset Drivepage →
Deep Forestpage →
Candy Poppage →

The tools

keys 1–7 in the app