color-mix()

color-mix()

Mix two colors together right in CSS, like a mini color mixer.

The syntax

color-mix(in <space>, <color1> <percent>, <color2>):

.badge {
  color: color-mix(in srgb, red, blue);          /* 50/50 purple */
  color: color-mix(in srgb, red 70%, blue);      /* more red */
  color: color-mix(in oklab, #04aa6d, white 30%); /* lighter green */
}

Mixing spaces

• in srgb: the default, standard color space.
• in oklab: more even results.

Use in design systems

Light/dark variants without computing values:

:root {
  --brand: #04aa6d;
  --brand-hover: color-mix(in srgb, var(--brand), black 15%);
  --brand-soft: color-mix(in srgb, var(--brand), white 60%);
}

Common uses

• Hover shades.
• Subtle tinted backgrounds.
• Theming with base + modifiers.

TL;DR

• color-mix(in srgb, a 70%, b) mixes two colors.
• Percentages pick the balance.
• in oklab produces nicer blends.
• Great for auto-generating hover/soft variants.