 Hi there, my friend and friends. Have you ever had a color in CSS that you need to do they're slightly lighter or darker version of but you had the hex code and converting hex codes can be kind of annoying so then you have to go and switch it over to HSL which makes it a little bit easier because you can play with the lightness but a little bit extra work than maybe you might need to do because now we have color mix that is here and part of CSS it's now supported in all the modern browsers everybody has it of course that doesn't mean that the older browsers have it so we'll talk a bit more about browser support a little bit later in this video but for now let's dive in and see what it's all about so here is a simple code pen and all the code pens there's a link that has a collection of all of them down in the bottom if you want to play with any of these but I just have for now three divs set up so we're gonna look at a few different examples here because it starts off really simple there's a lot of interesting and weird and cool stuff you can do with this so starting with this you can see I have the three divs but we have two blank ones on you know the two ends here are empty and so we can come on this first one here and let's go with a background color and of course how do you even like modify purple keyword normally you wouldn't be able to do much with that but we can with color mix where I can come in and make changes to this color so we can start off and the first thing that's a bit weird here is you do have to say what color mode you're going to be changing it in we'll talk more about this in a little bit but for now I'm just going to write in okay lab and we'll sort of talk more about what that actually means a little bit later but we're just going to sort of throw it in right now and I'm going to say we're going to mix purple and white now we get a perfect mix of purple and white right there and let's get a darker version over on this side and I'll move myself just so you can see it a little bit better and you know let's copy this one here paste that one in and on this side we'll mix it with black and we get a darker version of it right there now I just use this purple keyword that's right here but if you wanted to what we could do is you can do this in different ways so let's come in here with a root and I'm going to just create a base custom property here and we'll put purple purple right here just because it's going to help us sort of play around with things a little bit and I can replace all of these so we'll select all of them and we can place them all with a bar of base just like that so we'll use my purple still so let's just come here and say it's going to be a lime green instead so we have another color and we'll see those colors come through mixing with white the lime green itself and then of course mixing with black on that side now right now what I've done is we've put in a base and we put in a white so it's just taking 50% base and 50% white and it's mixing the two of them together but you might want something that's a little bit more along the line so here I've looked at an example where we're actually having 10 total divs or I think it's nine total divs we have the middle which is our purple once again and then here we have on this side the mix to the lighter and on that side the mix to the darker but what we can do with this is you can define percentages so what we can do is we can actually say this is going to be 10% of my base color and the rest of it's going to be white and then we can come on this one and say that one's going to be 30% of my base color mixed with the rest of it being white so it's 70% white this one could be 50% of my base color mixed with white and then we could even say 70% of my base color and have the rest of it mixed with white so we're sort of moving along on our way and you'll notice here before I you know 50% is the default so this one from we don't actually need to include it we're just doing a mix of our base color with our white right there but we can put the 50% if we want and of course we do the exact same thing down on this side but with our blacks so on this side it's going to be we'll start with our 70% of our color mixed with a bit of black a 50% mixing with black 30% mixed with black and then a 10% mixed with black and we start to get a little bit of a color scheme that's coming in though you will see at the extreme levels we're getting really dark there the difference between them isn't very much there is a small little difference there but we're getting like the 10 to the 30 it's not a lot but we're going to see that there's some options there as well but a few things that I want to mention when you're putting in these percentages is you can actually do percentages it by default it will try and be 100% so this is defaulting to getting to 100 because we've only given it one it just assumes black is the other 30% and let's go over to this first one just because it's going to be a little bit more obvious with the white so we have 10% and then we have the rest being white so what happens if I actually came here and I said this is I don't know 25% just we can change or yeah we'll do 20 we'll do 20% and then it came on my white and I said this is 100% what's it you know how is it going to treat that and it's just going to scale things down to get to 100 maximum because we cannot mix colors more than 100% so it knows that it can't go past there so you know there will be a slight difference between an 80-20 just because we are saying the proportion of white is higher if this is at 100% but it's going to scale things down to be a total of 100% but another thing you could actually do is 20% and 20% and what that's going to do is actually make it transparent we're adding the alpha value in because we have a total of 40% so this would be the same as a 50% 50% mix but with a 40% alpha value so that could be an interesting way that if you need a transparent color you can even bring that in and even I guess we could just do a 0% here at the end and you know I think it's a complicated way to add transparency to something but it's an option there where you could come in and actually you know what I haven't tried what if we only did one color it doesn't work I didn't think so we do need to have two values in there for it to be considered valid but we're basically getting the purple keyword here at 20% alpha value by doing a 0% white so I think in that case it's probably there's probably easier ways to work but it could wait it could be a way that if you're stuck with a hex value somewhere and you need to add transparency to it I guess this could work now one thing I did a little bit quickly and I said I was doing this fastest talking about this okay lab that's right here and there's a lot of different color models in CSS now there's the ones that you probably know if we have hex codes which actually are RGB so we have SRGB is the color mode when we use RGB we have HSL we now have LCH we now have lab and with lab like I could actually switch this over to lab or I could switch this to LCH and there's also hue whiteness blackness is another one so we have all these different color modes and you might be going well who cares why do I need to specify and the reason we need to specify is when we're mixing them it's going to change how these mixes happen depending on the color mode that you're using which can seem a little bit weird right but you can see here at the okay lab at the top versus the okay LCH and this LCH when it's going to the whites is actually getting really pink and we're going to the darks we're getting dark it's a little bit different on the darks as well the hue whiteness black whiteness blackness I think it is is also doing something a little bit similar SRGB is very similar to the okay lab there's going to be slight variations in that as well so when you're mixing colors defining which mode you're using can actually have a very big influence on what it looks like so you might mix two colors and you chose okay LCH and you didn't really like that color you could just switch it to okay lab and you might get a color that's closer to what you were trying to get to the other thing in here is you might get different results with different colors so if I came in here and I said red we're going to see things are going to look a little bit different but again they're not going to match up or even here the okay lab in the okay LCH in the lighter ones look really similar compared to the purple where the okay lab in the SRGB actually looked really similar so the color that you choose is also going to have a big influence on how the colors are mixing I just want to throw that out there's even like this is the okay LCH is actually going much more into the ruby colors here versus the okay lab even though in the lighter colors they look almost identical if not exactly the same so it does take a little bit of playing around with but this is because the browser needs to know what it's going to be mixing it needs to it has these two different colors that can be in different color modes I didn't really mention that but we're mixing like red with white right now but I could come in here and say my base is actually HSL and let's just choose like 200 and we'll do a 50 percent and do a 50 percent right there and so now I'm actually mixing an HSL value and if we come and take a look I'm mixing it with the white keyword or let's come in with an RGB RGB of 255 255 just so we get to white 255 so I'm mixing an HSL value with an RGB value it the browser needs to know how am I going to mix these two because we're working in two different color spaces and you can see once again we're getting wildly different results with the okay lch and the hue, whiteness, blackness probably giving you things that you wouldn't expect to be seeing going into the purples now there's other ones than these ones for me the most consistent results though I have got is with okay lab it's why I started with okay lab I find it's just when I mix it sort of gives you what you'd expect which makes sense for getting lab values I am using okay lab and you might be wondering what's okay lab you might have heard of lab but not okay lab and just to show you we might not even get it but if I switch those over you can see that actually the darker ones if I go into the okay values are darker than if I just did regular lab and both of them are there we have lab and the same with lch you can just use lch and it's probably going to change what it looks like as well basically the lab and the lch and the okay versions of both of them were added basically at the same time so browser support for them is more or less exactly the same I think there's a slight variation but the reason we have the okay ones is there was some slight bugs in the algorithm for the these ones they're not perfect I don't remember if I think it's in the darker colors actually but I don't remember exactly but there was a few little things that sort of don't work the way you'd expect them to work so they added the okay versions of them which are it's a simpler algorithm from what I understand and it tends to work better for everything so if you're going to use either lab or lch you probably want to throw the okay on the front of it and if you're really not sure go start with okay lab for me that's like easily the best one to start with and then if you need variations from there you could try playing around with some other stuff but I find this is usually if we're using gradients now because I'm going to make another video where I talk about some of the gradient stuff we can do where we can actually choose the color mode we're making the gradient in that's where these come more into play with just color mix I find most of the time okay lab is perfect so you don't have to overthink it too much and there's more than the ones I'm just showing here this is sort of like the main ones that we're taking a look at right now but if you do want to see more of them I'll put a link down below there's a few links actually to articles down below where that really helped me put this video together so I definitely would recommend checking them out one of them by adam argile on the google chrome developers blog that is excellent there's the mdm article as well and again if you want to play around with this as well the links to these code pens are down below too let's get into another thing it's kind of weird and took me I was like what's going on here but this is you can actually specify the direction that the colors are being mixed in maybe saying what are you talking about Kevin so here I have a color one and a color two I have a purple and a cyan and I'm mixing them to get this color that's in the middle and if we come and take a look you can see that I'm actually doing something a little bit different here where I'm saying shorter hue so we have our color mix and actually if we just did this in lch just because I decided to use lch uh it's going to look exactly the same because shorter is going to be the default so I'm gonna say shorter is the what are we talking about shorter shorter longer or anything like that what is this so if we look at a color wheel and we're doing my sort of a purple into over here if we're mixing the two of them the shorter is going around the wheel the short way so we're going from here over to here and we're sort of getting the middle value between there if I said that it's 70% of this color and 30% of that it's going to sort of be 70% of the way over this way or if I you know the other way around I want 70% cyan it means it's going 70% over this way instead the one thing it's important here is this is own this isn't available in every color model either it's only available in the cylindrical color models so like this is if you're using hsl we have the degrees 0 to 360 we're going around a cylinder basically um whereas if you're doing rgb it's like this we have red on one axis blue on the other and green on the other way lab is also another one where it's more of a square on how it works with the three the lightness and the a and the b I don't really understand how lab works but whatever um I know it's the one for math purposes that are often used for color conversions um it's sort of the middle ground if you're going between different um different color models and stuff but uh yeah this this is like this cube so because it's a cube with black would be like the far side that we can't see right now uh we can't mix colors choosing longer or shorter because there's no longer short way with rgb you're sort of just moving through that cube whereas with hsl you can actually move around this along or short way so here if I did longer and we have to make you uh so the longer we're mixing it along the longer here it changes to this color and maybe going okay that's weird right but it's not because we were here the other side is here so we're mixing them and we're ending up sort of in this orangey realm over here right so we're we're finding we're going the long way around instead of the short way around so we're getting the color that's on the opposite side basically of the color wheel between these two so if you had like a yellow and a blue depending on where they line up with each other one of the ways might give you a purple color but you're actually after the green and that's more where this would actually be useful in my opinion where you were close enough that maybe there was a slight it's slightly shorter to go into the purples so in that case it would you know then you're going to say longer and then you get into the green instead and instead of longer and shorter you can also use I can do uh increasing is another keyword we can use there or we can go in with decreasing as well so in this case it's not looking necessarily at the shorter or longer path but are we going through increasing numbers or decreasing numbers though everything I've tried uh the shorter and decreasing are the same so I just like using shorter because I understand it better but if anybody actually knows a little bit more about that and wants to leave a comment down below go for it but yeah it's just is it the increasing here or going through a decreasing here but the decreasing always seems to match the shorter as far as my experimentation with this so that's one thing we can throw in there and just in case you're wondering like I said cylindrical I passed over it a little bit quickly so basically the cylindrical color models here I'm doing LCH you can also use HSL and we can see that actually does make a difference in the color a very big difference actually in the color that we're getting right through that middle one so again changing this can give you wildly different results you need to know if it's a cylindrical color model it's one that uses a degree as one of the units so LCH has the H is the hue we have HSL where we have the hue we also have hue whiteness blackness that is another cylindrical one as well so as long as there's a hue that's defined in degrees then you know it's cylindrical because you have the degrees where you're spinning around at the circle so a lot of cool interesting kind of weird things and you might be wondering like what's the real practical use case for this if you're just getting designs and copying and pasting hex codes in you might not really be in love with this or seeing like you know what's what's the point but we can do some interesting stuff with it where we can sort of create color schemes really easily so here's an example where I've used color mix where I have a brand color that I'm never going to change but I did a primary base a surface base and a text base the primary base is like this blue color that I have the surface base is my background color and the text base is my text color obviously and then what I'm doing here is you can see I have my brand muted where I'm mixing the brand color with my surface color because if it's if I have a brand color and it's on a surface which is the background if I mix it it's going to mute it it's going to bring it closer to my background and I'm just doing an 80% of my brand and adding that 20% there and because my text is always high contrast on top of my background if I mix it with that it's going to make the color a little bit darker it's not really more vivid that's a bit of a lie I guess but sort of maybe darker would be a better word and then I've done the same for my primary color a muted version of that and my surface a muted version of that and a text muted version of that but then what we can do here I've did it with first color scheme where I can just sort of if I only change my surface and I only change my base that's going to change all the colors but I didn't only want to do it with that so what I actually did is I used a color picker here at the top where we can change the theme where I can change my primary base my surface base and my text base and because I'm only changing those base values everything else will just adapt automatically it does take a little bit more work I think if you wanted a proper color scheme just because I think some of the contrast ratios on here are probably a little bit too low and this the brand color not changing looks terrible and pink you can see just by changing those values I can go through and I can have like wildly different color schemes going on where my muted colors my paragraphs are all with my more muted version this is my text base color these are all my text base colors so like everything just adapts based on these base colors and all my muted versions and the more the darker versions or the vivid versions of it can adapt as well so a bit of a fun way that we can sort of create a color scheme like that there's other approaches you could do here and again you'd want to do some extra checking and you probably need to fine tune things a little more I did a very simple example here but I just wanted to show that how we can sort of take advantage of this in different ways in creating different color schemes and even if it's just giving yourself different like lighter or darker versions that you want to work with instead of having something that's more dynamic like this because again I don't know if this would be you'd have to do a lot of testing to make sure across your different color schemes that you're hitting the right contrast ratios and stuff like that but I think it's a bit of a fun use case and something that I actually plan on exploring a lot more if you'd like more content on css color stuff like looking at lch or looking at how we can use these different color modes in the gradients and stuff like that please leave a comments down below and let me know what you'd like to explore if you have any additional insights or anything like that also leave comments down below and let me know you know if you know what the difference between the decreasing and the shorter is for example if you're just looking at sort of simplifying your color schemes too and you're doing a little bit of your own work and you have trouble with color schemes on websites I have a video that is right here for your viewing pleasure that could really help you out on like the simplest way to make a nice color scheme when you don't have like a pre design that you're working from you're trying to do a bit of a personal project or your own thing that should help you out and with that I would like to thank my neighbors of awesome Johnny Tim Simon Michael and Rico James Andrew and TTLLD as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome