CSS Function
lab()
The lab() function defines colors in the CIE LAB color space using lightness and two chromaticity axes.
Syntax
lab(L a b / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| L | number | percentage | Yes | CIE Lightness, from 0 (black) to 100 (white) |
| a | number | Yes | Green-red axis, roughly -125 to 125 |
| b | number | Yes | Blue-yellow axis, roughly -125 to 125 |
| alpha | number | percentage | No | Opacity, from 0 to 1 |
Examples
Pure red
A vivid red in LAB space.
css
color: lab(54 81 70);Neutral gray
A perfect mid-gray with no chromaticity.
css
background: lab(50 0 0);Browser Support
✓
Chrome
v111++
✓
Firefox
v113++
✓
Safari
v15.4++
✓
Edge
v111++
✓
Opera
v97++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[lab(54_81_70)]Frequently Asked Questions
What are the a and b axes?▼
The 'a' axis runs from green (negative) to red (positive). The 'b' axis runs from blue (negative) to yellow (positive).
Why use lab over rgb?▼
LAB is perceptually uniform and device-independent, making it ideal for color interpolation and generating uniform palettes.
Explore CSS Color Tools
Try our free tools to work with lab() and other CSS color functions.
Open Tools