OKLCH Color Converter
Paste a color in any CSS format and get its OKLCH, OKLab, CIE Lab and LCH values, plus HEX, RGB, HSL and color(display-p3). The gamut check tells you whether the color fits sRGB or Display P3 and gives a chroma-reduced HEX fallback when it does not.
Last updated:
HEX, rgb(), hsl(), hsv(), oklch(), oklab(), lab(), lch(), color(srgb|display-p3 …)
How to use the OKLCH Color Converter
- Enter a color in any CSS format: #2F6B4F, rgb(47 107 79), hsl(152 39% 30%), oklch(55% 0.2 250) and more.
- Pick the precision you want for the output values.
- Check the gamut badges. Inside sRGB means the color shows the same on every screen; outside means it needs a fallback.
- Copy the value you need, or the two-line CSS fallback for wide-gamut colors.
- Build a palette by clicking a swatch in the perceptual lightness scale to copy its HEX.
RGB to OKLab and OKLCH formula
The converter follows Björn Ottosson's OKLab definition and CSS Color Module Level 4:
- Linearize sRGB: clin = c / 12.92 if c ≤ 0.04045, else ((c + 0.055) / 1.055)2.4.
- To LMS: l = 0.4122 R + 0.5363 G + 0.0514 B, m = 0.2119 R + 0.6807 G + 0.1074 B, s = 0.0883 R + 0.2817 G + 0.6300 B.
- Nonlinearity: l′ = ∛l, m′ = ∛m, s′ = ∛s.
- To OKLab: L = 0.2105 l′ + 0.7936 m′ − 0.0041 s′, a = 1.9780 l′ − 2.4286 m′ + 0.4506 s′, b = 0.0259 l′ + 0.7828 m′ − 0.8087 s′.
- To OKLCH: C = √(a² + b²), H = atan2(b, a) in degrees (0-360).
CIE Lab and LCH are computed from XYZ adapted to the D50 white point with the Bradford transform, matching the CSS lab() and lch() functions.
Reference colors in OKLCH
| Color | HEX | OKLCH | CIE Lab (D50) |
|---|---|---|---|
| White | #FFFFFF | oklch(100% 0 0) | lab(100% 0 0) |
| Black | #000000 | oklch(0% 0 0) | lab(0% 0 0) |
| Red | #FF0000 | oklch(62.8% 0.258 29.2) | lab(54.29% 80.8 69.89) |
| Lime | #00FF00 | oklch(86.6% 0.295 142.5) | lab(87.82% -79.27 80.99) |
| Blue | #0000FF | oklch(45.2% 0.313 264.1) | lab(29.57% 68.29 -112.03) |
| Yellow | #FFFF00 | oklch(96.8% 0.211 109.8) | lab(97.61% -15.75 93.39) |
| Mid grey | #808080 | oklch(60% 0 0) | lab(53.59% 0 0) |
Why designers switch to OKLCH
- Predictable lightness: two colors with the same L look equally light, which makes contrast and theme scales easier to build than with HSL.
- Stable hue: lightening or darkening keeps the hue, without the blue-to-purple drift of CIE LCH.
- Wide gamut: the same syntax reaches Display P3 and Rec. 2020 colors on screens that support them.
Frequently asked questions
What is OKLCH?
OKLCH is the polar form of the OKLab color space created by Björn Ottosson in 2020. L is perceived lightness from 0 to 100%, C is chroma (colorfulness, about 0 to 0.37 for real colors) and H is the hue angle in degrees. Because it is perceptually uniform, changing L by the same amount looks like the same lightness step for every hue.
How do I convert HEX to OKLCH?
Convert the HEX to sRGB, remove the gamma curve to get linear RGB, multiply by Ottosson's first matrix to get LMS cone values, take the cube root, multiply by the second matrix to get OKLab L, a, b, and finally compute C = √(a² + b²) and h = atan2(b, a).
Can I use oklch() in CSS?
Yes. oklch() is supported in all current versions of Chrome, Edge, Firefox and Safari since 2023. For older browsers declare a HEX or rgb() fallback first and the oklch() value on the next line.
What does out of gamut mean?
OKLCH can describe colors that a screen cannot show. If a color is outside sRGB, a standard monitor cannot display it; browsers then map it to the nearest displayable color. Display P3, used by most recent phones and Macs, is about 25% larger than sRGB, so some colors fit P3 but not sRGB.
What is the difference between OKLCH and CIE LCH?
Both use lightness, chroma and hue. CIE LCH is based on CIELAB (1976) and has known problems, for example blue shifting toward purple when lightened. OKLCH fixes those hue shifts and has more even lightness, which makes it better for generating color scales and accessible palettes.
Why does the gamut-mapped HEX look duller?
To fit an out-of-gamut color into sRGB the converter keeps its lightness and hue and lowers only the chroma, which is the method recommended by CSS Color Module Level 4. A naive clip of each RGB channel is also shown; it keeps more saturation but can shift the hue.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.