DEV Community

Dzmitry Hutaryan
Dzmitry Hutaryan

Posted on

4 3 2 3 2

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);
}
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more