03 · Converter
OKLCH to HEX converter, perceptual lightness → hex.
OKLCH steps lightness in a way humans perceive as even. Convert it back to a hex code any browser or design tool understands.
OKLCH values
HEX
#834ECF
Guide
What makes OKLCH different
OKLCH describes a color with three numbers that behave the way human vision does. L is perceptual lightness: raise it in equal steps and the color gets lighter in equal-looking steps, which is not true of HSL, where the middle of the range is crowded and the ends are stretched. C is chroma, how far the color sits from neutral gray at that lightness. H is hue, the familiar angle around the wheel. Together they form a cylindrical notation with the same ergonomics as HSL and none of its perceptual distortions.
The practical benefit appears the moment you generate variants. Build a ramp by stepping lightness by 0.05 each time and every step looks equally spaced, so a row of card backgrounds or a chart series stays visually even instead of jumping at one end. Adjusting chroma independently keeps a color from washing out as it lightens — a failure mode that is nearly unavoidable in HSL, where lightness and saturation are entangled.
OKLCH also promises that an in-gamut color written in CSS will render as specified, because browsers convert it to sRGB at paint time. That is exactly why you still need hex: many destinations — design tokens, Figma styles, SVG fills, CMS fields, a paint API on a canvas — do not accept CSS color functions. Converting OKLCH to hex resolves the perceptual notation into the universal six digits.
Using the OKLCH to HEX converter
Enter lightness between 0 and 1, chroma between 0 and about 0.4, and a hue angle from 0 to 360. The hexadecimal code and a full-size swatch update as you type, and the copy button puts the six-digit result on the clipboard for use wherever OKLCH is not supported.
A quick way to find useful values: take the hex code of a color you already like, convert it to OKLCH, note its lightness and chroma, then hold those constant while sweeping the hue. The colors that come out will all sit at the same visual weight, which is how you build a palette that feels level. Raising lightness while trimming chroma produces the pastel family; lowering both gives the deep, desaturated tones that work as surfaces behind text.
Chroma is the value to watch. Around 0.4 the color reaches the edge of what a standard sRGB display can show, and pushing past it does not make the result brighter — the conversion simply clamps to the nearest representable color. If two very different OKLCH inputs yield the same hex, chroma was out of range, and that is the number to bring back down rather than a bug in the conversion.
Frequently asked questions
- How do I convert OKLCH to HEX?
- Convert the OKLCH triple back to a linear-light RGB value through the OKLab matrix, tone-map it into the sRGB range, then write each channel as two hex digits. The converter above does this as you type — enter lightness 0.55, chroma 0.19 and hue 299 and you get #845EC2.
- Why does my OKLCH color not match the hex result?
- If the color is outside the sRGB gamut — usually chroma above roughly 0.4 — it cannot be represented in six-digit hex, so the conversion clamps to the nearest in-gamut color. Lower chroma until the preview looks right; the hex output will then be an honest match.
- Should I ship OKLCH or HEX in production?
- Hex is still the safest shipped value: it works everywhere, from CSS to SVG to CMS fields. OKLCH is better as the notation you author and derive variants in, since its lightness scale is perceptually even. Many teams keep OKLCH in source and compile hex — or both — into the shipped theme.