HEX to OKLCH

OKLCH answers the complaint people have about HSL: that its lightness lies. In HSL a yellow and a blue can both claim 50 percent lightness while one visibly glows and the other sinks. OKLCH is built on OKLab, a space tuned so that a given change in the lightness number corresponds to roughly the same perceived change whatever the hue — which is why palettes built in it stay even.

How it is calculated

sRGB → linear-light sRGB → CIE XYZ (D65) → OKLab → L, C = √(a² + b²), H = atan2(b, a)

The hex value is first undone from its gamma encoding, then carried through XYZ into OKLab by two fixed matrices with a cube root between them. The last step is only a change of coordinates: chroma is the distance from the neutral axis and hue is the angle around it.

Source: W3C CSS Color Module Level 4 — conversion from sRGB through linear-light sRGB and CIE XYZ (D65) to OKLab, then to the polar OKLCH form; lightness serializes as a number, so oklch(56.43% 0.0900 123.40) becomes oklch(0.5643 0.09 123.4)

Questions people ask

Why is lightness written as 0.55 rather than 55%?

Both are valid input, but the specification serializes it as a number: oklch(56.43% 0.0900 123.40) is written back as oklch(0.5643 0.09 123.4). This tool follows that.

What range does chroma have?

There is no fixed maximum. Chroma is an open scale, and how far it can go before leaving the sRGB gamut depends on the hue and lightness — around 0.37 at best, far less for pale or very dark colours.

Why is hue 0 for white and black?

They sit on the neutral axis, where chroma is zero and the angle is undefined. With no chroma the hue has no effect on the colour at all.

Related tools