Colour

Oklab and OkLCh

Widely availablesince Nov 2025

Replaces: HSL, whose "lightness" is not the lightness an eye sees. Equal steps in OKLCH look like equal steps, so a tint ramp does not go muddy in the middle.

See it working

hsl, lightness 50%

oklch, lightness 0.7

The syntax

--brand-500: oklch(0.55 0.22 275);
--brand-300: oklch(0.75 0.22 275);   /* same hue and chroma, lighter */

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

.dm-ok { display: grid; gap: 6px; }
.dm-ok span { font-family: ui-monospace, monospace; font-size: 11.5px; color: #3d4450; }
.dm-ok-row { display: grid; grid-template-columns: repeat(6, 1fr); height: 44px; border-radius: 9px; overflow: hidden; margin-bottom: 8px; }
/* Six hues at the SAME hsl lightness: yellow glares, blue sinks. */
.dm-ok-hsl i:nth-child(1) { background: hsl(0 90% 50%); }   .dm-ok-hsl i:nth-child(2) { background: hsl(60 90% 50%); }
.dm-ok-hsl i:nth-child(3) { background: hsl(120 90% 50%); } .dm-ok-hsl i:nth-child(4) { background: hsl(180 90% 50%); }
.dm-ok-hsl i:nth-child(5) { background: hsl(240 90% 50%); } .dm-ok-hsl i:nth-child(6) { background: hsl(300 90% 50%); }
/* The same six hues at the same OKLCH lightness: they sit level. */
.dm-ok-lch i:nth-child(1) { background: oklch(0.7 0.15 25); }  .dm-ok-lch i:nth-child(2) { background: oklch(0.7 0.15 100); }
.dm-ok-lch i:nth-child(3) { background: oklch(0.7 0.15 145); } .dm-ok-lch i:nth-child(4) { background: oklch(0.7 0.15 200); }
.dm-ok-lch i:nth-child(5) { background: oklch(0.7 0.15 270); } .dm-ok-lch i:nth-child(6) { background: oklch(0.7 0.15 330); }

For browsers without it

For older browsers declare a hex first and the oklch() value on the next line: an engine that cannot parse the second keeps the first.