CSS color-mix()

Adam Argyle

The CSS color-mix() function lets you mix colors, in any of the supported color spaces, right from your CSS.

Before color-mix(), to darken, lighten, or desaturate a color, developers used CSS preprocessors or calc() on color channels.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass has done great work staying ahead of the color CSS specification. There has not, however, been a real way to mix colors in CSS. To get close you need to do math of partial color values. Here's a reduced example of how CSS may simulate mixing today:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() brings the ability to mix colors to CSS. Developers can choose which color space they mix in and how dominant each color should be in the mix.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

That's what we want. Flexibility, power and fully featured APIs. Love it.

Mixing colors in CSS

CSS exists in a multiple color space and color gamut world, and because of this it's not optional to specify the color space for mixing. Furthermore, different color spaces can drastically change the results of a mix, so knowing the effects of a color space will help you get the results you need.

For an interactive introduction, try this color-mix() tool: - Explore the effects of each color space. - Explore the effects of hue interpolation when mixing in a cylindrical color space (lch, oklch, hsl, and hwb). - Change the colors being mixed by clicking either of the top two color boxes. - Use the slider to change the mixing ratio. - Generated color-mix() CSS code available at the bottom.

Mixing in the various color spaces

The default color space for mixing (and gradients) is oklab. It provides consistent results. You can specify alternative color spaces too, to tailor the mix to your needs.

Take black and white for example. The color space they mix in won't make that big of a difference, right? Wrong.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);