Color Functions

Modern CSS does color manipulation that used to require Sass / Less.

color-mix() — Blend Two Colors

color: color-mix(in srgb, blue 50%, red);          /* halfway */
color: color-mix(in oklch, blue 50%, red);          /* perceptually uniform */
background: color-mix(in oklab, #6360ff 70%, white); /* lighter brand */

in <space> picks the color space for mixing. oklch or oklab gives the smoothest result.

Lighten and Darken — From a Token

:root {
  --brand: #6360ff;
  --brand-soft: color-mix(in srgb, var(--brand) 30%, white);
  --brand-strong: color-mix(in srgb, var(--brand) 80%, black);
}

.hover-bg { background: var(--brand-soft); }

A whole palette from one base color.

OKLCH — Perceptual Uniformity

color: oklch(70% 0.2 30);       /* L=70%, chroma=0.2, hue=30deg */

Same lightness percentage = same VISUAL lightness across hues. Means a “70% lightness blue” looks as bright as a “70% lightness yellow”, unlike HSL where the same numbers can look very different.

Great for design systems with consistent contrast across hues.

Relative Color Syntax

Derive one color from another at runtime:

:root {
  --brand: oklch(60% 0.2 240);
  --brand-light: oklch(from var(--brand) calc(l + 0.2) c h);
  --brand-faded: oklch(from var(--brand) l calc(c * 0.5) h);
}

from <color> exposes the channels (l, c, h here) as variables you can do math on. Very powerful for theming.

Wide Gamut Color

color: color(display-p3 1 0 0);   /* a redder red than sRGB can show */

On wide-gamut displays (Macs since 2016, most modern monitors), P3 colors look more saturated than the sRGB equivalents. Use sparingly — many users still have sRGB-only screens.

Up Next

Logical properties — margin-inline-start and friends.