OKLCH in CSS: A Practical Guide to Perceptual Web Colors

What OKLCH represents

OKLCH describes a color with perceptual lightness, chroma and hue. Lightness runs from black to white, chroma controls intensity, and hue uses an angle. This separation makes intentional color changes easier than editing RGB channels.

Write OKLCH in CSS

The syntax is oklch(L C H). A practical declaration is color: oklch(58.5% 0.204 277.1). Keep a HEX fallback before it when your product must support environments that only accept sRGB.

• background: #6366F1;
• background: oklch(58.5% 0.204 277.1);
• Use @supports when a component needs a separate fallback strategy.

Build more consistent color scales

For a tint scale, hold hue relatively stable and change lightness in deliberate steps. Reduce chroma near very light and very dark endpoints because highly saturated extremes can fall outside the display gamut.

Understand gamut limits

OKLCH can describe colors that an sRGB display or HEX value cannot reproduce. A converter may clip those channels to the closest available sRGB result. Treat the gamut warning as useful information, not as a conversion error.

Use OKLCH with accessibility checks

Perceptual lightness helps organize a palette, but it does not replace WCAG contrast testing. Test the final foreground and background values, including hover, focus, disabled and dark-mode states.