Widely available Useful when Lab and LCH adds a clear capability without requiring fragile workarounds.

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.

Color

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.lab
111
111
113
15
111
15
CSS type
lab.mixed type parameters

Mix `<percentage>` and `<number>` in parameters
116
116
113
16.2
116
16.2
lch

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 and LCH */
/* See MDN Web Docs for details */

Use cases

  • Browser-native behavior

    Use Lab and LCH to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links