RGB to CIE L*a*b* Color Converter

Convert a screen sRGB color into CIE L*a*b*, a perceptually uniform color space where equal numeric distances correspond to roughly equal perceived color differences. Useful for color-difference (Delta E) work, gradients, and matching.

How it works

RGB cannot be turned into Lab directly — it must pass through linear light and CIE XYZ:

1. Gamma expand each sRGB channel to linear RGB:

c <= 0.04045 ?  c / 12.92  :  ((c + 0.055) / 1.055) ^ 2.4

2. Linear RGB to XYZ using the sRGB / D65 matrix:

X = 0.4124*r + 0.3576*g + 0.1805*b
Y = 0.2126*r + 0.7152*g + 0.0722*b
Z = 0.0193*r + 0.1192*g + 0.9505*b

3. XYZ to Lab — normalise by the D65 white (Xn 95.047, Yn 100, Zn 108.883), apply the CIELAB nonlinearity f(t), then:

L* = 116*f(Y/Yn) - 16
a* = 500*(f(X/Xn) - f(Y/Yn))
b* = 200*(f(Y/Yn) - f(Z/Zn))

where f(t) = t^(1/3) for t > (6/29)^3, otherwise a linear segment.

Example

Convert rgb(59, 130, 246) (a blue): L* ≈ 55.6, a* ≈ 17.6, b* ≈ −64.4 — high lightness, slightly toward red on a*, strongly toward blue on b*.

Notes

Values use the D65 white point to match CSS lab() and common design tools. The whole pipeline runs in your browser — nothing is uploaded.

When to Use CIELAB Instead of RGB or HSL

CIELAB is a perceptually uniform color space, which means that the numerical distance between two colors in Lab is designed to correlate with how different those colors look to the human eye. RGB and HSL are device-oriented — they describe how to mix red, green, and blue light, but they make no perceptual guarantees. Two colors that are equal RGB distances apart can look very different to the eye; two Lab values that differ by the same amount should look about equally different.

This matters in three main situations:

1. Color difference (Delta E): The industry-standard ΔE formulas — ΔE*ab, ΔE*94, ΔE2000 — are all defined in Lab space. Measuring whether two swatches look the same, or how much a print diverges from the original, requires Lab values.
2. Perceptually smooth gradients: Interpolating a gradient in RGB can produce unexpectedly light or dark midpoints. The same gradient interpolated through Lab space produces visually smoother results, because L* tracks perceived lightness directly.
3. Cross-media color matching: When a screen color must be reproduced in print, a device-independent reference is needed. Lab under a shared illuminant is that anchor.

The Three Channels in Plain Terms

A neutral gray has a* ≈ 0 and b* ≈ 0 regardless of lightness. A saturated cyan has both negative a* and negative b*. A warm amber has positive a* and strongly positive b*.

D65: The Reference White Behind This Conversion

Lab is always relative to a reference white point. The D65 illuminant approximates average midday daylight (correlated color temperature ~6504 K). It is the standard for sRGB, for CSS lab(), and for most design tools including Figma and Photoshop. This converter uses Xn = 95.047, Yn = 100, Zn = 108.883 — the D65 reference white for the sRGB color space.

If your workflow uses the D50 illuminant (common in print ICC profiles), you would need a D50-based converter; the values will differ.

CSS lab() Output Format

Modern CSS supports the lab() function natively. The values from this tool map directly:

/* from the worked example above */
color: lab(55.6% 17.6 -64.4);

L* is expressed as a percentage (0%–100%), and a*, b* are written as plain numbers (which can be negative). Copy the values from the tool’s output and paste them directly into CSS.

Practical Use Cases

• Lightness-matched palettes: Get a color’s L*, then create lighter/darker variants by adjusting L* while keeping a* and b* constant, then convert back to RGB for CSS.
• ΔE color checks: Convert two colors to Lab, subtract the values, and compute ΔE to quantify the perceived difference. ΔE below 1 is typically imperceptible; above 3 is visibly different to most observers.
• Accessible contrast: Compare L* values between text and background colors for a lightness-based contrast check that correlates with perception more directly than the WCAG hex-math method alone.
• Print handoff: Provide Lab values to a prepress operator as device-independent color specifications that survive the conversion to CMYK.