Color Playground

OKLCH Color Explorer

oklch() defines colors with lightness, chroma, and hue. Unlike hsl(), equal lightness values look equally bright across every hue, so your palette stays consistent when you change the color.

L — Lightness 0.62

Perceived brightness. 0 is black, 1 is white. Changing it here doesn't shift the hue.

C — Chroma 0.19

Colorfulness. 0 is gray, 0.37 is the most vivid. The track shows the gray-to-vivid range for the current hue.

H — Hue 250°

The color angle. 0° is red, 120° is green, 240° is blue. It wraps back around at 360°.

Copy and use this color

color: oklch(0.62 0.19 250);

Why not HSL?

Same lightness steps, same hue (120°, green). OKLCH holds the green. HSL doesn't.

oklch()

hsl()

OKLCH: brightness shifts, green stays green. HSL: the same lightness steps produce yellow-green on one end and teal on the other. The hue drifts because HSL lightness isn't perceptually uniform.

oklch() Browser Support

Widely available Since 2023 90% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

111+

113+

15.4+

111+

oklch() Browser Support

References

Perceptually uniform colors with oklch

New CSS drops.