OKLCH / Wide-Gamut Palette
also known asOKLCH color · Display-P3 palette · wide-gamut color · perceptual color space
A color system using the OKLCH color space (perceptually uniform) and Display-P3 gamut for vibrant, accessible color.
OKLCH is a color space where equal numerical changes produce equal perceived changes — unlike HSL or RGB, where the same lightness value can look very different across hues. This makes it ideal for design systems: lock the lightness (L) and chroma (C), rotate the hue (H), and you get a palette where every color reads at the same brightness.
Wide-gamut (Display-P3) covers ~25% more colors than sRGB, especially in vivid reds, greens, and oranges. Modern browsers and screens render it natively; the same value falls back to its closest sRGB equivalent on older displays.
The combination — OKLCH-defined tokens served as `oklch()` CSS values — produces palettes that feel modern, vibrant, and consistent across light and dark mode without manual tweaking.
- Any modern design system being built from scratch in 2025+
- Brands that need vivid color (sports, music, food, fashion)
- Products targeting modern devices (mobile + recent monitors)
- Legacy products with sRGB-only design tooling
- +Define tokens as `oklch(L C H)` and let the browser do gamut fallback
- +Lock L and C across a hue ramp — only rotate H — for consistent palettes
- +Pair with a `color-gamut` media query if you want to enhance for P3 devices
- −Don't mix HSL and OKLCH in the same system — convert everything
- −Don't assume P3 colors look the same on sRGB screens — preview both
People also ask
Why OKLCH instead of HSL?
HSL is mathematically simple but perceptually broken — yellow at 50% lightness looks much brighter than blue at 50%. OKLCH is perceptually uniform, so equal lightness values look equally bright across all hues.
Do all browsers support OKLCH?
All evergreen browsers (Chrome, Edge, Safari, Firefox) support `oklch()` and `color(display-p3 …)`. For older browsers, provide an sRGB fallback via the CSS `@supports` query or use a color tooling library.