Why OKLCH
Colour numbers that mean what they say. Scroll — the instrument shows you.
Three honest numbers
L is how light a colour looks (0–100%), C is chroma — grey to vivid — and H is its angle on the colour wheel.
Scroll: hue sweeps the whole wheel while L holds at 72% — and the colour never gets brighter or darker. Numbers that hold, hold the experience. Everything on this page follows from that.
Same lightness, every hue
The same sweep, twice: OKLCH left, HSL right, identical numbers. HSL blares at yellow and sinks at blue — its “lightness” isn't.
In the strips below, the OKLCH row sits level; the HSL row is a piano keyboard. This is why HSL palettes need hand-tweaking and OKLCH palettes come out even.
Shades without drift
One hue, light to dark — the move behind every 50–950 design-system scale.
OKLCH steps evenly and keeps the hue on-brand all the way down. HSL bunches in the mid-tones and muddies at the ends. The Forge builds whole scales on this property.
Beyond sRGB
Chroma climbs. The meter shows where sRGB — the ceiling of every hex code — runs out and Display-P3 (hatched) takes over. Watch the footer: the ✓ marks flip as the colour outgrows each gamut.
OKLCH can name colours hex can't. Wide-gamut screens keep gaining saturation past the sRGB line; older screens stop — so the app ships hex fallbacks behind @supports.
One slider, four colour models
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.
The colour-model family
- RGB / HEX
- Channels of light in sRGB — how screens work, but unintuitive to adjust.
- HSL
- Hue, saturation, lightness in sRGB. Friendlier than RGB, but “lightness” isn’t perceptual.
- HSB / HSV
- Hue, saturation, brightness — a sibling of HSL; brightness tops out at full colour, not white.
- HWB
- Hue plus whiteness and blackness — another sRGB reparametrisation (CSS hwb()).
- Lab (CIELAB)
- Perceptual and device-independent; the basis of lch(), but predicts blues badly.
- LCH
- Polar Lab — lightness, chroma, hue. Intuitive, but inherits Lab’s blue-shift bug.
- OKLab
- A better perceptual space (Björn Ottosson, 2020) that fixes Lab’s hue & lightness errors.
- OKLCH
- Polar OKLab — what we build on. Perceptual, predictable, wide-gamut.
- color()
- CSS function to write any space directly, including wide-gamut display-p3 and rec2020.
Short version: rgb / hsl / hsb / hwb all live in sRGB; lab / lch are perceptual but turn blue purple; oklab / oklch are the “okay” versions that fix it.
Gamuts & displays
sRGB is the long-standing web baseline. Display-P3 is roughly 25% larger than sRGB, and Rec.2020 is larger still — the UHD/HDR target that few displays fully cover yet.
Wide gamut isn't exotic any more: Apple has shipped P3 across Mac, iPhone and iPad since 2015–2016, and Chrome's team notes that most modern devices are now wide-gamut, high-definition-colour ready. CSS color() and the color-gamut media query make those colours usable on the web today.
This matters because OKLCH can address P3 and Rec.2020 colours that hex and rgb()simply can't describe — and the gamut badge throughout this app tells you exactly when a colour needs a wider screen.
sRGB is the one gamut you can assume everyvisitor can see, so treat it as your floor. There's no reliable public figure for how many people browse on P3 — wide gamut is standard on Apple devices (Mac/iPhone/iPad since ~2016) and most flagship phones and creative monitors, but plenty of laptops and budget screens are still close to sRGB. The safe approach: make every colour meaningful in sRGB, then use P3 as progressive enhancement — ship an sRGB hex fallback and only reach into P3 inside @supports (color: oklch(0 0 0)) (the Export tab generates exactly this). For scale: sRGB covers ~35% of the CIE-1931 space and P3 is ~25% larger.
- Apple — wide-colour (P3) Retina displays (“25% larger colour space”), 2015 ↗
- Chrome for Developers — High-definition CSS color guide ↗
- W3C — CSS Color Module Level 4 ↗
Note: exact gamut “percentage of visible colour” figures vary by measurement method, so we quote the relationships (P3 ≈ 25% larger than sRGB; Rec.2020 larger again) rather than a single contested number.
Designing for colour-vision deficiency
Roughly 1 in 12 men and 1 in 200 women have a colour-vision deficiency — about 300 million people worldwide, with deuteranomaly (reduced green sensitivity) the most common type. Switch the simulation and watch red, green and amber converge: palettes that rely on hue alone to carry meaning can collapse. OKLCH helps because you can hold a reliable lightnessdifference between roles, which survives when hue cues don't. Source: Colour Blind Awareness ↗