What is OKLCH?

OKLCH is a color model introduced in the CSS Color 4 specification. It describes a color with three intuitive channels plus alpha:

• L — Lightness (0–1): how light the color appears.
• C — Chroma (0–~0.4): how colorful/saturated it is.
• H — Hue (0–360): the hue angle, like a color wheel.

color: oklch(0.62 0.21 259);

Why it exists

OKLCH is the cylindrical form of Oklab, a color space engineered to be perceptually uniform: equal numeric steps look like equal visual steps. That is the property older models like HSL lack — in HSL, a yellow and a blue at the same lightness look nothing alike in brightness.

What that buys you

• Predictable lightness for text and backgrounds.
• Even color scales — 50–950 ramps that don’t go muddy in the middle.
• Hue stability when you lighten or darken a brand color.
• Wide-gamut support for Display P3 and Rec.2020, with clean sRGB fallbacks.

Try it

Paste any color into the HEX to OKLCH converter, or build a full scale with the palette generator.