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

Lab and LCH

The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.

Color

Overview

The CIE Lab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is. LCH is a variant of Lab with polar coordinates. These color spaces can be used with the CSS color(), lab(), and lch() functions. Also known as CIELAB and CIELCH.

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

Powered by web-features