HSL to OKLCH Converter

How HSL to OKLCH conversion works

HSL (Hue, Saturation, Lightness) is the cylindrical color model most CSS developers already know, but its lightness axis is not perceptually uniform — two colors with the same L value can look very different in brightness. OKLCH (Lightness, Chroma, Hue) fixes this by building on the OKLab color space, so equal steps in L, C, or H correspond to equal perceived changes in color. It is natively supported in modern CSS via the oklch() function.

To convert, this tool first turns HSL into sRGB, linearizes it by removing the sRGB gamma curve, transforms it into LMS cone response space, applies a cube root, and finally derives OKLab and then OKLCH (polar) coordinates from the result. Every HSL color is inside the sRGB gamut, so the OKLCH output never needs clamping.

Need the reverse direction or other formats? Try OKLCH to HSL, the full OKLCH Color Converter, or HSL to HEX.