The color-mix() function

This is another very new function for color, so much so that I have had to enable experimental features in one of the only browsers that has an implementation currently – Safari. As ever, check support for features at caniuse.com (https://caniuse.com/?search=color-mix()).

Consider swatch 10 in our example. You should see a color that is like a mix between gold and orange, because that is exactly what it is!

Here, we are using the color-mix() function to mix gold and orange:

.mix {
    background-color: color-mix(in lch, gold 50%, orange);
}

The color-mix() function lets you specify a color space to mix in, and then two colors to mix in that color space. It’s like kindergarten for web developers!

Here are the essentials to understand. You pass a percentage after the first color (and you can use any of the color notations we have looked at in this chapter) and that is the amount of that color passed into the “mixer....