DEV Community

Cover image for Future of CSS: color-mix function 🎨
Andrew Bone
Andrew Bone

Posted on • Updated on

Future of CSS: color-mix function 🎨

I always love to delve into the new and wonderful things coming to the web, today I'm going to look at the color-mix function which, at the time of writing, is not in any stable browser but has arrived in firefox behind a flag.

What does color-mix do?

The color-mix function allows you to mix colours (who'd have thought?) those colours can be named colours, hex colours or any sort of colour really. This is very exciting because it allows us to add some SCSS like functionality such as lighten, darken or even adjust-color's alpha.

Why are there colour spaces

Colour spaces are a whole other thing. A colour space is a way to mathematically define a set of colours. Using different colour spaces allows you to represent different colours. Naturally this means mixing colours in different colour spaces creates different results.

This is a video from Surma, while at Google, that explores colour spaces in more detail than I can.

Practical examples

I've thrown together a very quick example of some of the things you can do. As I mentioned earlier none of this code can run in a stable browser without flags so I've uploaded an image of the result too.

The examples I've done are,

  • tomato darkening by mixing with black,
  • teal lightening by mixing with white
  • purple becoming less opaque by mixing with transparent (technically a colour it seems)
  • red mixing to green

color-mix example

Fin

There we go, that's it for now. It's so cool to see little functions like this coming to css making it more powerful, maybe one day we won't need css pre processor's at all, especially with css nesting being talked about. Very exciting.

Thanks so much for reading. If you'd like to connect with me outside of Dev here are my twitter and linkedin come say hi 😊.

Top comments (5)

Collapse
 
baenencalin profile image
Calin Baenen

Þanks for introducing me to ðis!
I can't wait until ðis feature is stable.

Collapse
 
link2twenty profile image
Andrew Bone

You're more than welcome, with interop going strong this year new features like this should arrive in all evergreen browsers faster than ever before!

Collapse
 
baenencalin profile image
Calin Baenen

in all evergreen browsers faster than ever before!

Evergreen?

Thread Thread
 
link2twenty profile image
Andrew Bone

Browsers that are getting regular updates.

Collapse
 
link2twenty profile image
Andrew Bone

What new features are you looking forward to landing in stable?