Color Types

Kalob Taulien
A free video tutorial from Kalob Taulien
Head of programming at Coding for Everybody.
4.5 instructor rating • 17 courses • 222,195 students

Lecture description

CSS allows you to write hex colors (we'll explore these) and named colors, such as "red" and "blue". 

Learn more from the full course

Build Responsive Real World Websites with CSS3 v2.0

Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!

12:57:25 of on-demand video • Updated June 2018

  • Real-world skills to build real-world websites. Including several mini projects!
  • Learn the basics, then learn Advanced Selectors, Gradients, Transformations, Transitions, Animations, Flexbox and Responsive Web Design!
  • Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen
  • Get helpful support in the course Q&A
  • Downloadable lectures, code and design assets for the entire project
English [Auto] OK. Hello welcome back. In this lesson we're going to be talking about is colour's now. So far we've used some pretty basic colors like blue and red and CFS does support you know a fair amount of named colors. That's what those are called so blue red orange yellow just assumed that I guess spelt orange right. You know white black gray dark gray things like that purple various shades of purple. I mean there are a lot of named ones out there and you can go and google those if you want but this lesson is not about the named ones. I tend to not use the named ones because they're they're all the same and they're not usually very good. So before we get started I want to show you that I have styled out CSI asking here in style that say it's us and I'm going to change my H-1 color to be blue. And when I refreshed my page it's close the southern tab. My color is blue. What do you do if you look at any web site. You pretty much never see this color blue unless it's some ugly web site for what you might want is you know you want black black being typically the default or yellow. So these are all named colors. And while that's fine they don't give you a lot of shades. And so there are tons of shades or hundreds of shades thousands millions maybe of you know yellow or orange or red. So how do we access those. Well we can do this in a few different ways actually. So the first one is a named. And we're going to comment this out and just say this one was named a named color and the next one would be let's use a hex. So hex starts with the pound sign number sign whatever you want to call it. And it's usually six letters and numbers long and you can use anything from 0 to 9 so 0 1 2 3 4 5 6 7 8 9. And anything from a to F A B C D E and F and you can mix pretty much any of these. So I know off the top of my head what this one does look we have read is this different from this color red. A little bit. I'm hoping that the change is actually visible here. So there is a little bit of a difference there. One is basically a raw red in hex and the other one is just called red. And so there is a little bit of a shade difference if you're thinking well Caleb why why do such minor shades actually matter. You wouldn't believe it but when you start making absolutely beautiful Web sites the slightest shade can make a difference. So let's do the zero his ERA was black. Now. OK so that's black. Now going back to our read example we have f 0 0 0 0 0 0 a bunch of zeros right. That's that one. But if we change it to be repeating So it's the first three letters but twice the shade changes ever so slightly. Now is it different from this red. A little bit now what if we did 5 5 5 5 5 5 now we've got like a grey color. OK so now we can work with some shades. Now if you ever see something like this or this where it's just three letters or three characters or just three numbers that's because your browser is assuming that it's going to repeat it. So 5 5 5 is the same as six of them in a row. And just to show you let's save that refresh. It's the same color. Now we can get letters involved in this too so f is the white is the color. Can't even see it but if I selected there it is. So we have a range in hex Now that goes that's black all the way down to what's going to get into lighter black and I'll show you in just a sec. So this is like a light light black and then it goes into A's and then B's and C's and he has lighter lighter and lighter until he gets to f.. So essentially what you're hex colors look like are you know 0 1 2 3 4 all the way down to a whoops I don't know I did that one a b c d not display D E and F.. So to show you what I mean. OK so we've got black refresh is that black. We've got gray but what happens if we go down to 9. It gets even lighter. And what happens if we go AAA which is the same as a had one too many in there. Look at that it's it's pretty similar. A BBB it's getting lighter getting lighter it's getting lighter and this happens over and over and over and over again until we get to F F F which is white. Now you can mix letters and numbers together. So we could do let's do I honestly have no idea what this is going to be. It purply pink color. That's actually a pretty nice color and there's not really any human way to read this I mean you can break it down. But honestly learning Hexe like being able to read this and realize that it's pink. So waste your time don't do that. Now there's another way to add color and it was in the comment this out and say hex colors. Oh and by the way if you want to comment something out in C-s us it's just slash and then asterisk anything in here and an asterisk slash. It's like this in a lot of programming languages too. So going back to recolor we have one more way and that's called R.G. be red green blue. So you can see that my browser gives me two options r g b and are G.P.A.. RGV is a CSSA three means Alpha and gives us basically translucency or opacity on R-Tex. We're not going to work with that one. We're just working with R.G.. It's red green blue. Now in this instance colors go from 0 to 255. So 0 0 0 0 is black and we know that because before when we were writing 0 0 0 right. Red Green Blue. So if I save and refresh it's black and if I go all the way down to 2 5 5 2 5 5 and 2 5 5 this is pretty much actually it is the exact same as saying F F F F F F and so I save and refresh this can't see it but when I select it there it is. Now what happens when I mix red green and blue with different colors or different integers to get 20. We've got 120 and we've got 80. I have no idea what this is going to be by the way. Like greenish or if we change that by adding just a one in front of the 20 or if we remove this one entirely. So there is there's no green at all so it's 120 red 0 green 80 blue. I like that. So now we have three ways of writing colors. And this one is just R.G. B colors. So in summary we have three different colored types. We have named colors. We have hecks colors and we have our G.B. colors. Now if you live in the UK or if you live in Canada you'll probably realize I'm spelling the word color wrong for you guys the word color is with an O. Quite often we don't spell it that way. In C Ss it's always the American way socio Alto are. Every single time. So your task for this video is to go and google a bunch of hex colors. There are hundreds and hundreds of Web sites that just have lists and lists and lists of hex colors just go and familiar stuff with familiarize yourself with some of them. There are some that are obviously much more important like black and white super common maybe like yellow and red. Pretty common as well. But anything else you can really use a named color or you can use some sort of color picker tool out there which will basically you know you can put that little eyedropper icon on top of a certain color and it'll give you the exact hex for the proper shape. And a lot of times it will also give you the R.G. B color as well. Typically in web development we stick with hex colors name colors don't have enough shades but Hexe colors have just enough and R.G. be a little bit too far like where we're pushing the boundaries too much there in the sense that we don't need to know the red green and blue values we just need the color itself. Now that changes when we get into our G-B a. But that's a subject for a different lesson. So your task go ahead and google some hex colors.