Mixing Colors in Pure CSS

Red and blue equal to purple... right?

How to express this in CSS? Not easy. Although there is a draft proposal for the color-mix function and Chrome also shows some interest, it doesn't seem to be right in front of you. Having native CSS color mixing will be great as it provides more flexibility when designers work on colors. For example, a tone variation of a single base color can be created to form a design palette.

But this is CSS-Tricks, so let's do some CSS tricks.

We have a calc() function in CSS for manipulating numbers . However, there is little way to manipulate colors directly, even if some color formats such as hsl() and rgb() are numerical.

Mix colors with animation

We can use CSS to transition between one color and another. This works:

 div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  background: red;
}

Here is an example of using animation:

 div {
  background: blue;
  transition: 0.2s;
}
div:hover {
  animation: change-color 0.2s forwards;
}

@keyframes change-color {
  to {
    background: red;
  }
}

This is an infinitely running keyframe animation where you can see the colors move between red and blue. Open the console and click on the page – Even JavaScript can tell you the current color at any precise point in the animation.

So, what if we pause in the middle of the animation? Color mixing works! This is a paused animation with a duration of 0.5 seconds for 1 second, so it's just halfway through:

We do this by setting an animation-delay of -0.5s. What is the color half between red and blue? Purple. We can adjust animation-delay to specify the percentage of the two colors.

This works with Chromium kernel browsers and Firefox. In Safari, you must change the animation-name to force the browser to recalculate the animation progress.

This trick can also be used to add alpha channels to colors, which is often useful for theme designs.

Add blended colors to CSS custom properties

So far this is a clever trick, but it's not practical to apply animation to any element you need to use a blended color and then have to set all the properties you want to change in @keyframes .

If we add several CSS features, we can improve this:

1. Use CSS custom properties of type @property so that they can be created as appropriate colors so that they can be animated as colors.
2. Use Sass @function to easily call keyframes at specific points.

Now we still need to call the animation, but the result is that we can use custom properties for any other properties.

The above is the detailed content of Mixing Colors in Pure CSS. For more information, please follow other related articles on the PHP Chinese website!