OKLCH to HEX
Turn an OKLCH colour into a hex code for tools that do not speak modern colour syntax yet.
- HEX
- #3b5bfd
- RGB
- rgb(59 91 253)
- HSL
- hsl(230.1 97.98% 61.18%)
- OKLCH
- oklch(0.5546 0.2416 268.26)
You design the palette in OKLCH because it behaves, then discover the thing you are exporting to only takes hex. This is that step. Be aware it is lossy in one direction: OKLCH can describe colours no sRGB screen can show, and those get clamped to the nearest channel values rather than refused.
How it is calculated
a = C · cos(H), b = C · sin(H) → OKLab → CIE XYZ (D65) → linear sRGB → gamma encode → hex
Chroma and hue are first turned back into the two OKLab axes, then the fixed matrices carry the colour to XYZ and on to linear-light sRGB. The gamma transfer function re-encodes each channel before it is rounded to a byte and written in hex.
Questions people ask
- Why did my vivid colour come back duller?
- Because it was outside the sRGB gamut. OKLCH lets you name chroma that no ordinary screen can produce; converting to hex has to clamp it into range, and the excess is simply lost.
- Can I write lightness as a percentage?
- Yes, oklch(55% 0.22 277) and oklch(0.55 0.22 277) are read the same way. The percentage form is just the number multiplied by a hundred.
- How do I know whether a colour will survive the trip?
- Convert it and convert it back. If the hex code returns to the OKLCH you started from, it was in gamut; if the chroma comes back lower, it was not.
Related tools
HEX to OKLCH
Convert a hex colour to OKLCH, the perceptual colour space where equal changes in lightness actually look equal.
HSL to HEX
Turn hue, saturation and lightness into a hex code — useful when a colour was picked by feel and now has to go into a stylesheet or a design file.
RGB to HEX
Turn red, green and blue channel values into the hex code stylesheets expect, with alpha where you need it.
Found a problem, or want more?
A number that disagrees with its source is a defect, not a rounding preference.
What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.
Opens your mail app with the page and tool already filled in.