OKLCH

The three components

L — Perceptual lightness

Lightness ranges from 0 (black) to 1 (white). Unlike HSL's L, this lightness value is designed so that a given value produces approximately the same perceived brightness regardless of hue. Yellow at 80% L and blue at 80% L will both look similarly light.

C — Chroma

Chroma is how vivid or saturated the color is. It ranges from 0 (gray) up to a maximum that depends on the hue and lightness — some hues can reach chroma 0.3+ in sRGB, others cap out lower. Higher chroma means a more vivid, saturated color.

H — Hue

Hue is an angle in degrees, from 0 to 360. It uses the same convention as HSL: 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta.

Why perceptual uniformity matters

In HSL, changing the L value does not produce a consistent visual change across different hues. A 50% yellow looks far brighter than a 50% blue. This makes HSL unreliable for building scales where each step should feel evenly spaced.

OKLCH fixes this. It was designed so that equal numeric changes produce equal visual changes. This is why modern design systems generate shade scales in OKLCH — the resulting 50, 100, 200 … 950 scale actually looks evenly distributed rather than bunched at one end.

How OKLab and OKLCH relate

OKLab and OKLCH are two views of the same color space. OKLab is Cartesian — it uses L, a and b axes like CIE Lab. OKLCH is polar — it uses lightness, chroma and hue, which is more intuitive for designers.

OKLab:  (L, a, b)       — Cartesian
OKLCH:  (L, C, H)       — Polar

a = C × cos(H)
b = C × sin(H)

The two forms describe the same color. OKLab is easier to interpolate; OKLCH is easier to reason about for palettes.

Practical syntax in CSS

/* Modern OKLCH syntax */
color: oklch(53% 0.24 273);

/* With alpha */
color: oklch(53% 0.24 273 / 0.5);

/* Perceptual scale — one hue, varying lightness */
background: oklch(95% 0.03 273);
background: oklch(80% 0.08 273);
background: oklch(60% 0.16 273);
background: oklch(40% 0.18 273);
background: oklch(20% 0.14 273);

Why OKLCH is becoming a standard

• Even lightness across hues. The same L value looks equally bright on yellow, blue or pink.
• Independent hue. Rotating H changes the hue without shifting perceived lightness or saturation.
• Better gradients. Interpolating in OKLCH avoids the muddy mid-tones common in sRGB and HSL gradients.
• Native CSS support. Supported in all modern browsers since 2023, no build tools needed.
• Better contrast reasoning. Lightness in OKLCH correlates closely with perceived contrast, making accessible scales easier to design.

Practical examples

Building a scale

A typical Tailwind-style scale in OKLCH varies L from 95% down to 15% while chroma caps at 100% of the hue's available range.

Rotating hue for a palette

To build an analogous palette, keep L and C constant and vary H by ±30°.

Accessible contrast

Foreground and background colors are chosen so their L values differ by enough to reach the target contrast ratio.

Continue reading

Frequently asked questions