CSS lab() Function
The CSS lab() function defines a color in the CIE L*a*b* (CIELAB) color space, which is designed to be perceptually uniform and represent the entire spectrum of human vision.
Introduced in CSS Color Module Level 4, the lab() function allows web developers to specify device-independent colors that can access wide-gamut displays (such as Display P3) beyond the standard sRGB color gamut.
Syntax
The lab() function accepts three space-separated values representing Lightness, the a-axis (green-to-red), and the b-axis (blue-to-yellow), plus an optional alpha transparency channel:
Parameters
L(Lightness): A number from0to100or a percentage from0%to100%.0%represents black, and100%represents diffuse white.a(Green-Red axis): A number or percentage specifying the color on the green-to-red axis. Negative values lean green, while positive values lean red/magenta. In practice, values typically fall between-125and+125(or-100%to100%).b(Blue-Yellow axis): A number or percentage specifying the color on the blue-to-yellow axis. Negative values lean blue, while positive values lean yellow. Values typically fall between-125and+125(or-100%to100%).A(Alpha, optional): Preceded by a forward slash (/), specifying the transparency as a decimal between0and1(e.g.0.5) or a percentage between0%and100%.
Basic Examples
Here are several basic colors specified with the lab() function:
Using lab() in Style Sheets
The CSS specifications states that you can use lab() wherever a CSS <color> value is accepted. For example, you can use lab() to set the colors of text, backgrounds, and borders:
Specifying Transparency
An alpha channel can be added after a forward slash (/) to create semi-transparent colors:
How the a and b Axes Work
The CIELAB color space is based on the opponent-color theory of human vision, which suggests that our eyes perceive colors along two opposing axes:
| Axis | Negative Values (−) | Zero (0) | Positive Values (+) |
|---|---|---|---|
| a-axis | Green | Neutral | Red / Magenta |
| b-axis | Blue | Neutral | Yellow |
When both a and b are set to 0, the color has no chroma and is a neutral shade of gray, determined entirely by the L (lightness) value.
Why Use lab()?
- Perceptual Uniformity: Traditional models like RGB and HSL are not perceptually uniform (for example, in HSL, pure yellow and pure blue have the same 50% lightness value, but yellow looks significantly brighter). In CIELAB, equal mathematical changes in lightness correspond to equal perceived brightness changes to the human eye.
- Wide Gamut Access: CIELAB encompasses all colors that the human eye can see. Unlike standard
rgb()or hex codes which are bounded by the sRGB color space,lab()can represent high-saturation colors on modern wide-gamut displays (such as Display P3).
Related Color Functions
lch(): Uses the exact same CIELAB color space aslab(), but uses cylindrical coordinates (Lightness, Chroma, and Hue angle). Many designers findlch()more intuitive than Cartesian a and b coordinates.oklab(): A modern refinement of the CIELAB color space created by Björn Ottosson. It solves minor hue shift issues found in CIELAB (especially in the blue-to-purple spectrum).oklch(): The polar/cylindrical form of Oklab (Lightness, Chroma, Hue), widely considered the gold standard for modern CSS design systems and UI color palettes.