oklch()
The oklch() function defines a color by perceptual lightness, chroma, and hue in the OKLCH color space.
Syntax
oklch(L C H / A)Examples
:root {
--brand: oklch(0.55 0.18 265);
--brand-soft: oklch(0.95 0.04 265);
}
.btn { background: var(--brand); }
Output
Renders a vivid, wide-gamut brand blue and a matching soft tint with identical hue.
Notes
L is 0 to 1 lightness, C is unbounded chroma (commonly 0 to 0.37), H is hue in degrees. Perceptually uniform: equal L looks equally bright across hues, making it the preferred choice for design systems and accessible palettes in 2026.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 111 |
| firefox | 113 |
| safari | 15.4 |
| edge | 111 |