TechCompare LogoTechCompare

What is OKLCH? The perceptually uniform color space replacing HSL in modern CSS

OKLCH (Lightness, Chroma, Hue) is a modern color space designed to be perceptually uniform, meaning that the same numerical change in a value produces roughly the same perceived change in color, regardless of the hue. This fixes HSL's biggest flaw: in HSL, a lightness value of 50% looks very different for yellow (bright) vs blue (dark).

Format
HSL
Example: #3B82F6
Category
Modern Formats
Color knowledge base

Calculator

Back to Home

Color Picker

Pick colors and convert between formats.

239°

How this is calculated

OKLCH landed in all major browsers in 2023-2024 and is now safe for production use in 2026. The syntax in CSS is oklch(L C H) or oklch(L C H / alpha). L (lightness) ranges from 0 to 1 (or 0% to 100%). C (chroma) is the color intensity, typically 0 to 0.4 for screen colors. H (hue) is 0-360 degrees like HSL. The perceptual uniformity means you can generate entire color palettes mathematically: pick a hue, vary lightness and chroma, and every step looks evenly spaced. This is revolutionary for design system token generation.

Verdict

OKLCH is the future of CSS colors. It's supported everywhere, perceptually superior to HSL, and enables programmatic color systems that actually look good. Start using oklch() in new projects today. The learning curve is small if you already understand HSL.

Frequently asked questions

Should I replace all my hex colors with OKLCH?
Not retroactively, but use OKLCH for new color work. It's especially powerful for generating color scales, dark mode variants, and accessible color palettes programmatically.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool ➜

JSON Formatter

Validate, format, and minify JSON data with syntax highlighting.

Use tool ➜

Aspect Ratio Visualizer

Visually compare FOV and width differences between 16:9, 21:9, and 32:9 monitors.

Use tool ➜