I all the time like to delve into the brand new and great issues coming to the online, at the moment I am going to take a look at the color-mix perform which, on the time of writing, will not be in any steady browser however has arrived in firefox behind a flag.
What does color-mix do?
The color-mix perform means that you can combine colors (who’d have thought?) these colors may be named colors, hex colors or any kind of color actually. That is very thrilling as a result of it permits us so as to add some SCSS like performance resembling lighten, darken and even adjust-color‘s alpha.
Why are there color areas
Color areas are an entire different factor. A color house is a solution to mathematically outline a set of colors. Utilizing totally different color areas means that you can symbolize totally different colors. Naturally this implies mixing colors in several color areas creates totally different outcomes.
This can be a video from Surma, whereas at Google, that explores color areas in additional element than I can.
Sensible examples
I’ve thrown collectively a really fast instance of a few of the issues you are able to do. As I discussed earlier none of this code can run in a steady browser with out flags so I’ve uploaded a picture of the end result too.
The examples I’ve finished are,
- tomato darkening by mixing with black,
- teal lightening by mixing with white
- purple changing into much less opaque by mixing with clear (technically a color it appears)
- pink mixing to inexperienced
Fin
There we go, that is it for now. It is so cool to see little features like this coming to css making it extra highly effective, possibly someday we can’t want css pre processor’s in any respect, particularly with css nesting being talked about. Very thrilling.
Thanks a lot for studying. If you would like to attach with me exterior of Dev listed here are my twitter and linkedin come say hello 😊.
