Oklab and OkLCh
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.
Overview
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 113 | 15.4 | 111 | 15.4 | |
| CSS type | ||||||
oklab.mixed type parameters Mix `<percentage>` and `<number>` in parameters | 116 | 116 | 113 | 16.2 | 116 | 16.2 |
| The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of color_value/oklab, using the same L axis, but with polar Chroma (C) and Hue (h) coordinates. | 111 | 111 | 113 | 15.4 | 111 | 15.4 |
oklch.mixed type parameters Mix `<percentage>` and `<number>` in parameters | 116 | 116 | 113 | 16.2 | 116 | 16.2 |
Syntax
/* Oklab and OkLCh */
/* See MDN Web Docs for details */Use cases
Browser-native behavior
Use Oklab and OkLCh to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.
Related links
Powered by web-features