Master HTML 5 #6: HTML Colors

One item you will eventually need in your web design is colors. And when I talk about colors, I'm also talking about black and white. Browsers interpret colors one of 3 ways: the color name, you know, like blue, black, green, magenta; the color's RGB code, and the R is red, G is green, B is blue; and by using a code called hexadecimal. This video will mostly deal with the hexadecimal method. Now when we add hex colors to our HTML presentations, we do so with the pound sign and a sequence of 3 pairs of digits following the pound sign, hash symbol, number sign, whatever. These 6 digits will range from 0 to 9 and A to F, so there will never be a color code with a Z in it, for example, only 0 through 9 and A through F. Since there are a little more than 16 million different color possibilities, memorizing all of them might be a bit much for Joe Average, so I'm going to show you a web page that shows you the different hexadecimal colors. So all you have to do is simply pick the color you want and the hex code is shown right there for you. Simple Simon. Okay, let's check out this cheat sheet that I was talking about, then we will add some colors to an HTML document for some real-world applications. Basically, we can just do a search for HTML colors and then just choose images. Let me show you what I'm talking about. Go to our favorite search engine, and in my example here it's Google. As you can see here, about 1.5 billion results. But at this point, if we just go to images, we've got a whole bunch of options here to work with. So just pick one that you like and stick with it. Let's go ahead and choose this first one here, for example, and we just click on the image there. It brings up a list of all these colors with the hexadecimal code. As you can see here, there's 6 digits on each one. And don't forget that whenever you put one of these color codes or hexadecimal codes into your HTML document, they must all begin with that hashtag or number sign or pound sign. Now what I normally do is if I'm trying to match a color to an existing layout that I have, maybe a header image or some button that I'm wanting to match with, then I will use a color picker. And there's several to choose from. I'm using the Chrome browser, and if we come over to the Chrome Web Store and and that's at chrome.google.com/webstore. Then you can just do a search for ColorZilla. And like any other add-on or extension, be it for Firefox or for Chrome, then you just simply install that particular extension and you're good to go. Let me show you. I've already got this one installed, but at this point you would just click on this, click on the added to Chrome, and this is already added to mine. So I'm going to go over to my extensions here Go to Tools, go to Extensions, and I've got a lot of mine turned off just to increase the speed of my browser. Right here is ColorZilla, and I just want to enable it. As you can see, it just puts it up right here. So now then, if I want to check out an exact color to one of my, say, buttons that I'm wanting to match or a header image, and I just click on the ColorZilla color picker. And come on down here and you can see right up here is the color hexadecimal code, the RGB code. And as you can see here, the 006699 in this box here matches that in the hex code, in the hex code up top here, 003399, and so on. So that's how I can get an exact match of an existing image that I already have. And another option is you can use this online color picker at colorpicker.com. And right here it's giving you the hex code that you can choose from any number of, just kind of moving this guy around here. And you can also choose from the RGB code here. And whenever you get a color that you like, you just click on Add to My Colors and it'll add it down here like so. So then you can just come on back here and click on this and it shows you that hex code there. And here it shows you that hex code there and so on. So this might be a nice site for you to bookmark along with page like this that has a whole list of them. Now another option that I would go for is using something like the color pickers in Photoshop or GIMP, for example. But of course that requires you to install those particular software, and with Photoshop it also requires you to buy it, which can be kind of a hefty sum. So that's a quick rundown on the colors. Let's go ahead and demonstrate this in an actual HTML page. Let me go ahead and open up my Komodo, and I've already done that here. Let's go to File, New, and let's go to Template HTML5. And here we go. Now then, I've added some content here into our HTML document, and I went ahead and added some styling up here in the head tag and some content down here in the body section. Now the quick rundown here for the body, I've made the background yellow and I've used the color name for this. And for the H1 tag I made the color for the text red. That's FF at the very beginning. Remember RGB. And for the H2 tag I made the color blue. Remember RGB. Red, green, blue. And for the paragraph color I made it blue. And here I used the color name. Now these are just using the Fs and the zeros. You can go all out and use any number of these color codes here, for example, to really add some pizzazz or matching the surrounding color scheme of your site. Let's go ahead and save this and take a look at this in our browser. Yeah, that'll be fine for now. Preview this in our Komodo tab just to kind of keep things close by here. Here we go. Now then, if we were to change this to a hexadecimal code, remember we have to start it off with the pound sign or hashtag and we can only go from 0 to 9, A to F, or any combination thereof. I have no idea what that color combo is going to be, but let's just see. Save that. Okay, kind of a nasty blue. And if we were to go all Fs like so, but if we want to change this to this color of green, for example, for the H1 tag, 006600. Don't forget we have to have the hashtag at the very beginning. Save. And there we go. So there you are. That's how you can add some additional coloring to your web design and a few spots on the internet for you to go to get some additional color ideas. And some browser add-ons whether you are using Chrome, Firefox, and I'm not sure if there's one for Safari, Internet Explorer, or Opera. But they may have something. And if not, you always have those items like the online color pickers too. That's going to bring us to the end of this video on HTML and CSS colors. Thanks for watching and you have a great day.