A deep dive into CSS color-mix()

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.

🔗 Links

⌚ 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(

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[UmzGames]

Brilliance. Not just the CSS knowledge, but the use-case example.

[Mr.RobotHead]

I just used `color-mix()` for the first time this week, and I really didn't grok the color mode (but got things working nicely). I really appreciate the info you presented on those.

[ScottMackey]

Personally I've chosen OKLCH with it better supporting contrast for accessibility. Future of css color seems to be aiming for either something close to OKLCH or OKLAB. They offer HDR colors for the web, so much better than our current SDR options. 84% current browser support is very good, that includes most of the main browsers we really care about too. Thanks for another great video Kevin 😁

[tumbler]

Thank you, I didn't know this one yet. Browser-support seems to be OK.
Provides a very fast & easy way to get light and dark shades of your primary colors, or to easily produce consistent color variations.

[clevermissfox]

I had just watched the theme picker video! The color mix to acheive these different thrmes is perfect!!

[papayoulele]

You are a true source of inspiration and development. Thx for all

[ssava_ema]

Another awesome content just got two concepts in one video. I didn't know that I can actually switch between themes/modes using the :has() pseudo class. Thanks Kevin for always producing quality content on CSS I believe am the next CSS monster 💪💪💪

[RobBulmahn]

I think srgb mixing looks better; oklab was giving some weird shifts occasionally in your examples, but srgb was always pretty much what I'd have expected it to produce.

[balogunmuhammadawwal]

Oh
Thanks amazing
I can't wait to watch your video on gradient with color mix
You really help me project to stand

[calyodelphi]

Based on your demonstrations I think I like the way the srgb model does color mixing even better than oklab.

[niner]

This "in [colormodel]" should also be an option for CSS color gradients.

[Mikael]

It seems like advanced css function colours. I need to read your code and documentation and practice in order to get a better understanding, anyway, great tutorial. Thank you.

[sanmeetsingh]

Wow its so awesome like creating a theme feels so easy now !

[JosephCodette]

Since you asked yes please more videos about color tweaking . Especially color schemes that are usable (no offense!), because that seems to be the hardest after deciding which colors you want a site to have . Also having shadows that work well with the scheme is a tedious task sometimes

[kirillzlobin]

This is amazing

Can you make a video on what features are left in SCSS that are not supported by regular CSS

It looks like regular CSS already has almost everything

[techyjc]

LAB - L= Luminance A = Tint (magenta / green) B = Temperature (yellow / cyan) for reference. OKLab is similar and slightly better from what I understand.

[moondogdev]

for frontend dev, we typically just have a actual graphic designer choosing colors so this doesn't become very useful from a build standpoint but could see how it could be useful for graphic designers

[kalechips]

CSS is literally just turning in to SASS now

[LidyaMartinez-dj]

As a web designer.... color is really a great advantage

[aurelian]

Before 2000 was used "safe colors", a mix between 0, 3, 9, c, and f. Probably browsers didn't know how to display other combinations. 🙄