hwb(), lab() & oklch()

hwb(), lab() & oklch()

A new generation of color functions with more pleasing, consistent colors.

hwb(): hue, whiteness, blackness

p {
  color: hwb(240 10% 0%);      /* blue with 10% white */
  color: hwb(120 0% 20% / 0.5);
}

lab(): CIE Lab color space

p {
  color: lab(50% 40 59.5);      /* luminance, a, b */
}

lch(): lightness, chroma, hue

p {
  color: lch(60% 40 240);       /* nice blue */
}

oklch(): the current favorite

Modern, predictable lightness. Great for design systems:

p {
  color: oklch(70% 0.15 230);   /* consistent light blue */
}

oklab()

p {
  color: oklab(70% 0.05 -0.1);
}

Why care

• oklch() keeps LIGHTNESS perceptually even (better gradients and contrast).
• Media/UI frameworks (and CSS itself) push toward it.

TL;DR

• hwb: hue + whiteness + blackness.
• lab/lch: scientific color spaces.
• oklch/oklab: modern, evenly-spaced lightness.
• oklch(lightness chroma hue) is the current default for gradients.