CSS lab() Function

CSS lab() Function

The CSS lab() function defines colors in the CIE L*a*b* color space using lightness and two color axes.

Unlike RGB, which describes colors using red, green, and blue channels, Lab separates perceptual lightness from color information. It can represent colors outside the standard sRGB gamut and supports optional transparency.

Syntax

lab(L a b)
lab(L a b / alpha)
lab(from color L a b)
lab(from color L a b / alpha)

The first three components specify lightness and the two color axes. An optional alpha value controls transparency and is separated by a forward slash.

For example:

.box {
  background-color: lab(60% 40 30);
}

This defines a color with 60% lightness and positive values on the red-green and blue-yellow axes.

Additional examples:

color: lab(0% 0 0);
color: lab(100% 0 0);
color: lab(50% 0 0);
color: lab(60% 40 30);
color: lab(60% -40 30);
color: lab(60% 40 -30);
color: lab(60% 40 30 / 50%);
color: lab(from red l a b);

The components are separated by spaces, not commas.

The function returns a CSS <color> value.

Parameters

The lab() function uses three required color components and one optional alpha component.

For example:

lab(65% 35 -25 / 0.8)

This defines a color with 65% lightness, positive red-green axis displacement, negative blue-yellow axis displacement, and 80% opacity.

The L, a, and b components can use numbers, percentages, or the keyword none.

How It Works

The CIE Lab color space describes colors using perceptual lightness and two opposing color axes.

The three components have different roles:

1. L controls how light or dark the color appears.
2. a controls movement between green and red.
3. b controls movement between blue and yellow.

For example:

lab(60% 0 0)
lab(60% 40 0)
lab(60% 0 40)

The first color is neutral. The second moves toward red, while the third moves toward yellow.

All three have the same specified Lab lightness, although their displayed brightness can still be influenced by color gamut mapping and display characteristics.

Lab is designed to make numerical differences more closely reflect perceived color differences than conventional RGB channel values.

Lightness

The L component specifies perceptual lightness.

Common values include:

For example:

.dark { background-color: lab(25% 0 0); }
.medium { background-color: lab(50% 0 0); }
.light { background-color: lab(75% 0 0); }

When both color axes are zero, changing lightness produces neutral gray colors.

Values below 0 are clamped to 0, and values above 100 are clamped to 100.

Lab lightness is not the same as the lightness component used by hsl().

The a Axis

The a component controls the green-to-red axis.

Its sign determines the direction:

For example:

lab(65% -50 0)
lab(65% 0 0)
lab(65% 50 0)

The first color moves toward green, the second is neutral, and the third moves toward red.

Increasing the magnitude moves the color farther from the neutral axis, although the displayed result also depends on the other components and the display gamut.

Numbers commonly fall between -125 and 125, but the syntax is not restricted to that interval.

The b Axis

The b component controls the blue-to-yellow axis.

Its sign determines the direction:

For example:

lab(65% 0 -50)
lab(65% 0 0)
lab(65% 0 50)

The first color moves toward blue, the second is neutral, and the third moves toward yellow.

The a and b axes can be combined to create a wide range of colors.

For example:

lab(65% 40 40)
lab(65% -40 40)
lab(65% 40 -40)
lab(65% -40 -40)

These combinations produce different color directions while retaining the same specified lightness.

Transparency

An optional alpha component controls the opacity of a Lab color.

The alpha value follows a forward slash:

lab(L a b / alpha)

For example:

.box {
  background-color: lab(60% 40 30 / 50%);
}

This creates a Lab color with 50% opacity.

Alpha values can be numbers or percentages:

lab(60% 40 30 / 1)
lab(60% 40 30 / 0.75)
lab(60% 40 30 / 50%)
lab(60% 40 30 / 0)

The following values are equivalent:

0 = 0%
0.5 = 50%
1 = 100%

When alpha is omitted, the color is fully opaque.

Transparency does not change the underlying Lab color components. It controls how the color is composited with the background.

Numbers and Percentages

The L, a, and b components accept numbers or percentages, but their percentage scales differ.

For example, these colors are equivalent:

lab(60% 50 25)
lab(60 40% 20%)

Both specify a lightness of 60, an a value of 50, and a b value of 25.

Negative percentages are also supported:

lab(60% -40% -20%)

This corresponds to:

lab(60 -50 -25)

Percentage conversions should not be confused with the alpha component, where 100% equals 1.

Missing Components

The keyword none can represent a missing color component.

For example:

lab(60% none 30)
lab(60% 40 none)
lab(none 0 0)
lab(60% 40 30 / none)

For ordinary color display, a missing lightness or color-axis component behaves like zero.

However, missing components retain special meaning during certain color operations, such as interpolation.

For example:

background-color: lab(60% none 30);

This color uses zero for the missing a component when rendered normally.

Do not assume none is always interchangeable with a numeric zero in gradients or color interpolation.

Relative Colors

Relative color syntax allows lab() to create a new color from an existing color.

The syntax begins with from followed by the origin color:

lab(from color L a b / alpha)

For example:

.box {
  background-color: lab(from red l a b);
}

The browser converts the origin color into Lab components and uses those values to define the result.

Individual channels can be adjusted using calc():

.box {
  background-color: lab(from #336699 calc(l + 10) a b);
}

This increases the Lab lightness of the origin color by 10 while retaining its other Lab components.

Another example changes both color axes:

.box {
  background-color: lab(from #336699 l calc(a + 10) calc(b - 10));
}

The available channel keywords are l, a, b, and alpha.

Channel values exposed to relative color calculations are numbers, so calculations such as calc(l + 10) use a unitless number rather than a percentage.

Relative color syntax has a separate browser compatibility history from basic lab() colors.

Color Gamut

A color gamut is the range of colors that a display or color space can represent.

The Lab color space can describe colors beyond the standard sRGB gamut.

For example:

.box {
  background-color: lab(65% 100 80);
}

This specifies a highly saturated Lab color that may fall outside the gamut of some displays.

When a requested color cannot be displayed directly, the browser maps it to a color the output device can represent.

As a result, the same Lab color may appear somewhat different across devices with different display capabilities.

Lab is device-independent as a color specification, but the final rendered appearance still depends on the display and color-management system.

For consistent visual design, test colors on both standard and wide-gamut displays when possible.

Using Gradients

Lab colors can be used as color stops in CSS gradients.

For example:

.gradient {
  background: linear-gradient(
    90deg,
    lab(60% 50 30),
    lab(60% -40 -30)
  );
}

The gradient transitions between two Lab colors.

The interpolation color space can also be specified explicitly:

.gradient {
  background: linear-gradient(
    in lab,
    lab(60% 50 30),
    lab(60% -40 -30)
  );
}

The in lab syntax requests interpolation in the Lab color space.

Using Lab colors as endpoints does not, by itself, require the gradient to interpolate in Lab. Explicit interpolation syntax provides that control.

Lab interpolation can produce different intermediate colors than interpolation in sRGB or OKLab.

Using Custom Properties

CSS custom properties can store Lab colors or individual Lab components.

For example:

:root {
  --brand-color: lab(55% 35 -45);
}
.button {
  background-color: var(--brand-color);
}

The color can be reused across multiple elements.

Individual components can also be stored:

:root {
  --lab-lightness: 60%;
  --lab-a: 35;
  --lab-b: -25;
}
.card {
  background-color: lab(var(--lab-lightness) var(--lab-a) var(--lab-b));
}

Changing the variables updates the resulting color.

For a color with transparency:

.card {
  background-color: lab(var(--lab-lightness) var(--lab-a) var(--lab-b) / 75%);
}

Custom properties make it easier to maintain consistent color values across a design.

lab() vs. rgb()

The lab() and rgb() functions describe colors using different coordinate systems.

For example:

color: rgb(255 0 0);
color: lab(54.29% 80.82 69.9);

These values describe approximately the same red color in different color spaces.

Use rgb() for familiar sRGB channel values and lab() when perceptual lightness or a wider color range is useful.

lab() vs. lch()

The lab() and lch() functions represent colors in related forms of the CIE Lab color space.

For example:

color: lab(60% 40 30);
color: lch(60% 50 36.87);

These values describe approximately the same color. The LCH chroma is calculated from the two Lab axes, while the hue angle identifies the direction.

Use lch() when directly adjusting hue and chroma is more convenient.

lab() vs. oklab()

The lab() and oklab() functions both separate lightness from two color axes, but they use different color models.

For example:

color: lab(60% 40 30);
color: oklab(0.6 0.1 0.1);

These values use different scales and do not represent identical colors.

Do not substitute the numeric components of one function directly into the other.

Example

This example shows how changing Lab lightness affects a neutral gray color.

HTML:

<div class="lab-lightness-demo">
  <div class="lab-lightness-item">
    <div class="lab-lightness-swatch lab-lightness-20"></div>
    <span>20%</span>
  </div>
  <div class="lab-lightness-item">
    <div class="lab-lightness-swatch lab-lightness-40"></div>
    <span>40%</span>
  </div>
  <div class="lab-lightness-item">
    <div class="lab-lightness-swatch lab-lightness-60"></div>
    <span>60%</span>
  </div>
  <div class="lab-lightness-item">
    <div class="lab-lightness-swatch lab-lightness-80"></div>
    <span>80%</span>
  </div>
</div>

CSS:

.lab-lightness-demo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.lab-lightness-item {
  min-width: 0;
  text-align: center;
}
.lab-lightness-swatch {
  height: 100px;
  border: 1px solid #ccc;
}
.lab-lightness-item span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.lab-lightness-20 { background-color: #303030; background-color: lab(20% 0 0); }
.lab-lightness-40 { background-color: #5e5e5e; background-color: lab(40% 0 0); }
.lab-lightness-60 { background-color: #919191; background-color: lab(60% 0 0); }
.lab-lightness-80 { background-color: #c6c6c6; background-color: lab(80% 0 0); }

All four colors have zero values for the a and b axes. Increasing the L component creates progressively lighter gray colors.

Color Axis Example

This example shows how positive and negative values on the Lab color axes change the resulting color.

HTML:

<div class="lab-axis-demo">
  <div class="lab-axis-item">
    <div class="lab-axis-swatch lab-axis-green"></div>
    <span>Negative a</span>
  </div>
  <div class="lab-axis-item">
    <div class="lab-axis-swatch lab-axis-red"></div>
    <span>Positive a</span>
  </div>
  <div class="lab-axis-item">
    <div class="lab-axis-swatch lab-axis-blue"></div>
    <span>Negative b</span>
  </div>
  <div class="lab-axis-item">
    <div class="lab-axis-swatch lab-axis-yellow"></div>
    <span>Positive b</span>
  </div>
</div>

CSS:

.lab-axis-demo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.lab-axis-item {
  min-width: 0;
  text-align: center;
}
.lab-axis-swatch {
  height: 100px;
  border: 1px solid #ccc;
}
.lab-axis-item span {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}
.lab-axis-green { background-color: #54a66b; background-color: lab(65% -50 0); }
.lab-axis-red { background-color: #f16b91; background-color: lab(65% 50 0); }
.lab-axis-blue { background-color: #779bea; background-color: lab(65% 0 -50); }
.lab-axis-yellow { background-color: #b9a33b; background-color: lab(65% 0 50); }

Negative a values move toward green, positive a values move toward red, negative b values move toward blue, and positive b values move toward yellow.

Browser Fallbacks

Modern browsers support basic lab() colors, but older browsers may not recognize the function.

Provide a conventional color declaration before the Lab value:

.button {
  background-color: #336699;
  background-color: lab(40% -5 -32);
}

Browsers supporting lab() use the second declaration. Older browsers retain the first.

The fallback should be chosen to resemble the intended Lab color rather than assuming the values are automatically equivalent.

For more complex color operations, check support separately for relative colors and interpolation syntax.

Common Uses

The lab() function is useful when working with perceptual color values and wide-gamut color design.

For example:

.card {
  background-color: lab(65% 25 -35);
  border-color: lab(45% 25 -35);
}

The two colors share the same color-axis values but use different lightness levels.

Limitations

The lab() function has several important rules and limitations.

• Three color components are required in absolute syntax, although none can represent a missing component.
• Components are separated by spaces, not commas.
• The optional alpha value must follow a forward slash.
• The a and b axes do not use the same numeric scale as OKLab.
• Some Lab colors fall outside the gamut of a display and require gamut mapping.
• Equal Lab lightness values do not guarantee identical visual contrast in every context.
• Relative color syntax and advanced gradient interpolation have separate compatibility considerations.
• Lab values do not automatically guarantee accessible text contrast.

For example, this is valid:

color: lab(60% 40 30 / 80%);

The following is invalid because commas are not allowed:

color: lab(60%, 40, 30);

The following is invalid because the required third component is missing:

color: lab(60% 40);

Use the required components and the correct space-separated syntax.

Browser Support

The CSS lab() function is Baseline Widely available. Basic Lab colors have been supported across major browser engines since May 2023.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support Lab colors.

For example:

.box {
  background-color: lab(60% 40 30);
}

Some related features, including relative color syntax, have different browser support histories. Check those features independently when using advanced expressions.

For current compatibility information, visit Can I Use? and search for CSS lab() colors.

Specifications

The lab() function is defined in the CSS Color Module Level 4 .

Relative color syntax is further described in the CSS Color Module Level 5 .

Related CSS functions include lch(), oklab(), oklch(), rgb(), hsl(), and color().