Tool Arsenal All tools

OKLCH to HEX

Turn an OKLCH colour into a hex code for tools that do not speak modern colour syntax yet.

HEX#3b5bfd
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.

Source: W3C CSS Color Module Level 4 — conversion from OKLCH through OKLab and CIE XYZ (D65) back to sRGB, with gamma encoding applied to the linear-light channels

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.

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.

Write to us

Opens your mail app with the page and tool already filled in.

Related tools

color-converterColor

HEX to OKLCH

Convert a hex colour to OKLCH, the perceptual colour space where equal changes in lightness actually look equal.

color-converterColor

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.

color-converterColor

RGB to HEX

Turn red, green and blue channel values into the hex code stylesheets expect, with alpha where you need it.