 Hello, my friend and friends. Color Mix is now here in CSS and it's really cool and I found out something really awesome about it recently and I wanted to share it with you and I think there's some really practical ways that we can use this. So we're going to look at a few different demo files here to get through them or two different demo files anyway. Just before we dive into the specifics of this code, I just want to say I've covered Color Mix, like the fundamentals of how it works and a lot of stuff about it in a previous video, so I'll link that down below. In this one, we're just going to be using it. We're going to be using it with current color because you can actually mix with your current color, which is really cool. It can solve some problems that we run into a CSS and simplify things. If you've never seen Color Mix before, I think you'll still be able to follow along no problem, but if you do want more of a deeper dive into how it's working and all the different stuff we can do with it, that video is linked down below. That out of the way, let's dive into this. We're going to start with this simple example at the top, which should give you a decent idea of how it works, where I have this purple text at the top here. Even let's make the font size bigger here, just so we can see. Font size will be like 3rem, so we can see it a little bit better. What I want to do here is, I have a span that's mixed in here somewhere. Let's see that span. We're going to say color is dark purple. Do we have a dark purple? I don't think we have it. Okay, let's go. We'll do a blue and then a dark blue. Dark blue. Just so we can see that it will change. There it is. Our dollar sit is now a dark blue. But what if I did want to come in here and make this purple and then I wanted that to become a dark purple? Well, then I'd have to come here and change this and find a dark purple that would work. Obviously, we probably aren't using keywords when writing normal CSS, but here in demo land, I can get away with it. But you're still, you'd be changing two values, which is annoying. Instead of that, I could come here and I could say that we're going to do a color mix. There's only one weird thing with color mix because you're just going to give it two colors, but you do need to say what color space you're using to do the mix in. And for this video, we're just going to do in lab. And if you want to know more about what this means, go watch my other video, but we're just going to say in labs, we're using the lab color space to mix the two colors. And I'm going to say that we're going to take some black that's going to give us the darker color and we're going to mix it with our current color. And when I do that, you're going to see that gets darker and it's in purple. And if I change this now to my blue, well, we get a dark blue. And if I change it to yellow, we're going to get a dark yellow, you get the idea. We're mixing our current color with the black right here. And it's just cool that we can do that, I find. And so this was sort of when I first saw this, this is the very first thing I did. And let's just change this away from yellow because it's hurting my eyes and your eyes. But that was the first thing I thought of along the way. But then it got me wondering if I could use it in more practical ways. And I came up with two different things that we're going to be looking at now. So these are the two, or this is one set. And then we'll look at another demo for the other interesting way that we can use color mix with current color. And right now I've set this up. So I have my links or this orange red color. And that's, you know, whatever it is, that you you have your accent color, something like that. And then you find out that your accent color is actually failing when you look at contrast ratios. And I just realized that's in the way. So there we go. So I realize it's a little bit small there. But it's failing the contrast on there, even though this one isn't. And that's just because of the background color that we've had our text happens to be on in that situation. And while we don't have style queries yet, because style queries would potentially be something we can use to solve this type of thing. What we can do is base things based on our current text color, because in general, if you have a light background, you're gonna have dark text. And if you have a dark background, you're going to have lighter text, right? So what we can do here instead of that is I could come and I could say my color is my color mix, we're gonna say in lab again. And then in there, we can say and I'll put current color first this time just to mix things up. And you don't need the capital C, but it's just sort of like the one camel case thing in CSS. That's why anyway, it doesn't matter. But we're going to do my current color there. And then on this other one, we're going to say the orange red or whatever your accent color is. And it's going to mix the two. Now you might be saying, but Kevin, this is even worse than before because it's just like super faded out, you'd be right, I think it looks terrible. But I could say that my orange red is actually going to be 70% of this mix. And then with that being at 70% now, if I do my inspection on there, I can see I'm now passing on the accessibility there or on my contrast ratio. And down here, it's passing and it's even passing more because we're lightening it up a little bit, but we're still getting that accent color. And in general, when you have accent colors and other things, when you go between light and dark and stuff like that, you generally need to change that color anyway. So this is kind of a fun, interesting way to do it. You would probably want to have a fallback if you were going to do this today, just because browser support for color mix, it's in all the major browsers now, which is awesome. But it's hovering around 85 to 90%. I don't know exactly I'll put a link for an update table that you can check in the description down below. But obviously, you still want a color to be there. So having you know, if I did it this way around, if the browser doesn't know what this one is, it would use the orange red. Obviously, it's not perfect. Maybe you'd have a different fallback just to make sure you're okay. But it's just, I don't know, I was super happy when I discovered this. And I think it's a really nice use case for it. The other one that I wanted to take a look at is over here, where I just have boxes. So nothing, nothing too complicated box box box, and all of that. And so, yeah, we're going to we're going to look at some some fun stuff we can do with our boxes there. The other thing that I've already set up ahead here just to speed things up a little bit is I have my color, I have a mix, and I have a contrast. So we're sort of setting the stage for all of this to work with custom properties here. So this is the color I want my text to be. This is what I'm going to be mixing my color with. And we're just creating that mix here, where we're defining, you know, here, we're saying our current color, 15% plus our mix. And there's a reason I put the current color here, and you'll see what it is in a second. And so we're going to come down here to my box. And let's start with just showing my color is going to be my var color, which right now is that orange red, perfect. Then let's come in with a background. So we can do background var. And we're going to do my contrast now. And that's going to come in with that background color that we just had, right, which is great, because it's dark, it's much darker, we should still be passing on our accessibility for what it is. And you might have to tweak this, we're going to see that there's like, sometimes some issues you could play around with what this number is. But basically, the lower this is the darker it's going to be. And the higher this number is the lighter it's going to be. So you want to find sort of the right mix that you're going to use, we'll just use 15% now just so make sure it shows up on video, decently. But we get that contrast coming in right there. And if you wanted to, you could even come in with like a border on here too, right, we could say it's like two pixels solid. And actually, if you did that, our current color would just be our border color, but maybe we want to add in there like another color mix just for the fun of it. Because why not we can do current color, current color like that, and then say white. And maybe the current color in this case is like 85% or something just so we're just getting like a slightly lighter border color or something along the way. Cool. So we get that where it's dark, but it's sort of keeping that same text color thing going on. I think it looks pretty good. But the nice thing with this then is if you set everything up with custom properties, you can easily just come down and on my box with these different data types on it, you just set up, you change my one color and all of them just update and they all change, which is cool, right? And so each one of these boxes, I just put a different data type on it. And of course, this could be a class like a modifier class or something. It doesn't have to be a data attribute, but they're all just coming in and they're changing. And I think it looks pretty good. So yeah, let me know what you think of that. But I think it's pretty neat. You do want to check once again for contrast ratios, because it's potentially problematic. Some of these, it's definitely going to pass. Other ones of these, oh, this one is passing. I didn't think it would be. But you just, you do definitely want to check along the way. And they're actually, are they all passing? Cool. They are. But you do want to double check to make sure on the colors and the mixes you're using. So you might want to modify the mix. But if you needed to, let's just say this green one, so you could come in and change the contrast on that if you wanted to. So you could even break this off into its own custom property and have that something that if you needed to tweak it, you could. But there's another cool thing with this, which is because I'm doing this with custom properties, it also makes it so I could come in here and do this as an at media with a prefers, prefers color scheme of dark. And so let's move this one here. We're going to say this is my route and put in my mix there. And over here, where we don't have the prefers color scheme, users would get this any light mode. So we're switching what we're mixing things with. So let's come into my dev tools. And in your dev tools, if you open them up, you can do a command shift P, it's going to open up the command palette here, and you can just do emulate. And we can emulate a prefers color scheme light. And if I do that, you can see it's actually switched them all around. And I think some of my contrast ratios might be broken now. So you definitely want to check. And you know, this one looks like it's probably a little bit light. Yeah, you can see it's definitely failing there. So once again, you'd want to check, but it's one of those nice things you could sort of set the stage up with everything and change them along the way. And the one thing is I did call this last one broken. Because if you go to pure white or pure black, and you're mixing with whites and blacks, obviously, you can break things along the way. So if I let's just do that again, it's off screen, but I'm going to emulate my light mode again. And because it's light text, and I'm mixing with white, the whole thing just sort of does fall apart. So you might need to do a little bit more work along the way to get this really to work for you properly. But I thought this would just be a fun thing to throw it there and be like, this is really cool, we can do current color mixes and stuff. And one more thing that we can do, just because we are on this color scheme thing that we're looking at, is if I come into my box here, I'm going to go inside of here just to do a media query, we're nesting this. There's per first contrast to I'm going to use the same type of thing, because people can also ask for higher contrast in their settings, right? And this is something people don't often do. But since we're talking about the dark mode, I'm going to use this here as well, just to say we can use a color mix here to like mix in some colors with other stuff. And this one's a little bit harder to emulate sadly. So if we open up in Chrome, in my dev tools, you have to find the, let's see if I have it here. I don't have it here. So it's you go into the three dots that are right here, and you go to more tools, and then you go down to rendering. And in the rendering, you get all these things, there's lots of cool stuff. I'd really encourage you to learn more about what's in here. If you want a video on it, leave a comment down below to let me know. But we can get to media types. No, not media types. Per first color scheme. Nope. Well, there we could actually switch back and forth between the two if we wanted to. So it does switch here per first contrast. Finally, we got to the right one. So we can do a per first contrast more or less or custom. So if people want higher contrast, we're just we're still giving like a different effect. We're still using that mix color in there. But then we're going more to the black and we're just ensuring that it's like really high contrast in this case. And it you know, I think it's a nice little extra fallback you can do and something you should definitely consider. If you have things where it looks good, but there's not super high contrast, building in something like this for people who request it would be a really good idea because you're going to get users who just leave your site if it doesn't match what they're after, or they're having trouble reading it or whatever, because they might not be using the force colors, which is another option on windows that just takes over the colors completely. But they might be asking for more contrast. So you might as well be nice and actually do that. So again, that's in the rendering tab where you can find a whole bunch of cool stuff that's really useful. And all of that. But yeah, some fun things here, I think, and I'd love to know what you think of these. If you could see yourself using color mix like this with current color, if you could be using it in other ways, if you have other ideas and cool things, please let me know down in the comments below. And there's the video that I mentioned earlier where if you do want to check that video out, where I deep dive color mix in more detail, I explain what this whole in lab thing is all about and go a lot more into everything else that we can do with color mix, that video is right here for your viewing pleasure. And with that, I would like to thank Andrew Simon, Tim and Johnny, as well as all of my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.