OKLCH in CSS: Lightness, Chroma and Gamut

OKLCH expresses Oklab in cylindrical coordinates: lightness, chroma and hue angle. It is useful for exploring a tone scale while holding hue approximately stable. It is not a contrast ratio, and a fixed lightness difference does not certify readable text.

Read the CSS units correctly

.accent {
  color: #6366F1;
  color: oklch(60% 0.20 280);
}

The first declaration is an explicit fallback; the second is a separate example color, not a claim that these two representations are identical. In CSS, 60% lightness corresponds to 0.6. Chroma 0.20 is a raw number. Color Match stores lightness on a 0-100 scale and chroma multiplied by 100 internally, then divides chroma for CSS output.

Distinguish appearance from luminance

Oklab was designed to improve perceptual behavior compared with simple RGB manipulations. HSL lightness is based on RGB extrema, so two fully saturated HSL colors with the same L can be very different in contrast. Use the two examples below to see why a numeric lightness label alone is insufficient.

Keep the target gamut explicit

Some OKLCH coordinates fall outside sRGB. This tool converts to 8-bit sRGB for its HEX values and previews; clipping or conversion can alter hue and chroma. Do not describe that output as preservation of every Display P3 color. For wide-gamut production, inspect the browser rendering and retain the intended profile in your handoff.

Try a controlled scale

Open the converter, enter a known HEX value, and inspect its calculated OKLCH form. Change one dimension at a time in your CSS, measure each finished foreground/background pair, and save both the requested value and the actual fallback.