The color-mix() function allows us to specify the two colors we want to mix and then outputs the result. We can control the amount of each color in the mix, as well as the color interpolation space, which determines how the colors blend together.
The color interpolation method is a required parameter. We’ll cover it in a later section. For now, we’ll use srgb to walk through the examples.
We specify the amount of each color as percentages. If we omit the percentages of both colors, color-mix() will use 50% for each by default. As shown below, mixing red and blue in equal parts gives us a purple hue as expected.
If we specify the percentage for only one color, the percentage for the other color is automatically adjusted so that the total adds up to 100%. For example, whether we specify 90% for blue or 10% for red, the result is the same — a color that’s mostly blue with a hint of red.
<divclass="wrapper"><divclass="group"><code>color-mix(in srgb, blue 90%, red)</code><divclass="row"><divclass="mix"></div><divclass="result"></div></div></div><divclass="group"><code>color-mix(in srgb, blue, red 10%)</code><divclass="row"><divclass="mix"></div><divclass="result"></div></div></div></div>
color-mix(in srgb, blue 90%, red)color-mix(in srgb, blue, red 10%)
If the sum of the percentages for the two colors is less than 100%, the color-mix() behavior is slightly different: the sum is saved as an alpha multiplier, and the two colors are scaled using this multiplier so that their total reaches 100%. (See the Percentage Normalization section in the specification for a few examples).
Although both the color-mix() functions below mix the same amount of each color, the second function, where the sum of the percentages is 40%, produces the same color but with an alpha value of 0.4:
<divclass="wrapper"><divclass="group"><code>color-mix(in srgb, blue, red)</code><divclass="row"><divclass="mix"></div><divclass="result"></div></div></div><divclass="group"><code>color-mix(in srgb, blue 20%, red 20%)</code><divclass="row"><divclass="mix"></div><divclass="result"></div></div></div></div>
*{box-sizing: border-box;}body{padding: 1rem;}code{display: block;margin-bottom: 0.75rem;font-size: 1.1rem;font-weight: 600;}.wrapper{width:min(100%, 40rem);margin: 2rem auto;display: grid;gap: 2rem;}.group .row{display: flex;gap: 1rem;width: 100%;}.mix{flex: 1 0 auto;background:linear-gradient(to right, blue 50%, red 0);border: 2px solid;}.result{flex: 0 0 20%;background:color-mix(in srgb, blue, red);border: 2px solid;aspect-ratio: 4 / 3;}.group:nth-child(2) .mix{background:linear-gradient(
to right,
blue 20%,
red 0,
red 40%,
transparent 0
);}.group:nth-child(2) .result{background:color-mix(in srgb, blue 20%, red 20%);}
color-mix(in srgb, blue, red)color-mix(in srgb, blue 20%, red 20%)
