HTML & CSS for Beginners Part 19: Colors with CSS - hex, rgba, and hsla

Key Takeaways

hi guys today we're going to be looking at colors in CSS we have a few different ones hex RGB a HSL and how we can do some transparencies as well [Music] so in the last video we set up this little thing and I'm not gonna worry about the layout so much if you're curious how I got all these boxes like this go look at the previous one where we are looking at floats and clears but for today we're gonna be looking at colors we have a whole bunch of colors here so it works out really well now there's three are actually four different types of ways of doing colors so let's jump over here you would have seen in the last video that I used color names to put in my colors I find doing demos using color names is really nice and handy cuz you just put in a color you don't have to sort of figure out what it is and the color shows up so pink red firebrick this is a little less obvious but it's just a color I know now you might be wondering where can I find all these color values and or color names I should say and like in so many cases the w3schools does have a nice resource for it just flick up this is HTML color names CSS color names and they'll give you the name and they'll give you you know I'll show you an example and you'll notice a few of them or repetitive gray they've done it with both types of spelling for example gray again dark slate gray deep you know dim gray they have lots and lots and you can go and find your favorite in there I don't really like using these for actual design purposes though it's handy for just doing things faster when you don't want to have to think about what color you want but when you don't need actual precision because if I want to pink it's not really the thing I want and well I don't want hot pink I don't want pink don't want light pink I have a very specific color I need and I can't get to that color when I'm using these color names here so another way we can and I've done this a lot in my demos is using hexadecimal so ff0000 now hexadecimal that should keep exactly the same and it does hexadecimal is a system effectively what it is is you put the hash tag and then a red red green green blue blue values so the first two are corresponding to read the second two are corresponding to green the next two are corresponding to blue for my RGB and it's a scale of 0 to F and that's a little strange of a scale so that's why I have letters and numbers mixed in there so basically you go 0 up to 9 and then the we can't really do a 10 because that's two digits so then we jump to a and then from a we can go all the way up to F and the way this is working if I look here it's F F so f F is the highest possible so I'm maxing out my red and then I have no green and no blue so I just get a pure red if I were to come in here and do an F F on my green I get yellow green plus red will give me yellow obviously I just did that and whoops not D D F F and I can get a pink that way right there let's bring that back to zero zero so if it's all zeros I get black and if it's all FS it save whoa save the wrong file save and will be white so in general the lower if you see a lots of numbers in here will be very dark if you see lots of letters in there it will be brighter and you can take rough guesses at colors you're gonna get but in general I'm gonna use a color picker and you might remember I used this color picker back in the day back in the day in a previous video and we just have to do a Google search for color picker don't write anything else and you will get this kind of annoying that it won't go away there we go a nice color picker and in here it will just give me you know I picked the exact color I want I take that hex code and I'm good to go you don't have to memorize how this works it's really not that big of a deal you'll also see that they give me an RGB value so originally we could only use hex and at one point they added in RGB so let's just take this green here and I'll put that as my first box whoops copy paste and I'm gonna take this RGB down here it's my second value so I'll copy that and I'll paste it in there and hit save and they're both exactly the same color so this 8f corresponds to 143 my DB here corresponds to 219 and my 83 here corresponds to the 131 and it ends up being the exact same color so the RGB scale is from 0 to 256 not 5655 sorry so if I put this at 0 0 0 and I'll delete that so don't get an error I get black and if I have 255 255 255 I get white and if I have full red 0 and 0 I will get red now where this becomes a lot more interesting though is that I can do in RGB eh this stands for red green blue and alpha alpha is pretty much transparency if you're coming you know it's an alpha mask and the Alpha value though is from 0 to 1 so I'm just going to put another comma put another space and put in 0.5 so it's from 0 to 1 so if I put in point 5 its semi-transparent and let's actually change my background okay so what I've done is I've put in a background and I've made these boxes bigger because I want to illustrate a little bit more on how this is actually working so this box here is transparent but we can't really see what's happening because it's on a light grey background so it doesn't it just looks like my box is getting a little bit lighter these two being nice and big it's gonna let me examine more you know we'll actually be able to see our hamster coming through there so let's come down to this first one right here this and I've made them bigger just to make it even more obvious and they'll replace this with my RGB so RGB value always works I just put my R and G and B and then I open and close the parentheses and I put in my RGB values so to 5500 should make it red and then the a is my alpha so I put another comma 0.5 should make it 50% opacity or 50% transparent and there we go we can see my hamsters nose poking through there if I make this a smaller number it becomes more transparent and if I bring it up it becomes less transparent so RGB is pretty awesome we just have to you know 255 I want a yellowish box I can go there and use that remember just use your color picker though I had to get the color you want and then just add the a to here to be able to add your transparency if you forget the a and it will just break the whole thing because it doesn't understand this value so it's really important that you add the a in there when you're doing it so let's try and do our little purple box there and our GBA and purple I'm not even really sure we probably need some green and blue so 0 150 255 and as I start with a 1 so it's there fine well blue is good enough and what I want to show is what a lot of people find at first when they're looking to make things transparent is they don't use RGB a they get their box looking good and they do a quick Google search and they find something called opacity so opacity is just like my a value here the Alpha value my opacity they work exactly the same way in terms of how to manipulate it so it's a zero to one scale so a 1 means that it's exactly the same and if I put this to zero it becomes invisible and so let's bring this up to a point to 5.25 save refresh and we see my box there but you'll notice the text is also transparent so it's taking my whole div and it's making the whole div become transparent as well and that's usually not what we're after there are a few situations where this is something we want to do but in this case it isn't so let's get rid of that and jump back to this refresh so with this one down to 0.5 it will make my box more transparent but my text is the same and to make that even more obvious let's make it more transparent so my box is becoming more and more transparent when my text is still there and still nice and easier to read so that's fantastic it's what we you know what you'll probably be after most of the time and we have one last one that I haven't explored yet so let's replace this yellow one here with the last one which is HSL and HSL works sort of like RGB it has three values the only thing that's different is it's it's kind of weird if you're not used to HSL it sends for hue saturation and lightness so the hue value of 0 to 360 and think of a color wheel of a wheel so you have 360 degrees and you're picking the degree that you want so newing red a lot we'll stick with red not 255 I'm just RGB 360 happens to be red and I'm guessing zero does too then input a comma and we have to choose how saturated we want that color so let's start with a hundred percent saturation we want it to be a really vibrant bright red and the last thing I want is my lightness and for lightness and I'll start with 50% and we'll explore a little bit how lightness works so that's a the red we've been looking at the whole time so again that's well not again let's just jump over to our hue and change this to 150 and we'll see that it changes so the hue is where we are on the color wheel and I sort of like that color so we'll stay there this is my saturation so how saturated am i if you go to zero percent saturation and you will go to gray and it doesn't matter you put here cuz you're you know whatever you put there if you have 0% saturation you don't have any color so we'll go back to our green and we have our full color but if I go that that 50% I'm going towards gray the lower this number the closer to Graham getting or you know and we'll bring that back up to 100 for a second and then lightness instead of adding gray to something so we're taking the colors out of it is we're adding white or black so 50% were right in the middle if I make this 75% let's say it's going to get lighter I'm making it lighter a hundred percent we'll bring it all the way to white and if I make that zero percent it will bring me all the way to black and 25 will just be a darker version so it's not quite the same as going to gray which is making it more neutral but it's making it either lighter or darker maybe it's just me and I'm used to hex and I'm used to RGB but HLS is a little strange for me so I don't really use it too much you'll notice even the color picker we've used they don't even give us an HLS you won't see HLS used too often though it is out there and you can't add an 8 - HOH SL I think I was saying LS before and it would work exactly the same point 5 and it becomes starts becoming transparent so let's color in CSS how we can control our background colors you can use all this for your text colors as well which you know it works and anywhere you would be putting on a color this system works you have any questions put them down in the comments below and until the next video have a great day