lab()

The lab() functional notation expresses a given color in the CIE L*a*b* color space. Lab represents the entire range of color that humans can see.

Syntax

css

lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);
lab(52.2345% 40.1645 59.9971 / .5);

Values

Functional notation: lab(L a b[ / A])

L: A <number> between 0 and 100 or a <percentage> between 0% and 100% that specifies the CIE Lightness where the number 0 corresponds to 0% (black) and the number 100 corresponds to 100% (white).
a: A <number> between -125 and 125 or a <percentage> between -100% and 100%, specifying the distance along the a axis in the Lab colorspace, that is how green/red the color is.
b: A <number> between -125 and 125 or a <percentage> between -100% and 100%, specifying the distance along the b axis in the Lab colorspace, that is how blue/yellow the color is.
A Optional: An <alpha-value>, where the number 1 corresponds to 100% (full opacity).

Note: Usually when percentage values have a numeric equivalent in CSS, 100% is equal to the number 1. This case is notable where 100% is equal to the number 100 for the L value and 125 for the a and b values.

Formal syntax

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>

Examples

Adjusting lightness and color axes with lab()

The following example shows the effect of varying the lightness, a-axis, and b-axis values of the lab() function.

HTML

html

<div data-color="red"></div>
<div data-color="red-a"></div>

<div data-color="green"></div>
<div data-color="green-b"></div>

<div data-color="blue"></div>
<div data-color="blue-light"></div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}

css

[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-a"] {
  background-color: lab(100 110 125);
}

[data-color="green"] {
  background-color: lab(75% -120 125);
}
[data-color="green-b"] {
  background-color: lab(75% -120 10);
}

[data-color="blue"] {
  background-color: lab(0 -120 -120);
}
[data-color="blue-light"] {
  background-color: lab(70 -120 -120);
}

Result

Adjusting opacity with lab()

The following example shows the effect of varying the A (alpha) value of the lab() functional notation. The red and red-alpha elements overlap the #background-div element to demonstrate the effect of opacity. Giving A a value of 0.4 makes the color 40% opaque.

HTML

html

<div id="background-div">
  <div data-color="red"></div>
  <div data-color="red-alpha"></div>
</div>

CSS

div {
  width: 50px;
  height: 50px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  border: 1px solid black;
}
#background-div {
  background-color: lightblue;
  width: 150px;
  height: 40px;
}

css

[data-color="red"] {
  background-color: lab(100 125 125);
}
[data-color="red-alpha"] {
  background-color: lab(100 125 125 / 0.4);
}

Result

Specifications

Specification
CSS Color Module Level 4 # lab-colors

Browser compatibility

BCD tables only load in the browser