Using the converter
Paste a hex code such as #FF8800. The answer is an oklch() value you can paste into CSS, with the lightness as a percentage, then the chroma, then the hue in degrees.
rgb(), hsl() and colour names work too. The chroma has five decimal places so that converting back gives exactly the same hex code, which this page checks for every one of the 16,777,216 six-digit codes.
From hex to OKLCH
Split the hex code into red, green and blue and divide each by 255. Undo the sRGB gamma: a value c up to 0.04045 becomes c ÷ 12.92, and a larger one becomes ((c + 0.055) ÷ 1.055)^2.4. This gives linear light.
Ottosson's first matrix mixes the three into l, m and s, roughly the responses of the eye's three kinds of cone. Take the cube root of each, then a second matrix gives Oklab: L for lightness, a from green to red, b from blue to yellow. OKLCH is the same thing in polar form. Chroma C = √(a² + b²), and hue h = atan2(b, a) in degrees.
A worked example
#FF8800 is rgb(255, 136, 0), or 1, 0.5333 and 0. Undoing the gamma gives 1, 0.2462 and 0. The first matrix gives l = 0.5443, m = 0.3795 and s = 0.1577, and their cube roots are 0.8165, 0.724 and 0.5402.
The second matrix turns those into L = 0.7442, a = 0.1001 and b = 0.151. Chroma is √(0.1001² + 0.151²) = 0.1812, and the hue is atan2(0.151, 0.1001) = 56.46°. The result is oklch(74.42% 0.18117 56.46).
Common colours in OKLCH
| Colour | Hex | OKLCH |
|---|---|---|
| Red | #FF0000 | oklch(62.8% 0.25768 29.23) |
| Orange | #FFA500 | oklch(79.27% 0.17103 70.67) |
| Yellow | #FFFF00 | oklch(96.8% 0.21101 109.77) |
| Lime | #00FF00 | oklch(86.64% 0.29483 142.5) |
| Green | #008000 | oklch(51.98% 0.17686 142.5) |
| Cyan | #00FFFF | oklch(90.54% 0.15455 194.77) |
| Blue | #0000FF | oklch(45.2% 0.31321 264.05) |
| Navy | #000080 | oklch(27.11% 0.18789 264.05) |
| Purple | #800080 | oklch(42.09% 0.19345 328.36) |
| Magenta | #FF00FF | oklch(70.17% 0.32249 328.36) |
| Pink | #FFC0CB | oklch(86.77% 0.07354 7.09) |
| Brown | #A52A2A | oklch(48.06% 0.15966 25.56) |
| White | #FFFFFF | oklch(100% 0 0) |
| Silver | #C0C0C0 | oklch(80.78% 0 0) |
| Grey | #808080 | oklch(59.99% 0 0) |
| Black | #000000 | oklch(0% 0 0) |
Why OKLCH
OKLCH is built on Oklab, which Björn Ottosson published in December 2020 to predict how light, how colourful and what hue a colour looks. Equal steps in its lightness look like equal steps to the eye, which HSL does not manage.
In HSL, pure yellow #FFFF00 and pure blue #0000FF both have 50% lightness, though the yellow looks far brighter. In OKLCH the yellow is 96.8% and the blue 45.2%. That is why design systems use oklch() to build palettes where every colour at the same lightness has the same contrast with text.
Reading the three numbers
Lightness runs from 0% for black to 100% for white. Chroma starts at 0 for a grey and has no fixed top. In sRGB it reaches about 0.32, for magenta, and CSS treats 0.4 as 100%. Hue is an angle, with pinks near 0°, reds near 30°, yellows near 110°, greens near 140°, cyans near 195° and blues near 265°.
The hue angles are not the same as in HSL. Red is 0° in HSL but 29° in OKLCH, and blue is 240° in HSL but 264° in OKLCH.
Questions
Do all browsers support oklch()?
oklch() is part of CSS Color Level 4, and current versions of the main browsers support it. Keep a hex fallback before it for older ones.
Why five decimal places for chroma?
With four, a few hundred bright colours with one channel near 0 come back one step off. With five, every hex code converts back exactly.
What is the difference between Oklab and OKLCH?
They are the same colours. Oklab uses a and b on two axes, and OKLCH turns them into a distance (chroma) and an angle (hue), as HSL does for RGB.
Sources
Added and reviewed . What's new