OKLCH Explained: Why It's the Future of CSS Color

Guide · Updated 2026-07-28 · Yexla Team

OKLCH is OKLab expressed as Lightness, Chroma and Hue — the most designer-friendly notation modern CSS offers. Equal L values genuinely look equally light across all hues, which makes palette scales, hover states and contrast reasoning finally predictable. Syntax: color: oklch(0.65 0.19 286);

Why design systems are switching

1. Honest lightness: build a 100–900 scale by stepping L, and every hue's 500 looks equally weighted — impossible in HSL. 2. Hue-true variation: hover/active states by nudging L never shift hue. 3. Wide gamut: OKLCH addresses colors beyond sRGB — the same notation reaches Display P3 on capable screens. 4. Predictable contrast: L differences roughly track WCAG contrast, so you can design accessible scales by construction.

:root {
  --brand-h: 286;
  --brand: oklch(0.65 0.19 var(--brand-h));
  --brand-hover: oklch(0.58 0.19 var(--brand-h));
  --brand-bg: oklch(0.97 0.02 var(--brand-h));
}

Gotchas

Maximum chroma varies by hue and lightness — oklch(0.9 0.3 286) doesn't exist in sRGB and will be gamut-mapped; keep chroma modest for light/dark extremes. Browser support is universal in current versions; add sRGB fallbacks only for legacy audiences. Convert your palette now: HEX to OKLCH, OKLCH to HEX, RGB to OKLCH.

Frequently asked questions

What do the three OKLCH numbers mean?

Lightness (0–1, perceptual), Chroma (0 ≈ gray upward to ~0.37 at the sRGB edge), and Hue (0–360°).

Is OKLCH supported in all browsers?

Yes — Chrome, Edge, Safari and Firefox have all shipped oklch(). Provide HEX fallbacks only if you support very old browsers.

Why use OKLCH instead of HSL?

HSL's lightness is fake — hues differ wildly in apparent brightness at the same L. OKLCH's L is perceptual, making scales, states and contrast predictable.

Can OKLCH express colors outside sRGB?

Yes — it's a notation over the full visible range; browsers gamut-map to what the display supports, unlocking P3 on modern screens.