How to Use OKLCH Colors in CSS (2026)
Master the OKLCH color space for perceptually uniform colors. Better gradients, consistent palettes, and wider gamut support.
- Master the OKLCH color space for perceptually uniform colors.
- Why OKLCH Is Better Than HSL.
- OKLCH Syntax and Values.
- Practical Uses for OKLCH.
- Browser Support and Fallbacks.
Why OKLCH Is Better Than HSL
OKLCH represents colors the way human eyes actually perceive them — something HSL and RGB fail at. In HSL, two colors with the same lightness value (say yellow and blue at L:50%) look dramatically different in perceived brightness because HSL lightness is mathematically uniform, not perceptually uniform. OKLCH fixes this: the L channel produces colors that actually look equally bright when set to the same value. This means you can generate palettes where every shade feels balanced, create smooth gradients without muddy midpoints, and adjust lightness without unexpected hue shifts.
OKLCH Syntax and Values
The oklch() function takes three values: L (lightness, 0 to 1), C (chroma/saturation, 0 to ~0.4), and H (hue angle, 0 to 360). Example: oklch(0.7 0.15 145) is a medium-lightness green. The optional alpha channel works like any CSS color: oklch(0.7 0.15 145 / 0.5). You can use CSS relative color syntax to manipulate channels: oklch(from var(--brand) l calc(c * 0.5) h) creates a desaturated version. The Color Converter handles translations between OKLCH and other formats.
Practical Uses for OKLCH
Use OKLCH for design system color scales — set a fixed hue, then vary lightness from 0.95 to 0.15 in even steps. The results will be perceptually uniform, unlike HSL scales where some steps look huge and others identical. Use it for accessible color pairs: text at oklch(0.2 0.02 h) and background at oklch(0.95 0.02 h) guarantees high contrast in any hue. Use it for better gradients — oklch gradients through complementary colors don’t pass through muddy gray the way RGB gradients do. Use color-mix(in oklch, ...) for smooth, natural-looking color mixing.
Browser Support and Fallbacks
OKLCH is supported in all modern browsers: Chrome 111+, Firefox 113+, Safari 15.4+, Edge 111+. For older browser fallback, define colors twice: first in hex as fallback, then in oklch as override. CSS custom properties make this clean: --brand: #3B82F6; --brand: oklch(0.62 0.2 260);. Browsers that don’t understand oklch ignore the second declaration. The color() function with display-p3 offers wider gamut without OKLCH, but OKLCH provides both wider gamut and perceptual uniformity — it’s the better long-term choice.