coderef

Oklab and OkLChBaseline · Widely available

The Oklab color space expresses colors in terms of lightness and how red/green and blue/yellow a color is, aiming to match how humans perceive colors. OkLCh is a variant of Oklab with polar coordinates. These color spaces can be used with the CSS oklab() and oklch() functions.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since May 9, 2023. Widely available since Nov 9, 2025.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Edge
12–110Not supported
111+Supportedsince Mar 13, 2023
Current: 154
Firefox
1–112Not supported
113+Supportedsince May 9, 2023
Current: 157
Safari
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27
MobileChrome Android
18–110Not supported
111+Supportedsince Mar 7, 2023
Current: 155
Firefox Android
4–112Not supported
113+Supportedsince May 9, 2023
Current: 157
Safari iOS
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS
:root {
  --accent: oklch(62% 0.19 260);
  /* same hue, lighter — perceptually even */
  --accent-soft: oklch(90% 0.05 260);
}

Feature detection

CSS · check before using
@supports (color: oklab(60% 0.1 -0.1)) {
  /* styles that use oklab */
}

/* or in JavaScript */
if (CSS.supports("color", "oklab(60% 0.1 -0.1)")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (4). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
<color>.oklab11111111315.411111315.4
<color>.oklab.mixed_type_parameters11611611316.211611316.2
<color>.oklch11111111315.411111315.4
<color>.oklch.mixed_type_parameters11611611316.211611316.2