OKLCH Theming

What is OKLCH?

OKLCH is a perceptually uniform color space with three channels:

L — lightness (0% black, 100% white)
C — chroma / saturation (0 = gray, ~0.25 = vivid)
H — hue angle in degrees (0° red, 120° green, 240° blue, 270° indigo)

Browser support: All modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+).

Reading OKLCH values

--color-primary: oklch(55% 0.22 270);
/*                      ↑   ↑    ↑
                         L   C    H
                    lightness  chroma  hue (indigo)
*/

Hue angle reference

The semantic state roles each live at a fixed hue angle, chosen for perceptual distinctness regardless of the project’s brand hue:

--color-danger —

--color-warning —

--color-info —

--color-success —

Role	H°	Perception
`--color-danger`	27°	Red-orange — error, destructive
`--color-warning`	80°	Amber — caution
`--color-info`	240°	Blue — neutral information
`--color-success`	155°	Green — positive outcome

Brand palette (indigo seed)

The brand roles adapt to any seed hue. The defaults shown here use indigo (270°):

--color-primary —

--color-primary-hover —

--color-accent —

--color-focus-ring —

Token	Value
`--color-primary`	—
`--color-primary-hover`	—
`--color-accent`	—
`--color-focus-ring`	—

Working in DevTools

Chrome and Firefox DevTools display OKLCH values in the color picker. Click the color swatch next to an oklch() value to open the picker and adjust L, C, H interactively.

To see how your theme colors map visually, inspect <html> in DevTools → Computed → filter by --color-.