Learn OKLCH

A practical checklist for converting an existing stylesheet's colors to OKLCH without breaking anything.

OKLCH makes contrast easier to reason about — but it does not replace real WCAG contrast checks. Here's how to combine them.

oklch() is supported in every current major browser. Here's how to ship it safely with an sRGB fallback.

Why you should reduce chroma in OKLCH instead of clipping RGB channels when a color falls outside a display's gamut.

HSL's lightness lies — it varies wildly across hues. OKLCH's lightness is perceptual, so equal numbers look equally light.

OKLCH is a modern CSS color model built on perceptual uniformity — Lightness, Chroma and Hue you can actually reason about.

Tailwind v4 ships its default palette in OKLCH and defines colors as @theme tokens. Here's why, and how to add your own.