How to mix colors in css?

There is a way to mix colors in pure css.
The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Now, it has a good enough browsers support and we can use it.

This function takes color interpolation method as the first parameter and colors as other parameters.

div {
  background-color: color-mix(in srgb, yellow, red);
}

As a result we will see a mixed color for yellow and red.
Moreover, we can manage how much color should be used to mix a new one.

div {
  background-color: color-mix(in srgb, yellow, red 75%);
}

In this case we will take 25% of yellow color and 75% of red color and mix them.

Don't think this feature will be used so much but it might be helpful sometimes.