postcss-preset-env

PostCSS Color Mix Function

By Antonio Laguna and Romain Menke.

We are happy to announce the release of @csstools/postcss-color-mix-function, a PostCSS plugin to use the color-mix() function in any browser.

This plugin uses @csstools/css-color-parser under the hood to parse the color values, checkout the blog post for all the technical details.

If you are using postcss-preset-env you will already have this plugin when using the latest version.

Try it out in this interactive demo that showcases with a Venn diagram how colors are mixing together:

color-mix(in srgb, #ff0000, #0000ff 50%) #800080

Definitely check out the awesome blog post by Una on color-mix. It showcases a similar widget but purely using native color-mix(), so it's a great way to compare the two.

After color-mix() we will focus on bringing relative color syntax to PostCSS Preset Env, but we are still waiting for a few specification issues to be resolved. Subscribe to this issue to follow along.