Color Playground

OKLCH Color Explorer

Drag the sliders to explore each OKLCH axis. Lightness, chroma, and hue, each isolated so you can feel what they do.

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.

Browser support Widely available 90% global usage

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+

Related snippet

Perceptually uniform colors with oklch

New CSS drops.