TechCompare LogoTechCompare

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

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.

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).

By TechCompare · Updated

Format
HSL
Example: #3B82F6
Category
Modern Formats
Color knowledge base
This exact #3B82F6 swatch, pre-loaded. Convert to every format, adjust the HSL, or pair it against a second color.
Edit in the full tool

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

The syntax oklch(L C H) maps to lightness (0 to 1, or 0% to 100%), chroma (typically 0 to 0.4 for screen colors), and hue (0-360 degrees, same angle as HSL), so the mental model transfers from HSL in minutes. The structural upgrade is that the same numeric step produces the same perceived change across every hue, so an OKLCH palette generated by varying L and C at a fixed H looks evenly spaced where HSL's 50% lightness reads bright at yellow and dark at blue. Add the wide-gamut capability, OKLCH can express colors in Display P3 and Rec. 2020 beyond sRGB that the browser will clip or map, and the result is a token-generation tool that actually works for dark mode variants, accessibility-driven palettes, and HDR-aware CSS without re-tuning across hue ranges.

More Color scenarios

Hex to RGB
Hex color codes like #3B82F6 are just RGB values written in hexadecimal.
View details ➜
RGB vs CMYK
RGB (Red, Green, Blue) is an additive color model for screens: you start with black and add colored light to create colors.
View details ➜
HSL color model
HSL (Hue, Saturation, Lightness) describes colors the way people naturally think about them rather than the way screens produce them.
View details ➜

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.
What's the syntax of oklch() in CSS?
`oklch(L C H)` or `oklch(L C H / alpha)`. L is lightness from 0 to 1 (or 0% to 100%), C is chroma typically 0 to 0.4 for screen colors, and H is the hue angle 0-360 degrees. The alpha value is optional and ranges 0-1. All modern browsers support this syntax as of 2026.
Does OKLCH support wide-gamut colors like Display P3 and Rec. 2020?
Yes, OKLCH can represent any color in the CIE CAM02 color space, which extends beyond sRGB, Display P3, and Rec. 2020. This means oklch() can describe colors your display can't show, and the browser will clip or map them appropriately. This is one reason OKLCH is preferred for HDR-aware future-proof CSS.

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 readable output and error detection.

Use tool ➜

Aspect Ratio Visualizer

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

Use tool ➜