color-mix() & relative colors

color-mix() mixes two colours together — generating intermediate colours without needing a preprocessor. Relative colour syntax lets you modify an existing colour (brighten, desaturate, shift hue) using the same function. Both eliminate the need for colour utility variables in many cases.

color-mix() — averaging colours

CSS

/* color-mix(space color1 percent1, color2 percent2) */
color: color-mix(in srgb, #0066cc 80%, #ffffff);    /* tint */
color: color-mix(in srgb, #0066cc 60%, #000000);    /* shade */
color: color-mix(in oklch, #0066cc, #ff6600);       /* 50/50 mix */
color: color-mix(in lch, #0066cc 30%, #ff0000 70%); /* 30/70 mix */

/* Generate hover states */
.btn {
  background: #0066cc;
}
.btn:hover {
  background: color-mix(in srgb, #0066cc, white 15%); /* tint on hover */
}

/* The space matters — mixing in oklch looks different from srgb */

Relative colour syntax

CSS

/* Modify a colour — adjust hue, saturation, lightness */
--primary: oklch(0.55 0.2 264);

/* Lighter version */
color: oklch(from var(--primary) calc(l + 0.2) c h);

/* Less saturated */
color: oklch(from var(--primary) l calc(c * 0.5) h);

/* Hue shift */
color: oklch(from var(--primary) l c calc(h + 30));

/* All at once */
color: oklch(from var(--primary) calc(l * 0.9) calc(c * 0.8) calc(h + 10));

Controlling transparency and opacity: [opacity & alpha transparency](/css/opacity-alpha).