Guide

Why use OKLCH in CSS?

OKLCH is a perceptual color model built on Oklab. It gives CSS authors a useful separation between lightness, chroma and hue, making palette work more predictable while retaining access to modern wide-gamut color.

Predictable lightness

OKLCH lightness tracks visual lightness more closely across hues than HSL, which makes scales easier to tune.

Independent controls

Lightness, chroma and hue can be adjusted separately without treating saturation as a percentage of an HSL geometry.

Wide-gamut ready

The same oklch() syntax can describe colors beyond sRGB while still supporting an explicit mapped fallback.

How the channels work

L — Lightness: 0 is black and 1 (or 100%) is white.
C — Chroma: 0 is neutral; larger values are more colorful. The available maximum depends on lightness, hue and gamut.
H — Hue: an angle from 0 to 360 degrees. Hue becomes irrelevant when chroma is zero.

.button {
  background: #2563eb;               /* sRGB fallback */
  background: oklch(0.55 0.22 264);  /* modern color */
}

OKLCH does not replace accessibility testing

Similar OKLCH lightness steps can help shape a coherent scale, but no fixed difference between two L values guarantees WCAG AA or AAA. Contrast must be calculated from the final foreground and background after gamut mapping and alpha compositing.

Use the contrast checker for WCAG results and thegamut visualizer before shipping a wide-gamut color.

A safe migration pattern

Convert the existing value, then compare it in its real interface context.
Keep an sRGB fallback before the OKLCH declaration where legacy support matters.
Gamut-map deliberately instead of clipping RGB channels.
Validate every semantic foreground/background pair with a contrast calculation.

For a deeper implementation walkthrough, read What is OKLCH?,OKLCH vs HSL and thecalculation methodology.