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
✅ Browser support for color-mix(): caniuse.com/mdn-css_types_col...
✅ All the codepens from this video: codepen.io/collection/BNOMbj
✅ CSS color-mix() on the Chrome Developers Blog: developer.chrome.com/blog/css...
✅ CSS color-mix() MDN article: developer.mozilla.org/en-US/d...
✅ More on the different color models: developer.mozilla.org/en-US/d...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@niner8275]

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

[@KevinPowell]

It is, I have a video coming on that next month sometime, but you can do `linear-gradient(45deg in lch, red, blue)` 😁

[@tumbler9428]

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.

[@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 😁

[@kalechips22]

CSS is literally just turning in to SASS now

[@UmzGames]

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

[@clevermissfox]

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

[@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.

[@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.

[@JonHaa87]

Maybe you're used to srgb because that's what most simple graphics programs use, but I recommend reading some articles about the advantages of oklab. There are also a lot of issues when mixing srgb colours, for example when mixing blue with white, those light blues often look purplish and oklab corrects that. One minor issue with oklab is that darker colours are often very dark, but that's by design and not an error, but you might need to adjust for that.

[@papayoulele]

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

[@sanmeetsingh4538]

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

[@balogunmuhammadawwal1316]

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

[@suzubraz]

Thank you! Learned something new!

[@techyjc]

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

[@Evangelist45938]

A new video from kevin lets GOOOOO!!

[@Mikael97]

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.

[@ozanmuyes]

Adam Argyle rocks, as you do 🤘🏻

[@kirillzlobin7135]

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

[@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

[@aurelian3401]

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. 🙄

[@inonaraphael]

I loveeee CSS ❤

[@ahmadbayrakdar]

wow, thank you

[@mivids100]

I just want to be half as good with css as you!

[@dannycho2287]

Is there a way to know the values (hex, rgb, whatever) of the resulting colors? Or do I have to use color-mix to reproduce these colors?

[@azuma12]

hey, Kevin been enjoying your channel so far :) could u tell me like from where to get updates about css and things just like you do..

[@KevinPowell]

Follow Adam Argyle, Una Kravetz, and Bramus on socials, who are on the Chrome dev rel team and always share upcoming stuff. I also look at the release notes when a new browser version comes out to see what's included. Probably some other stuff I'm forgetting

[@user-tz5hn3td2b]

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

[@akshaymali4732]

Does using these css functions has any impact on performance I know it wont be that much, but still is it ok if i use them extensively in a actual project

[@itsPenguinBoy]

You can see how the default hue for white and black is red, even though the hue value is meaningless when saturation is zero. So in the hue based mixing, mixing anything with black or white has a redish tint.

[@Atractiondj]

Why we can't do - oklch(from currentColor calc(l - 20) c h) for hover color for example?

[@feldinho]

A few weeks ago I made a palette generator in SASS for a client project and I think the results are very nice, and it overlaps with the theme of this video. Would you be interested in checking it out? Just let me know so I can put it on a codepen. :)

[@KevinPowell]

Sure thing 🙂 Might be best to share it in my Discord though, if you have an account, I miss replies to comments in YT a lot of the time

[@mh_kohansal]

thank's

[@goodshiro10]

so whenever we create variables for shades of colors, we don't need to copy bunch of hex codes or rgb stuff, simply adjust the percentages😅

[@riaddjaid7428]

Hi sir please I'm working on a website that shows a lot of videos using html CSS and javascript and I want to stock the paths of videos on a JSON file, when I put the path directly to the html file without live server and open the page it works fine but when I use JSON method and open it with live server the video doesn't work and immediatly open download manager , all my videos are local. where can I find an answer for my problem ?

[@shanappy7041]

Hi kewin. ❤

[@KevinPowell]

👋

[@khadarvali5782]

Grear

[@thedacian123]

I have two remarks please: 1 .color-mix >:nth ,would not be much clear .colormix >div or colormix>* 2 In order to have a good grasp how these color mixing modes work we should have knowledge of complicatted color theory. Thank you!

[@SebastianZartner]

Trying it again, because my comment somehow got eaten. `shorter` and `longer` refer to the smaller or larger angle around the color circle, while `increasing` and `decreasing` mean whether to strictly increase or decrease the hue angle, i.e. whether to go clockwise or anti-clockwise around the color circle.

[@KevinPowell]

Thanks!

[@thorerik]

@@KevinPowell If you swapped color-1 and color-2 you'd see the difference really easily btw

[@XCanG]

Why? Why does they accept bugged behavior as standard? Why don't they tell that it need to be fixed, so that browser may be have 1 or 2 versions with a bug, but the rest newer ones will be fixed? Now it will be branded forever...

[@kosmar]

i prefer oklch. happy to fight

[@KevinPowell]

I prefer it for declaring colors, since I sort of know what I'm going to get! For mixing, it depends 🤷

[@kosmar]

@@KevinPowell from what i read LCH or HCL is corrected for equal perception of lightness, so that 50 red and 50 yellow look right next to each other.