Widely available Useful when Oklab and OkLCh adds a clear capability without requiring fragile workarounds.

Oklab and OkLCh

The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye.

Oklab is a perceptual color space and is useful to:

Transform an image to grayscale, without changing its lightness.

Modify the saturation of colors, while keeping user perception of hue and lightness

Create smooth and uniform gradients of colors (when interpolated manually, for example, in a <canvas> element).

oklab() works with a Cartesian coordinate system on the Oklab color space — a- and b-axes. It can represent a wider range of colors than RGB, including wide-gamut and P3 colors. If you want a polar color system, chroma and hue, use oklch().

Color

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.oklab
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
oklch

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
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* 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