HEX to OKLCH
Convert a hex colour to OKLCH, the perceptual colour space where equal changes in lightness actually look equal.
- HEX
- #6366f1
- RGB
- rgb(99 102 241)
- HSL
- hsl(238.73 83.53% 66.67%)
- OKLCH
- oklch(0.5854 0.2041 277.12)
OKLCH answers the complaint people have about HSL: that its lightness lies. In HSL a yellow and a blue can both claim 50 percent lightness while one visibly glows and the other sinks. OKLCH is built on OKLab, a space tuned so that a given change in the lightness number corresponds to roughly the same perceived change whatever the hue — which is why palettes built in it stay even.
How it is calculated
sRGB → linear-light sRGB → CIE XYZ (D65) → OKLab → L, C = √(a² + b²), H = atan2(b, a)
The hex value is first undone from its gamma encoding, then carried through XYZ into OKLab by two fixed matrices with a cube root between them. The last step is only a change of coordinates: chroma is the distance from the neutral axis and hue is the angle around it.
Questions people ask
- Why is lightness written as 0.55 rather than 55%?
- Both are valid input, but the specification serializes it as a number: oklch(56.43% 0.0900 123.40) is written back as oklch(0.5643 0.09 123.4). This tool follows that.
- What range does chroma have?
- There is no fixed maximum. Chroma is an open scale, and how far it can go before leaving the sRGB gamut depends on the hue and lightness — around 0.37 at best, far less for pale or very dark colours.
- Why is hue 0 for white and black?
- They sit on the neutral axis, where chroma is zero and the angle is undefined. With no chroma the hue has no effect on the colour at all.
Related tools
OKLCH to HEX
Turn an OKLCH colour into a hex code for tools that do not speak modern colour syntax yet.
HEX to HSL
Convert a hex colour into hue, saturation and lightness — the form that makes a colour easy to lighten, darken or desaturate by hand.
HEX to RGB
Convert a hex colour to its red, green and blue channels, including the shorthand and alpha forms defined by the CSS specification.
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.