Convert hex colors to CIELAB — the classic perceptual space where L* is lightness and a*/b* are the green–red and blue–yellow axes. The conversion follows CSS Color Level 4 exactly (sRGB → linear light → XYZ → D50 Lab), matching what lab() computes in modern browsers.
Settings
Generated locally in your browser — your settings and results never leave this page.
Into measurement territory
CIELAB is where color stops being pixels and becomes measurement: a space built in 1976 so that numeric distance would approximate perceived difference. Converting hex to Lab is stepping from “what the screen was told” to “what a colorimeter would report” — the coordinates used for ΔE tolerances, print QC and gamut mathematics.
Worked example: #008b8b
Dark cyan — rgb(0, 139, 139) — through the CSS Color 4 pipeline:
sRGB → linear light (undo gamma) linear → XYZ (D65) (sRGB matrix) XYZ D65 → XYZ D50 (Bradford adaptation) XYZ → Lab (cube-root response) #008b8b = lab(51.92% -32.26 -9.53)
Read the result: L* 51.92 — a middle lightness; a* -32.26 — firmly green-negative; b* -9.53 — blue-negative. Cyan, quantified. The two-stage white-point handling (D65 display → D50 Lab reference) is what casual converters skip and the reason their numbers disagree with browsers and instruments.
Where Lab values go to work
ΔE2000 comparisons (the Color Difference Calculator), tolerance clauses in brand and print contracts, sorting by honest lightness, and CSS itself — lab() is a first-class browser syntax now, useful when specifying appearance that should survive future display gamuts.
Precision statement
The implementation matches the CSS specification’s reference values (red = lab(54.29% 80.8 69.89)) to two decimals and round-trips the RGB grid exactly — assertions that run in this site’s automated tests on every change.
Reference values, computed live
Measurement coordinates land better with worked pairs. Seven hex codes and their exact CIELAB positions:
| Color | HEX | LAB |
|---|---|---|
| orchid | #da70d6 | lab(62.8% 52.5 -34.1) |
| tomato | #ff6347 | lab(63% 59.4 47.9) |
| mediumseagreen | #3cb371 | lab(65.2% -46 23.7) |
| mediumpurple | #9370db | lab(54.5% 31.7 -50.6) |
| goldenrod | #daa520 | lab(71.3% 12.2 68.7) |
| crimson | #dc143c | lab(47.9% 71.3 35.5) |
| olivedrab | #6b8e23 | lab(54.8% -24.6 49) |
These rows are calibration data for your intuition: after matching a few L* values against how light the colors actually look, you can estimate any color’s L* within five units — and that estimate is exactly what you need to shortlist text-versus-background candidates before the contrast tools confirm them.
How to use the HEX to LAB Converter
- Pick the color with the native picker, or type its hex code into the twin field.
- The result updates live as you type – no convert button needed.
- Read the pipeline note: sRGB → linear light → XYZ → D50 → Lab, the same path CSS lab() uses.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
What do L*, a* and b* mean?
L* is perceptual lightness 0-100. a* runs green (negative) to red (positive); b* runs blue (negative) to yellow (positive). #1e90ff measures lab(58.36% 0.89 -64.78): mid-lightness, slightly green-of-neutral, strongly blue.
How is Lab computed from hex – the actual pipeline?
Four stages: undo the sRGB gamma curve to linear light; multiply by the sRGB matrix into CIE XYZ; adapt the D65 white to Lab's D50 reference (Bradford); apply the cube-root Lab functions. This matches CSS Color Level 4, so results agree with browser lab() values – many older converters skip the D50 step and disagree.
Why does Lab exist when we have RGB?
RGB numbers say nothing about appearance – distance in RGB is unrelated to how different colors look. Lab was built so geometric distance approximates perceived difference, enabling color QC, ΔE tolerances and honest "how far apart are these" answers.
What is a typical use of a Lab value from this tool?
Feeding tolerance checks: convert your brand color and a sample, hand both Lab triplets to the Color Difference Calculator, and read the ΔE2000 verdict – under 2 passes unnoticed by most observers.
Why D50 when screens are D65?
Convention from the print and color-measurement world, which standardized Lab under D50 illumination – and CSS followed so lab() values are interchangeable with graphic-arts practice. The adaptation between the two whites is part of the pipeline, not an error.
Can two different hex codes have the same Lab?
No – within sRGB the mapping is one-to-one and invertible. The reverse direction is where care is needed: many Lab triplets have no sRGB equivalent at all, which the LAB to HEX converter flags.
Is Lab perceptually perfect?
No – blue hues bend (the reason CIEDE2000 has correction terms) and OKLab was designed decades later to fix much of it. Lab remains the interchange standard; OKLab the better space for generating gradients and palettes.
