OKLCH to RGB Converter

OKLCH is a modern CSS color model built from three intuitive parts: lightness (L), chroma (C), and hue (H). Designers and browsers use it because equal numeric steps look evenly spaced to the eye, which is not true of HSL or hex. You still need RGB or hex whenever a tool, framework, or older browser cannot read the oklch() function, and this converter gives you that fallback in one step.

The calculator follows the path defined in CSS Color 4. It first turns OKLCH into OKLab by mapping chroma and hue onto the a and b axes (a equals C times the cosine of the hue, b equals C times the sine). It then expands OKLab into linear sRGB using Bjoern Ottosson's reference matrices, applies the sRGB gamma curve, and scales each channel to 0 to 255 before writing the hex code. The OKLab and linear sRGB values are shown so you can audit every step.

Some OKLCH colors, especially high-chroma ones, sit outside what an sRGB screen can display. When that happens at least one channel falls below 0 or above 1 before clamping, and the converter flags the color as outside the sRGB gamut. It then clamps each channel to the nearest displayable value, so the hex you get is the closest sRGB match rather than an exact reproduction. Lowering the chroma until the flag turns green keeps the hue and lightness you intended.

Enter lightness from 0 to 1, where 0 is black and 1 is white (0.7 is the same as 70% in CSS). Chroma starts at 0 for gray and reaches about 0.37 for the most vivid sRGB colors; this tool accepts 0 to 0.5 so you can explore wider-gamut values too. Hue is an angle from 0 to 360 degrees, the same wheel HSL uses. Any value outside these ranges returns no result.

If the color is inside the sRGB gamut, the round trip is accurate to the nearest 8-bit value, so any difference is only the rounding to whole RGB channels. If the color is outside the gamut, clamping shifts it toward what your screen can show, which can change the chroma or lightness a little. Reduce the chroma until the gamut flag turns green to get an exact match.

Yes, it uses the same OKLab matrices and sRGB transfer function defined in the CSS Color 4 specification, so the RGB values match what a modern browser computes for the same oklch() color. The one difference is that browsers may apply a more advanced gamut mapping for out-of-range colors, while this tool uses straightforward per-channel clamping and clearly tells you when clamping happened.