Lab and LCH
The lab() functional notation expresses a given color in the CIE L*a*b* color space.
Lab represents the entire range of colors that humans can see by specifying the color's lightness, a red/green axis value, a blue/yellow axis value, and an optional alpha transparency value.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 113 | 15 | 111 | 15 | |
lab mixed type parameters Mix `<percentage>` and `<number>` in parameters | 116 | 116 | 113 | 16.2 | 116 | 16.2 |
| The lch() functional notation expresses a given color using the LCH color space, which represents lightness, chroma, and hue. It uses the same L axis as the color_value/lab color function of the CIELab color space, but it uses the polar coordinates C (Chroma) and H (Hue). | 111 | 111 | 113 | 15 | 111 | 15 |
lch mixed type parameters Mix `<percentage>` and `<number>` in parameters | 116 | 116 | 113 | 16.2 | 116 | 16.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Lab: lab(luminance a-axis b-axis / opacity) */
.lab-color {
color: lab(60 -30 50);
}
/* LCH: lch(luminance chroma hue / opacity) */
.lch-color {
color: lch(60 50 270);
}
/* With opacity */
.lch-alpha {
color: lch(60 50 270 / 0.8);
}Live demo
Use cases
-
Using Lab and LCH
The lab() functional notation expresses a given color in the CIE L*a*b* color space.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.