Entry 03

OKLCH color

Write colors in oklch() and derive every related color from a base with color-mix(in oklch, …). Never hardcode a second hex or an rgba() for a hover, tint or transparent version.

Open

Move the hue. The hover and the subtle color follow, and stay as light as they were.

Code CSS · 5 lines

:root {
  --primary: oklch(55% 0.15 250);
  --primary-hover: color-mix(in oklch, var(--primary), black 15%);
  --primary-subtle: color-mix(in oklch, var(--primary) 12%, transparent);
}

Why it works, the rules and the credits 3 reasons · 1 rule · credits

Why it works

The three channels are lightness, chroma and hue. Lightness is perceptual, so two colors with the same L look equally light whatever their hue. Scales and contrast become predictable.
Mixing in OKLCH keeps the hue of the base color, where sRGB mixing drifts toward gray.
One base value drives the whole family. Change the base and the hover and subtle versions follow.

Rules

Write grays, white and black with none as the hue, as in oklch(98% 0 none). A written hue of 0 is red, and it pulls every mix toward red. Half white oklch(1 0 0) and half a blue at hue 264 came out at hue 312 in Chrome and Safari. With none, or with the keyword white, it stayed at 264.

Credits

Borrowed from: Andrey Sitnik and Travis Turner (Evil Martians), OKLCH in CSS: why we moved from RGB and HSL · Björn Ottosson, A perceptual color space for image processing

Docs: MDN: oklch() · MDN: color-mix() · oklch.com picker