A deep dive into CSS color-mix()

Learn how to use CSS color-mix() to create stunning colors. This comprehensive guide covers everything you need to know about this powerful CSS function.

Another feature making its way in from preprocessors like Sass, we can now mix colors in CSS!

In this one, I go over the basics of how it works, look at how we can play with the percentages, what happens when the percentages are below 100% total, how the different color models work, and how we can mix colors in different directions (which doesnโ€™t sound like it should be a thing, but it is ๐Ÿ˜…).

I also take a very quick look at how we can create color schemes by using color-mix() as well, to help show a little bit of a more practical example of it in action.


โŒš Timestamps
00:00 - Introduction
00:30 - The very basics
02:20 - Mixing specific percentages of each color
04:00 - When the percentages donโ€™t equal 100%
05:35 - The color models
08:40 - lab, oklab, lch, and oklch
10:25 - mixing colors in different directions
14:32 - Creating a color scheme with color-mix(

๐Ÿ”— Links 
โœ… Browser support for color-mix(): https://caniuse.com/mdn-css_types_color_color-mix 
โœ… All the codepens from this video: https://codepen.io/collection/BNOMbj 
โœ… CSS color-mix() on the Chrome Developers Blog: https://developer.chrome.com/blog/css-color-mix/ 
โœ… CSS color-mix() MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix 
โœ… More on the different color models: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_color_model 

#css

CSS color-mix(): A Comprehensive Guide
3.05 GEEK