Color Space Converter (OKLCH, Lab, P3)
Convert any CSS color between HEX, RGB, HSL, HSV, CMYK, linear sRGB, Display P3, Rec. 2020, XYZ, Lab, LCH, OKLab and OKLCH, with ΔE and gamut checks.
HEX
#ff0000
- OKLCH
- oklch(0.62796 0.25768 29.234)
- sRGB
- rgb(255 0 0)
- In gamut
- Yes — sRGB, Display P3 and Rec. 2020
Color · #ff0000
Lab and LCH use the D50 white (as CSS lab() does); OKLab/OKLCH use D65. CMYK is the naive formula — real printing needs a profile.
The same color in every space
| Space | Value |
|---|---|
| HEX | #ff0000 |
| sRGB | rgb(255 0 0) |
| HSL | hsl(0 100% 50%) |
| HSV | hsv(0, 100%, 100%) |
| CMYK (naive, no profile) | cmyk(0%, 100%, 100%, 0%) |
| Linear sRGB | color(srgb-linear 1 0 0) |
| Display P3 | color(display-p3 0.91749 0.20029 0.13856) |
| Rec. 2020 | color(rec2020 0.82346 0.32843 0.18034) |
| CIE XYZ (D65) | color(xyz-d65 0.41239 0.21264 0.01933) |
| CIELAB (D50) | lab(54.291 80.805 69.891) |
| CIE LCH (D50) | lch(54.291 106.837 40.858) |
| OKLab | oklab(0.62796 0.22486 0.12585) |
| OKLCH | oklch(0.62796 0.25768 29.234) |
How it works
Conversions follow CSS Color 4 (via colorjs.io): sRGB is linearized, taken to CIE XYZ, then to each space (Lab/LCH use the D50 white with Bradford adaptation, OKLab uses its own D65 matrices). ΔE76 is the straight distance in Lab; ΔE2000 is CIEDE2000.
Out-of-gamut colors are mapped into sRGB with the CSS Color 4 gamut-mapping algorithm for HEX, RGB, HSL, HSV, CMYK and the swatch; the other spaces show the exact color. CMYK is the naive formula with no printer profile, so it will not match a real print. Lab and LCH use the D50 white, as CSS lab() does.
Questions
- How does the color space converter work?
- Conversions follow CSS Color 4 (via colorjs.io): sRGB is linearized, taken to CIE XYZ, then to each space (Lab/LCH use the D50 white with Bradford adaptation, OKLab uses its own D65 matrices). ΔE76 is the straight distance in Lab; ΔE2000 is CIEDE2000.
- What does it assume?
- Out-of-gamut colors are mapped into sRGB with the CSS Color 4 gamut-mapping algorithm for HEX, RGB, HSL, HSV, CMYK and the swatch; the other spaces show the exact color. CMYK is the naive formula with no printer profile, so it will not match a real print. Lab and LCH use the D50 white, as CSS lab() does.
- What can I type?
- Any CSS color — #ff0000, rgb(255 0 0), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 1 0 0), named colors — plus hsv(h, s%, v%) and cmyk(c%, m%, y%, k%).
- What is ΔE?
- A number for how different two colors look. Around 1 is the smallest difference most people notice; CIEDE2000 tracks human vision better than the older ΔE76.
Related tools
- CSS Unit Converter (px, em, rem, vw, pt)Convert CSS lengths between px, em, rem, %, vw, vh, pt, pc, in, cm, mm and Q using your font sizes, viewport and screen DPI.
- Number Base ConverterConvert whole numbers between decimal, binary, hexadecimal and octal — exactly, at any size.
- Text to Binary (UTF-8) ConverterConvert text to its UTF-8 bytes in binary, and binary back to text.
- Color Code ConverterConvert colors between HEX, RGB and HSL with a live preview.
- Data Storage ConverterConvert bytes, kilobytes, megabytes, gigabytes and binary units like MiB and GiB.
- Data Transfer Rate ConverterConvert internet and network speeds — Mbps, Gbps, MB/s, MiB/s and more.
Want this on your site? Embed the color space converter (oklch, lab, p3).