A brief history of CSS color
CSS colors have evolved from named colors and HEX values, to rgb(), then hsl() in CSS3. Each generation brought more control. The latest addition — oklch() — is a step-change improvement that all designers and developers should understand.
HSL recap
hsl(hue saturation% lightness%) was a major improvement over RGB because you can intuitively understand and adjust individual dimensions:
- Change hue → rotate around the color wheel
- Change saturation → more or less vivid
- Change lightness → darker or lighter
The problem: HSL is not perceptually uniform. The same lightness value produces colors that look completely different in terms of perceived brightness. A yellow at L=50% looks much brighter than a blue at L=50%. This makes it surprisingly hard to build consistent UI scales.
What is OKLCH?
oklch(lightness chroma hue) is built on OKLab, a perceptual color space explicitly designed to be uniform — meaning equal numeric changes produce equal-looking perceptual changes.
- L (0–1) — perceptual lightness. L=0.5 looks equally bright across all hues.
- C (0–~0.4) — chroma (like saturation, but perceptually linear). 0 = gray, higher = more vivid.
- H (0–360°) — hue angle, same concept as HSL.
Why OKLCH wins for UI design
1. Perceptually uniform lightness scales
When you build a gray scale or a color palette in OKLCH, incrementing the L value produces steps that look equally spaced. In HSL, the same change in L produces dramatically different visual jumps depending on the hue.
2. Consistent chroma across hues
In HSL, "50% saturation" on red looks vividly intense while the same value on yellow looks nearly desaturated. OKLCH's chroma value is consistent — C=0.15 looks equally vivid whether the hue is red, blue, or green.
3. Predictable color manipulation
Because the dimensions are perceptually uniform, you can write algorithms that reliably generate:
- Lighter/darker variants of a color (just adjust L)
- Tints with consistent vibrancy (just adjust C)
- Color complements and harmonics (adjust H by fixed degrees)
This is why LiveTheme's random theme generator uses OKLCH internally — it produces reliable vibrancy across all color categories.
4. Wider gamut support
OKLCH can represent colors in the P3 wide gamut (used by modern displays), accessing more vivid colors than HSL/HEX which are confined to sRGB.
Browser support
As of 2025, oklch() is supported in all major browsers (Chrome, Firefox, Safari, Edge). You can use it in production today, with optional HEX fallback for older environments via @supports.
/* Fallback for old browsers */
color: #7c3aed;
/* Modern browsers use OKLCH */
@supports (color: oklch(0 0 0)) {
color: oklch(0.5 0.25 290);
}Practical OKLCH cheat sheet
- Light background (light theme): L ≈ 0.95–0.99, C ≈ 0.005–0.02
- Dark background (dark theme): L ≈ 0.08–0.18, C ≈ 0.005–0.03
- Vivid primary button: L ≈ 0.50–0.65, C ≈ 0.18–0.35
- Muted neutral: L ≈ 0.35–0.55, C ≈ 0.0–0.06
- Readable body text on white bg: L ≈ 0.12–0.25, C ≈ 0
Converting between formats
Tools like oklch.com let you convert HEX/HSL to OKLCH. Libraries like culori (used by LiveTheme) handle conversion in JavaScript. CSS's native color() function and color-mix() also accept OKLCH values.
Should I switch from HSL to OKLCH today?
Yes — especially for any new design system or color palette. Use OKLCH for authoring and generating colors, HEX/RGB for final delivery if you need maximum compatibility. The LiveTheme editor uses OKLCH under the hood for all generated and randomized themes.