Documentation

Everything you need to know about the OKLCH color space.

Colors, but finally honest

OKLCH is a color space where the numbers actually match what your eyes see. Pick a lightness of 70% and every color looks equally bright. No tricks, no surprises.

CSS Color Level 4All Modern BrowsersWide Gamut

The problem with HSL

HSL lies to your eyes. Set the same lightness on yellow and blue: yellow looks almost white while blue looks almost black. Same number, completely different result. OKLCH fixes this.

Lightness70%

HSL at 70% lightness

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Purple

OKLCH at 70% lightness

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Purple

The three channels

Lightness

0 to 1

How bright a color is. 0 is pure black, 1 is pure white. Unlike HSL, changing lightness here always looks the same to your eyes, no matter the color.

Chroma

0 to 0.37

How vivid a color is. 0 is completely gray, higher values are more colorful. Very high values may not display on all screens.

Hue

0 to 360

Which color on the wheel. Think of it like a clock: red at the top, yellow at 90, green at 145, blue at 265, purple at 305.

#5086ffoklch(0.65 0.2 264)

L65%

C0.200

H264°

Better gradients

HSL gradients between opposite colors turn muddy gray in the middle. OKLCH keeps colors vibrant through the entire transition.

HSLOKLCH

Wide gamut colors

Modern screens can show 50% more colors than old sRGB. OKLCH lets you use all of them. Push the chroma slider up and watch the badge change when you leave sRGB territory.

Display P3

Hue150°

Chroma0.200

oklch(0.7 0.2 150)

Build palettes

Type any CSS color and get 11 shades instantly. Because OKLCH is perceptually uniform, every shade looks exactly as bright as it should.

50100200300400500600700800900950975

Use it in CSS

OKLCH works in all modern browsers (Chrome 111+, Safari 15.4+, Firefox 113+). That covers about 96% of users.

/* Set a color */
.button {
  background: oklch(0.7 0.15 264);
}

/* Define your palette as variables */
:root {
  --brand-500: oklch(0.65 0.2 264);
  --brand-100: oklch(0.93 0.04 264);
  --brand-900: oklch(0.25 0.12 264);
}

/* Lighten or desaturate with relative colors */
.button:hover {
  background: oklch(from var(--brand-500) calc(l + 0.1) c h);
}