CSS oklab() Function

CSS oklab() Function

The CSS oklab() function defines a color using perceptual lightness and two color-opponent axes in the Oklab color space.

Oklab is designed so that similar numerical changes produce more consistent perceived color differences than traditional RGB calculations. The function is useful for creating color variations, adjusting lightness, and working with modern CSS color interpolation.

Syntax

oklab(L a b)
oklab(L a b / alpha)

The function uses space-separated color components and an optional alpha value following a forward slash.

For example:

color: oklab(60% 0.1 0.1);
background-color: oklab(70% -0.1 0.1);
border-color: oklab(55% 0.1 -0.1 / 0.5);

The three main components represent lightness, the a-axis, and the b-axis.

The optional alpha component controls transparency.

Unlike the older comma-separated rgb() syntax, oklab() uses modern space-separated CSS color syntax.

The function returns a CSS <color> value and can be used with properties that accept colors.

Parameters

The oklab() function accepts three color components and an optional alpha component.

For example:

oklab(65% 0.1 0.05 / 0.8)

This color has 65% lightness, positive a and b components, and 80% opacity.

The a and b components can be written as numbers or percentages. For these components, 100% corresponds to 0.4 and -100% corresponds to -0.4.

For example, these values are equivalent:

oklab(60% 0.1 0.1)
oklab(60% 25% 25%)

The lightness component can also be written as a number, where 1 corresponds to 100%.

Values outside the usual ranges can be accepted by the syntax, although some colors cannot be displayed directly on a particular screen.

How It Works

Oklab describes color using perceptual lightness and two opponent color axes instead of red, green, and blue channels.

The three components are:

• L: Controls perceived lightness.
• a: Moves the color along a green-to-red direction.
• b: Moves the color along a blue-to-yellow direction.

For example:

oklab(60% 0 0)

With both color axes set to zero, the result is a neutral gray.

Changing the a component introduces color along the green-red axis:

oklab(60% 0.1 0)
oklab(60% -0.1 0)

Changing the b component introduces color along the blue-yellow axis:

oklab(60% 0 0.1)
oklab(60% 0 -0.1)

The axes work together to produce a wide range of colors.

Oklab is approximately perceptually uniform, meaning comparable coordinate differences are intended to correspond more closely to comparable visible differences.

This is useful when adjusting colors systematically, although actual perception still depends on viewing conditions and surrounding colors.

Lightness

The first component controls perceptual lightness.

For example:

oklab(30% 0 0)
oklab(60% 0 0)
oklab(90% 0 0)

These values produce neutral grays with increasing lightness.

Another example keeps the color axes unchanged while adjusting lightness:

oklab(40% 0.1 0.05)
oklab(60% 0.1 0.05)
oklab(80% 0.1 0.05)

The colors become lighter as the L component increases.

Unlike changing RGB channels directly, adjusting Oklab lightness provides a more perceptually meaningful way to create lighter and darker color variations.

However, changing lightness can move a color outside the displayable gamut, especially when the color axes remain strongly saturated.

Color Axes

The a and b components determine the color's position along two opponent axes.

The a-axis represents a green-to-red direction:

oklab(65% -0.1 0)
oklab(65% 0 0)
oklab(65% 0.1 0)

Negative values lean toward green, zero is neutral on that axis, and positive values lean toward red.

The b-axis represents a blue-to-yellow direction:

oklab(65% 0 -0.1)
oklab(65% 0 0)
oklab(65% 0 0.1)

Negative values lean toward blue, while positive values lean toward yellow.

Combining both axes creates colors between these directions:

oklab(65% 0.1 0.1)
oklab(65% -0.1 0.1)
oklab(65% 0.1 -0.1)
oklab(65% -0.1 -0.1)

These axes do not directly represent hue and saturation. For a more intuitive lightness, chroma, and hue model, use oklch().

Alpha and Transparency

The optional alpha component controls a color's opacity.

It follows a forward slash after the three main color components.

For example:

oklab(60% 0.1 0.05 / 1)
oklab(60% 0.1 0.05 / 0.5)
oklab(60% 0.1 0.05 / 0)

The first color is fully opaque, the second is 50% opaque, and the third is fully transparent.

Alpha can also be expressed as a percentage:

oklab(60% 0.1 0.05 / 50%)

This is equivalent to an alpha value of 0.5.

For example:

.overlay {
  background-color: oklab(50% 0.1 -0.1 / 0.4);
}

The overlay uses 40% opacity, allowing content behind it to remain partially visible.

Alpha affects transparency, not the underlying Oklab lightness or color-axis values.

Missing Components

The none keyword can represent a missing color component in modern CSS color syntax.

For example:

oklab(60% none 0.1)

This specifies lightness and the b-axis while marking the a-axis as missing.

Another example:

oklab(60% 0.1 none / 0.8)

The b component is missing, and the alpha value is 0.8.

Missing components can be useful during color interpolation, where CSS can preserve or borrow component information according to the interpolation rules.

Outside such contexts, a missing component generally behaves like zero for color rendering.

The none keyword is not the same as omitting a required argument. The three main component positions must still be present.

Relative Colors

Relative color syntax allows an oklab() color to be derived from another color.

For example:

.box {
  color: oklab(from #0066cc l a b);
}

The source color is converted into Oklab, and its lightness and color-axis components are reused.

Individual components can be adjusted:

.box {
  color: oklab(from #0066cc calc(l + 0.1) a b);
}

This increases the Oklab lightness component by 0.1, equivalent to 10 percentage points.

Another example changes transparency:

.box {
  background-color: oklab(from #0066cc l a b / 50%);
}

This preserves the source color's Oklab components while applying 50% opacity.

Relative colors can also use custom properties:

:root {
  --brand-color: #0066cc;
}
.button {
  background-color: oklab(from var(--brand-color) l a b);
}
.button:hover {
  background-color: oklab(from var(--brand-color) calc(l + 0.1) a b);
}

Relative color syntax requires browser support beyond basic oklab() color notation.

Out-of-Gamut Colors

Oklab can describe colors that fall outside the range a particular display or color space can reproduce.

For example:

oklab(70% 0.3 0.2)

This specifies relatively large positive color-axis components and may fall outside the standard sRGB gamut.

Browsers can process such colors, but the final displayed result depends on the destination color space and gamut-mapping behavior.

When a color is outside the available display gamut, the browser maps it to a displayable color according to CSS color processing rules.

This means two different Oklab values can appear similar or identical on a limited-gamut display.

For predictable results, test colors on typical displays and avoid assuming that every numerically valid Oklab value can be reproduced exactly.

oklab() vs. lab()

The oklab() and lab() functions both describe colors using lightness and two opponent color axes, but they use different color models.

For example:

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

These are different colors because the coordinate systems and component scales are not interchangeable.

Oklab was developed to improve the consistency of perceived color differences, particularly for modern digital color applications.

Neither function guarantees identical perceived differences under every viewing condition.

oklab() vs. oklch()

The oklab() and oklch() functions describe the same underlying Oklab color space using different coordinate systems.

The oklab() function uses rectangular coordinates:

oklab(L a b)

The oklch() function uses polar coordinates:

oklch(L C H)

The two coordinate systems can be converted mathematically:

C = sqrt(a * a + b * b)
H = atan2(b, a)

For example, these colors represent approximately the same coordinates:

oklab(60% 0.1 0.1)
oklch(60% 0.1414 45)

The oklch() notation is often easier for designers because hue and chroma can be adjusted independently.

The oklab() notation is useful when working directly with color-axis coordinates.

Example

This example compares colors created by changing the Oklab a and b components while keeping lightness constant.

HTML:

<div class="oklab-demo">
  <div class="oklab-demo-item oklab-demo-red">Positive a</div>
  <div class="oklab-demo-item oklab-demo-green">Negative a</div>
  <div class="oklab-demo-item oklab-demo-yellow">Positive b</div>
  <div class="oklab-demo-item oklab-demo-blue">Negative b</div>
</div>

CSS:

.oklab-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.oklab-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  padding: 10px;
  color: #111111;
  text-align: center;
  font-size: 13px;
}
.oklab-demo-red {
  background-color: oklab(75% 0.1 0);
}
.oklab-demo-green {
  background-color: oklab(75% -0.1 0);
}
.oklab-demo-yellow {
  background-color: oklab(75% 0 0.1);
}
.oklab-demo-blue {
  background-color: oklab(75% 0 -0.1);
}

All four colors use 75% lightness, but their color-axis values differ.

The example illustrates how positive and negative a and b values shift colors along the opponent axes.

Lightness Example

This example creates three color variations by changing only the lightness component.

HTML:

<div class="oklab-lightness-demo">
  <div class="oklab-lightness-item oklab-lightness-dark">40% Lightness</div>
  <div class="oklab-lightness-item oklab-lightness-medium">60% Lightness</div>
  <div class="oklab-lightness-item oklab-lightness-light">80% Lightness</div>
</div>

CSS:

.oklab-lightness-demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.oklab-lightness-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}
.oklab-lightness-dark {
  background-color: oklab(40% 0.05 -0.08);
  color: #ffffff;
}
.oklab-lightness-medium {
  background-color: oklab(60% 0.05 -0.08);
  color: #ffffff;
}
.oklab-lightness-light {
  background-color: oklab(80% 0.05 -0.08);
  color: #111111;
}

The a and b components remain unchanged, while the lightness increases from 40% to 80%.

This demonstrates how Oklab can create lighter and darker variations of a color using one component.

Common Uses

The oklab() function is useful for defining and manipulating colors using perceptually oriented coordinates.

For example:

.button {
  background-color: oklab(60% 0.05 -0.12);
}
.button:hover {
  background-color: oklab(70% 0.05 -0.12);
}
.button:active {
  background-color: oklab(50% 0.05 -0.12);
}

The button uses the same a and b values across its states while changing lightness.

For color systems where hue and chroma need to be adjusted directly, oklch() may be easier to use.

Limitations

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

• Three main component positions are required.
• Components use space-separated syntax rather than comma-separated syntax.
• The optional alpha component follows a forward slash.
• The a and b axes do not directly represent hue or saturation.
• Some valid Oklab colors fall outside the gamut of common displays.
• Out-of-gamut colors may be mapped to different displayable colors.
• Perceptual uniformity is approximate rather than perfect.
• Relative color syntax has separate browser compatibility requirements.
• Older browsers may not support Oklab color notation.
• Readable text contrast must still be checked when using Oklab colors.

For example, this is valid:

color: oklab(60% 0.1 0.1);

The following is invalid because it uses commas:

color: oklab(60%, 0.1, 0.1);

The following is invalid because the b component is missing:

color: oklab(60% 0.1);

To mark a component as missing, use the none keyword in its position:

color: oklab(60% 0.1 none);

Use a fallback color when supporting browsers that do not recognize oklab().

Browser Support

The CSS oklab() function is Baseline Newly available, with support across major browser engines beginning in 2023.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support Oklab color notation.

For example:

.box {
  background-color: oklab(65% 0.1 -0.1);
}

For older browsers, provide a fallback color before the Oklab declaration:

.box {
  background-color: #6666cc;
  background-color: oklab(65% 0.1 -0.1);
}

Browsers supporting oklab() use the Oklab color, while unsupported browsers retain the hexadecimal fallback.

Relative color syntax, including oklab(from ...), has separate compatibility considerations and may require newer browser versions.

For current compatibility information, visit Can I Use? and search for Oklab color model.

Specifications

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

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

Related CSS functions include oklch(), lab(), lch(), color(), and color-mix().