CSS: LAB, LCH color

what is LAB color

lab() and lch() are perceptually uniform color space based on CIELAB (human vision model).

lab(Lightness a b)

• Lightness (0 to 100)
• a (green to red)
• b (blue to yellow).

.x {
 color: lab(60 40 20);

 /* same as */

 color: lab(60% 40 20);
}

LCH color

lch(Lightness Chroma Hue)

• Lightness
• Chroma (saturation-like)
• Hue

oklab() and oklch()

oklab() and oklch()

Improved version of LAB/LCH with better uniformity (especially for blues and mid-tones).

.x {
 color: oklab(0.7 0.1 0.05); /* Cartesian */
 color: oklch(70% 0.2 240deg); /* Polar — most practical */
 color: oklch(45% 0.26 264); /* vivid blue */
}