17 · OKLCH + color-mix

OKLCH + color-mix

Perceptually uniform color and mixes in any space

oklch Chrome 111+ · color-mix Chrome 111+

oklch()

The perceptually uniform color space. The same lightness value looks equally light/dark across all hues — something hsl() can't achieve.

background: oklch(70% 0.18 250)

color-mix()

Mixes two colors in any color space. Here we mix amber with zinc in oklch.

25%

50%

75%

100%

color-mix(in oklch, amber, zinc 50%)

Why oklch

In hsl() pure yellow and pure blue have the same "50%" lightness but yellow looks much lighter. oklch fixes this: same L = same perceived luminance.

css

/* oklch: L lightness, C chroma, H hue */
/* misma L = misma luminancia percibida en todos los tonos */
.swatch-1 { background: oklch(70% 0.18 0); }   /* rojo */
.swatch-2 { background: oklch(70% 0.18 150); } /* verde */
.swatch-3 { background: oklch(70% 0.18 250); } /* azul */

/* color-mix: mezcla dos colores en oklch */
.mid {
  background: color-mix(
    in oklch,
    var(--amber-500),
    var(--zinc-100) 50%
  );
}

An honest note on support

Many of these APIs are recent and not yet in every browser (see the pill on each section). The nice part is they all degrade gracefully: the carousel still scrolls, the accordion opens/closes, the textarea works — just without the animated "plus".