Using the converter
Paste an oklch() value, such as oklch(65% 0.15 270), or type the three numbers with the lightness first. Lightness can be a percentage or 0 to 1, chroma a number or a percentage of 0.4, and the hue can use deg, turn, rad or grad. An alpha after a slash adds a fourth pair to the hex code.
The Gamut row says whether the colour fits in sRGB, the colours a hex code can hold. If it doesn't, the hex code is the nearest one CSS would choose, and the clipped version is shown for comparison.
From OKLCH to hex
Turn chroma and hue back into Oklab: a = C × cos h and b = C × sin h. Ottosson's inverse matrix gives l, m and s, which are cubed, and a third matrix turns them into linear red, green and blue.
Put the gamma back: a value up to 0.0031308 becomes 12.92 × c, and a larger one 1.055 × c^(1/2.4) − 0.055. If all three are between 0 and 1, multiply by 255, round and write them in hex.
A worked example
For oklch(65% 0.15 270), L = 0.65, a = 0.15 × cos 270° = 0 and b = 0.15 × sin 270° = −0.15. The matrices give linear values of 0.1501, 0.245 and 0.8228, and with the gamma back that's 0.4237, 0.5321 and 0.9177.
All three fit, so times 255 and rounded they are 108, 136 and 234, which is #6C88EA.
Colours outside sRGB
OKLCH can describe colours no hex code can hold. oklch(65% 0.25 270) is the same blue with more chroma, and it comes out as red 0.3475, green 0.4707 and blue 1.146. Blue is over 1, so it is outside sRGB.
Clipping each channel to 0 to 1 gives #5978FF, but clipping can shift the hue and lightness a lot. CSS Color 4 instead keeps the lightness and hue and lowers the chroma, halving the gap each time, until clipping moves the colour by less than 0.02 in Oklab, a just-noticeable difference. Here the chroma ends near 0.209 and the hex code is #6080FF.
A hue wheel at oklch(70% 0.15 …)
| Hue | Hex | Gamut |
|---|---|---|
| 0 | #E7729B | Inside sRGB |
| 30 | #ED7665 | Inside sRGB |
| 60 | #E18528 | Inside sRGB |
| 90 | #C39900 | Just outside sRGB, clipped |
| 120 | #93AB2C | Inside sRGB |
| 150 | #4CB86A | Inside sRGB |
| 180 | #00BBA2 | Outside sRGB, chroma 0.15 mapped to 0.1474 |
| 210 | #00B5CE | Outside sRGB, chroma 0.15 mapped to 0.1406 |
| 240 | #26A9F1 | Inside sRGB |
| 270 | #7A97FB | Inside sRGB |
| 300 | #AD87ED | Inside sRGB |
| 330 | #D179CA | Inside sRGB |
A blue lightness ladder at oklch(… 0.1 250)
| Lightness | Hex | Gamut |
|---|---|---|
| 20% | #00143E | Outside sRGB, chroma 0.1 mapped to 0.0949 |
| 30% | #002E5D | Just outside sRGB, clipped |
| 40% | #124A7B | Inside sRGB |
| 50% | #32669A | Inside sRGB |
| 60% | #4F84BA | Inside sRGB |
| 70% | #6DA3DA | Inside sRGB |
| 80% | #8CC3FC | Inside sRGB |
| 90% | #BAE3FF | Outside sRGB, chroma 0.1 mapped to 0.0725 |
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.
Questions
Why does my browser show a different colour from this hex code?
On a wide-gamut screen a browser can show some oklch() colours outside sRGB directly. The hex code is the closest sRGB colour, the one to use as a fallback.
What happens at lightness 0% or 100%?
CSS Color 4 makes 100% white and 0% black whatever the chroma and hue, and this page does the same.
Is out-of-gamut mapping the same in every tool?
No. Some tools only clip, and some use other methods, so their hex codes can differ by a few steps for colours outside sRGB. This page follows the CSS Color 4 method.
Sources
Added and reviewed . What's new