HEX to OKLCH Converter
Enter any hex, RGB or HSL color to get its OKLCH lightness, chroma and hue as a CSS oklch() value.
How to convert HEX to OKLCH with this tool
- Enter a hex code, for example
#FF0000. - Read the OKLCH card: lightness as a percentage, chroma as a decimal and hue in degrees. Pure red comes out at 62.8%, 0.2577 and about 29.2°.
- Press Copy to take the
oklch()value straight into a stylesheet. - To go the other way, paste an
oklch()value and read the HEX card. Out-of-gamut values are clamped into sRGB first.
What happens between HEX and OKLCH
- HEX to sRGB.
#FF0000becomes 255, 0, 0, then 1, 0, 0 on a 0–1 scale. - sRGB to linear sRGB. Screen values are gamma-encoded, so each channel passes through the sRGB transfer curve. Pure red stays 1, 0, 0, but a mid value of 0.5 becomes about 0.214 in linear light.
- Linear sRGB to OKLab. A 3×3 matrix produces cone-like responses, a cube root compresses them, and a second matrix outputs L, a and b. Red lands near L 0.628, a 0.225, b 0.126.
- OKLab to OKLCH. Chroma is the distance from gray, √(a² + b²) ≈ 0.2577, and hue is the angle atan2(b, a) ≈ 29.23°.
The result is oklch(62.8% 0.2577 29.23). OKLab was published by Björn Ottosson in 2020; what OKLCH is covers the model in more depth.
Why OKLCH suits design tokens
OKLCH lightness tracks perceived lightness, so two tokens with the same L look equally light whatever their hue. You can define lightness targets once, for example 97% for the lightest step down to 25% for the darkest, and reuse them for every brand color. Holding H fixed while changing L keeps the hue stable, where lightening a blue in HSL pushes it toward purple.
Tailwind CSS v4 defines its default palette this way, and the Tailwind palette generator follows the same approach: set lightness per step, taper chroma at the extremes and keep hue constant.
Gamut and browser support
Chroma has no fixed ceiling. sRGB colors reach about 0.32, while OKLCH can describe colors up to about 0.37 that only wide-gamut displays such as Display P3 or Rec.2020 can show. When a CSS oklch() value is outside the screen's gamut, the browser gamut-maps it. HEX cannot hold those colors, so this converter clamps them into sRGB, and the HEX you get back can be less saturated than the value you entered.
oklch() is part of CSS Color Module Level 4 and has worked in all major browsers since 2023: Chrome 111, Safari 15.4 and Firefox 113. For older browsers, declare a HEX fallback first: color: #FF0000; color: oklch(62.8% 0.2577 29.23);.
Frequently asked questions
How do I convert HEX to OKLCH?
Convert the hex code to sRGB, linearize each channel, transform linear RGB to OKLab with Ottosson's matrices, then turn a and b into chroma and hue. #FF0000 comes out as oklch(62.8% 0.2577 29.23).
What do the three OKLCH numbers mean?
L is perceived lightness from 0% to 100%, C is chroma, or colorfulness, from 0 up to about 0.37, and H is the hue angle in degrees. A gray has a chroma of 0, so its hue has no visible effect.
Can every OKLCH color be converted to HEX?
No. HEX is limited to sRGB, while OKLCH can describe wider-gamut colors. The converter clamps those into sRGB, so the hex you get is an sRGB approximation rather than an exact match.
Is OKLCH supported in all browsers?
All major current browsers support it. It shipped in Safari 15.4, Chrome 111 and Firefox 113, so every major engine had oklch() by 2023.
Is OKLCH the same as LCH?
No. CSS lch() is the polar form of CIELAB, while oklch() is the polar form of OKLab, a newer space designed to keep hue more stable as lightness and chroma change.
Why use OKLCH instead of HEX for design tokens?
Each number has a visual meaning. You can lighten a token by raising L or mute it by lowering C, and colors that share an L value look equally light across hues, which HEX and HSL cannot guarantee.