OKLCH to HEX Converter
Convert any oklch() colour to HEX, RGB and HSL. Colours too vivid for HEX are gamut-mapped the same way CSS does it, and you can see both versions side by side.
Paste oklch(), or type values like 70% 0.15 200. HEX, RGB, HSL and OKLab work too.
HEX and other formats
#2b7fffrgb(43 127 255)rgb(43, 127, 255)hsl(216.3 100% 58.5%)oklch(62.3% 0.214 259.815)oklab(62.3% -0.038 -0.211)The HEX value is oklch(61.9% 0.207 259.253) in OKLCH: same lightness and hue, less chroma.
CSS with a fallback
color: #2b7fff; color: oklch(62.3% 0.214 259.815);
Browsers that do not understand oklch() ignore the second line and keep the HEX colour.
Convert every oklch() in a stylesheet
Paste CSS, a Tailwind @theme block or a list of colours. Each oklch() value is replaced with its HEX; everything else is left as it is.
Related Developer Tools
This OKLCH to HEX converter turns an oklch() colour into the six-digit HEX code that design tools, email templates, older browsers and most colour libraries expect, plus its RGB and HSL forms. It also tells you whether the colour fits inside sRGB, the range every HEX code lives in. If it does not, you get the closest HEX colour worked out with the gamut-mapping method from the CSS Color Module Level 4 specification, so the result keeps the hue and lightness you chose.
How to Convert OKLCH to HEX
- Paste the colour.
oklch(62.3% 0.214 259.815),oklch(0.7 0.15 200 / 50%)or just70% 0.15 200all work. - Or adjust the sliders for lightness, chroma, hue and opacity to find a colour.
- Check the gamut notice. Green means the HEX code is exact; amber means the HEX is the nearest colour an ordinary screen can show.
- Copy the HEX, RGB, HSL or the two-line CSS fallback. A colour with opacity gives an eight-digit HEX such as
#2b7fff80.
Reading an OKLCH Value
| Part | Range | What it means |
|---|---|---|
| L lightness | 0% to 100% (or 0 to 1) | 0% is black, 100% is white. Equal steps look like equal changes in brightness, whatever the hue. |
| C chroma | 0 to about 0.37 | How colourful it is. 0 is grey. No HEX colour goes above about 0.32 (magenta, #ff00ff, is the most colourful at 0.322); higher values need a wide-gamut screen or cannot be shown at all. |
| H hue | 0 to 360 degrees | The colour angle: around 25 is red, 90 yellow, 145 green, 260 blue, 330 pink. |
| / A alpha | 0 to 1 or 0% to 100% | Optional opacity, written after a slash. |
Gamut Mapping vs Clipping: Why Your HEX Code May Differ
HEX codes can only describe colours inside sRGB. OKLCH has no such limit, so oklch(70% 0.4 150), a green more vivid than even a Display P3 screen can show, has no exact HEX code. There are two common ways to get the nearest one:
| Method | HEX for oklch(70% 0.4 150) | What changes |
|---|---|---|
| Gamut mapping (CSS Color 4) | #00c248 | Chroma drops; lightness stays at about 71% and the hue moves by about 3 degrees |
| Clipping each channel | #00d600 | Lightness jumps to about 76% and the hue moves by about 7.5 degrees |
Gamut mapping is the default here because it matches what the CSS specification asks browsers to do, and because keeping lightness matters for contrast: a text colour that suddenly gets lighter may no longer be readable. Switch to clipping in the options if you need to match a tool that clips.
Converting a Whole Stylesheet or Tailwind Theme
Tailwind CSS v4 and many design systems now write every colour in oklch(). Paste a block of CSS into the stylesheet converter under the tool and each oklch() value is swapped for its HEX code while variable names, comments and everything else stay as they were. This is the quick way to hand a palette to a design tool, an email template or a native app that needs HEX values. To go the other way, use the HEX to OKLCH converter.
Using OKLCH With a HEX Fallback
For a site that still has visitors on old browsers, write the HEX first and the OKLCH second, as in the CSS shown in the tool. A browser that understands oklch() uses the second line, and wide-gamut screens get the full colour; anything older ignores it and keeps the HEX. Before shipping a text colour, check it against its background with the colour contrast checker, and build a full set of shades from it with the Tailwind palette generator.
Frequently Asked Questions
How do I convert OKLCH to HEX?
Paste the colour, for example oklch(62.3% 0.214 259.815), into the box. The HEX code appears straight away along with RGB and HSL, each with a copy button. You can also type just the three numbers, such as 70% 0.15 200.
Why does my OKLCH colour look different from its HEX code?
OKLCH can describe colours that are more saturated than any HEX code can store. HEX is limited to the sRGB range, so a very vivid OKLCH colour has to be brought inside that range, which lowers its chroma. On a wide-gamut screen the oklch() version will look more vivid than the HEX one.
What is gamut mapping?
It is the way a colour outside the screen's range is brought inside it. CSS Color 4 keeps the lightness and hue and reduces chroma until the colour fits. Simple clipping instead cuts each red, green and blue value to 0–255, which is faster but can make the colour lighter and shift its hue.
Is the conversion exact?
For any colour inside sRGB, yes, apart from rounding each channel to a whole number from 0 to 255. Converting the HEX back to OKLCH gives the same colour to within that rounding.
How do I convert Tailwind CSS v4 colours to HEX?
Tailwind v4 defines its palette in oklch(). Paste a single value above, or paste the whole @theme block into the stylesheet converter to get every --color variable as HEX in one go.
Do browsers support oklch()?
Yes. Chrome, Edge, Firefox and Safari have all supported oklch() since 2023. A HEX fallback is still useful for older browsers, HTML email, and design tools or libraries that only accept HEX or RGB.
Is my colour data sent anywhere?
No. The conversion is done by JavaScript in your browser.