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