Widely available Supported across all major browsers. Safe to use in production.

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
oklab
111
111
113
15.4
111
15.4
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 
/* OKLCH: oklch(luminance, saturation, hue / opacity) */
:root {
  --brand: oklch(0.6 0.15 250);
  --brand-light: oklch(0.8 0.1 250);
  --brand-dark: oklch(0.4 0.15 250);
}

/* OKLab: oklab(luminance a-axis b-axis) */
.oklab-example {
  background: oklab(0.7 -0.1 0.1);
}

/* Perceptually uniform color scale */
.palette {
  --hue: 250;
  --step-1: oklch(0.95 0.03 var(--hue));
  --step-5: oklch(0.70 0.12 var(--hue));
  --step-9: oklch(0.30 0.12 var(--hue));
}

Live demo

OKLCH lightnessske-l

OKLab and OKLCH OKLCH lightnessske-l demo.

PreviewFullscreen

Oklab col-

OKLab and OKLCH OKLab col- demo.

PreviewFullscreen

OKLCH Colorphase

OKLab and OKLCH OKLCH colorphase demo.

PreviewFullscreen

Use cases

  • Using 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.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links