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.
Top comments (0)