How do I convert OKLCH to hex?

The OKLCH triple is converted to linear sRGB through the OKLab matrices, then gamma-encoded and rounded to two hex digits per channel. Values outside the sRGB gamut are clipped, which is why a very high chroma can produce a hex code that looks flatter than the CSS value.

Why use OKLCH instead of HSL?

Because its lightness is perceptual: a yellow and a blue at the same L value look equally bright, and 10% steps in lightness look like 10% steps. HSL lightness does not behave that way, which makes consistent ramps much harder.

What is a realistic chroma value?

Most sRGB colors sit below 0.3, with near-neutrals under 0.05. Above roughly 0.32 you are usually outside sRGB and into P3 territory, where the hex conversion clips.

OKLCH Color Converter

Set lightness, chroma and hue to get a hex code — or paste a hex code to read its OKLCH values.

Hex code (optional)Lightness L (%)Chroma CHue H (°)

#7844f0

Hex

#7844f0

CSS oklch()

oklch(55% 0.24 290)

RGB

rgb(120, 68, 240)

HSL

hsl(258, 85%, 60%)

OKLCH (re-read)

oklch(55.1% 0.24 290)

OKLCH is CSS Color 4's perceptually uniform color space. Its lightness axis matches how eyes actually perceive brightness, and equal steps in chroma look like equal steps in saturation — which is why whole design systems have moved their palettes to it. The catch is that OKLCH is a different coordinate system to hex, so this converter translates between the two in both directions and shows where a value falls outside the sRGB gamut.

Frequently asked questions

oklch(L C H) takes a lightness percentage, a chroma number (0 to about 0.37 for sRGB colors) and a hue angle. It is supported in all current browsers and can express the P3 colors that hex cannot.

Good to know

OKLCH is OKLab expressed in cylindrical form — lightness, chroma, hue.
Lightness 0% is black and 100% is white in both OKLCH and LCH-style models.
Hex codes cannot represent P3 colors, so a highly chromatic OKLCH value clips when converted.

Tools that pair with OKLCH Color Converter

OKLCH Color Converter is one of 33 single-page tools in this workspace. These are the ones that carry the job on — the color value moves between them, so nothing gets retyped or re-uploaded.

Hex to HSL ConverterRead the hue, saturation and lightness behind a hex code.Color PickerPick, fine-tune and copy any color in HEX, RGB or HSL.Contrast CheckerCheck WCAG AA and AAA contrast ratios instantly.