lab() and lch() in CSS.

Syntactic diagram of functions lab() and lch().

The terms on the diagram are described below:

• color is a possible reference color, introduced by the from keyword, and expressed in one of the syntaxes recognized by CSS (see Colors).
• l is a unitless number, ranging between 0 and 100, or a percentage.
• a and b are two numbers without units, ranging from -160 to +160, or percentages.
• α is a unitless number between 0 and 1, or a percentage, introduced by the slash character. It represents the opacity of the color (alpha channel).

In this second diagram, the terms are described below:

• color is a possible reference color, introduced by the from keyword, and expressed in one of the syntaxes recognized by CSS (see Colors).
• l is a unitless number, ranging between 0 and 100 or a percentage.
• c is a unitless number, ranging from 0 to 230, or a percentage.
• h is a number followed by one of the CSS angle units.
• α is a unitless number between 0 and 1, or a percentage, introduced by the slash character. It represents the opacity of the color (alpha channel).

Description of the functions lab() and lch().

The color spaces L*a*b* and L*C*H* were defined by the CIE (International Commission on Illumination) to characterize surface colors. They are poorly suited for colors displayed on a screen, but well suited for printed colors.

The three dimensions that define a color in these spaces can be represented in the following diagram. We can see that L*a*b* is a Cartesian reference system, while L*C*H* is a polar coordinate system.

The L*a*b* space is characterized by three values:

• L is lightness (Lightness in English). The higher the lightness, the lighter the color, with white corresponding to a lightness of 100.
• a is the position of the color on the green-red axis.
• b is the position of the color on the blue-yellow axis.

The L*C*H* space is characterized by the three values:

• L is lightness.
• C is the chrominance. A low value corresponds to a dull color, close to gray, while a high value corresponds to a vivid color.
• H is the hue. It is expressed in degrees and indicates the position of the color on the color wheel. 0deg corresponds to a color between magenta and red.

The lab() and lch() functions can be used with:

All properties that expect a color definition.

• accent-color : Defines the colour of active or checked items.
• background-color : Sets the background color.
• border-color : Sets the border color for all four sides of the element.
• caret-color : Chooses the color of the text marker (flashing cursor).
• color : Sets the foreground color and assigns a value to currentcolor.
• column-rule-color : Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
• lighting-color : Sets the color of the lighting in the context of an SVG filter.
• outline-color : Sets the color of the outline.
• scrollbar-color : Sets two colors that will be used for scrollbars.
• text-decoration-color : Defines the color of the decorative line (underlined, stripe...).
• text-emphasis-color : Sets the color of the emphasis characters.

Syntax of the lab() and lch() functions.

All of these functions accept three parameters separated by spaces, and a fourth, optional one, separated by a slash ( / ). Commas are not accepted (this is the current trend in CSS syntax). A fourth parameter is now recognized: it is a reference color from which the new color will be calculated.

• <propriété>: lab(67.5345% -8.6912 -41.601); <propriété>: lab(67.5345% -8.6912 -41.601 / 0.8); l a b α

  The first three values define the color. The fourth value, optional, is separated from the others by a slash. It defines the opacity of the color. If this fourth value is not specified, the opacity is set by default to 1 (full opacity).

  1. l: the lightness of the color. It must be a number between 0 and 100, without a unit, or a percentage between 0% and 100%. 0 is black; 100 is white.
  2. a and b: two unitless numbers between -160 and 160. In fact, these two values can exceed these limits, but beyond that, the color difference is no longer noticeable. If a and b are expressed as percentages, -100% corresponds to -125 and 100% corresponds to 125.
  3. α: the color opacity, a unitless number between 0 and 1 or a percentage between 0% and 100%. Total transparency is noted as 0 and full opacity corresponds to 1.
• <propriété>: lch(52.2345% 72.25 45deg); <propriété>: lch(52.2345% 72.25 45deg / 0.7); l c h α

  As with the lab() function, the first three values define the color, and the fourth value (optional) defines the opacity of this color.

  1. l: the lightness of the color. It must be a number between 0 and 100, without a unit, or a percentage between 0% and 100%. 0 is black; 100 is white.
  2. c: chrominance: a unitless number between 0 and 230. Higher values are allowed but no longer produce a noticeable effect on the resulting color. This value can also be expressed as a percentage with the correspondence 100% = 150.
  3. h: hue. A number followed by an angle unit between 0deg and 360deg. Values outside this range are brought back to the equivalent value within the range.
     Here are some approximate values for hue h:
         - Red (red, maroon...) = 40.9deg
         - Green (green, lime...) = 134.4deg
         - Blue (blue, navy...) = 301.4deg
         - Cyan (cyan, teal...) = 196.5deg
     
  4. α: the opacity of the color, a unitless number between 0 and 1 or a percentage between 0% and 100%.
     0 corresponds to a completely transparent color, and 1 or 100% to a completely opaque color.
• <propriété>: oklab(67.534% -0.3911 -0.2019); <propriété>: oklab(67.534% -0.3911 -0.2019 / 0.5); l a b α

  The function oklab() provides a more perceptual rendering than lab(). Its parameters have the same meaning but vary within different ranges.

  1. l: la clarté de la couleur. Ce doit être un nombre sans unité entre 0 (noir) et 100 (blanc) ou un pourcentage entre 0% et 100%.
  2. a and b: two unitless numbers between -0.5 and 0.5. Larger values can be indicated without disturbing the syntax, but the effect on the color will be negligible. a and b can also be expressed as percentages, with -100% corresponding to -0.4 and 100% corresponding to 0.4.
  3. α: the opacity of the color, a unitless number between 0 and 1. Percentages are not allowed for this fourth value. 0 corresponds to a fully transparent color, and 1 to a fully opaque color.
• <propriété>: oklch(52.2345% 72.2 56.2); <propriété>: oklch(52.2345% 72.2 56.2 / 0.7); l c h α

  oklch() gives a more perceptually accurate rendering than the basic function lch().

  1. l: the brightness of the color. It must be a unitless number between 0 and 100. It can also be a percentage between 0% and 100%. Black corresponds to 0 and white to 100 or 100%.
  2. c: Chrominance: a unitless number between 0 and 0.5. Higher values are allowed but no longer produce a noticeable effect on the resulting color.
  3. h:the hue. A number followed by an angle unit between 0deg and 360deg. Values outside this range are brought back to the equivalent value within the range.
  4. α: this fourth optional value is the color's opacity, a unitless number between 0deg (transparent color) and 1 (completely opaque).

Color animation.

It is very easy to create very smooth animations with the functions lab(), lch(), oklab(), or oklch(). For this example, we used lab() by varying only the h parameter (the hue).

There is a small trap when varying the hue from 0 to 360 degrees: if you only define the start and end values, some browsers will take the shortest path, not going through the full range of hues, but instead going backward to go directly from 0 to 360. To avoid this, you need to define an intermediate step at 50% for 180 degrees.

Simulator.

Compatibilité des navigateurs.

Defining a color with the L*a*b* or L*C*H* systems is now possible on all browsers.

1

lab()
lch()
functions

2

oklab()
oklch()
functions

Estimated overall support.

93%

93%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the lab() function.

• CSS Color Module Level 4

  This level 4 of the specification finally introduces the concept of color spaces, with a number of predefined spaces.
  Introduction of the HWB (Hue, White, and Black) color system and the CIE (International Commission on Illumination) references Lab and LCH.
  Introduction of the color() function, which allows defining a color in a color space other than sRGB.

  Regarding lab(). Introduction of device-independent color definition systems: CIE Lab, and LCH.
  And definition of the corresponding functions: lab(), lch(), oklab() and oklch().
  

  July 05, 2016

  Working Draft.

  

  July 05, 2022

  Candidate Recommendation.

  

  

• CSS Color Module Level 5

  This level 5 of the specification introduces custom color spaces and relative colors.
  All functions that allow defining a color now accept the from clause to define a color relative to another. The @color-profile at-rule allows you to create your own colorimetric spaces.
  Added new functions such as color-mix(), device-cmyk(), light-dark(), or contrast-color().

  Regarding lab(). Introduction of relative colors, defined in relation to another color.
  Adjustment of the syntax of the lab(), lch(), oklab() and oklch() functions for satisfy this new functionality (from clause).
  

  March 03, 2020

  Working Draft.

  

  

  

See also, regarding colors.

The functions lab() and lch(), as well as oklab() and oklch(), are described in the CSS Color Module module, which encompasses everything related to color management. The following definitions are also described in this module:

Properties:

Functions:

color()

Defines a color in any color space (sRGB, sRGB-linear, profoto, etc).

color-mix()

Mix two colors in a given color space.

⚠

contrast-color()

Determine a foreground color based on the background color to maximize contrast.

⚠

device-cmyk()

Define a color based on a device, specifying cyan, magenta, yellow, and black values.

hsl()

Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.

hsla()

Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.

hwb()

Defines a color based on its hue and a dose of black and white.

Lab()

Defines a color in the L*a*b* system.

Lch()

Defines a color in the L*C*H* system.

Oklab()

Defines a color in the L*a*b* system with a perceptual correction.

Oklch()

Defines a color in the L*C*H* system with a perceptual correction

rgb()

Determines a color from the values ​​of Red, Green and Blue.

rgba()

Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile

Specifies a color profile that can then be used by the color() function.

Descriptors :

⚠

components

Descriptor usable with the @color-profile at-rule.

⚠

rendering-intent

Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.