Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The most common method of defining colors through CSS is hexadecimal notation. Hexadecimal notation looks just like this, and it can be a little intimidating the first time you see it. Once you get past the odd syntax however, you'll find that it's really easy to use. Hexadecimal notation is really nothing more than number character pairs that range from 0 to F, that are then used to represent RGB values. Take a look at this table. The first pair of characters is used to find the red value, the second is used to find the green value, and the third is used to find the blue value.
Now that we know how hexadecimal notation works, let's take a closer look at its syntax. So I've opened up the hexadecimal.htm file which you can find in the 06_02 directory. If I scroll down, I notice that we just have a headline and a paragraph below that. I'm going to be using the paragraph to practice with Hexadecimal notation and we're going to be setting colors for both the background and the foreground. Now currently, the background of the paragraph is black, and the color is white. If we want to replace that with hexadecimal notation, it's actually pretty easy to figure out exactly which values we need to use here.
So remember that the values go from 0 all the way to F. 0123456789, ABCDEF. 0 obliviously would mean 0, F means 255. So since the way RGB works, 255, 255, 255 is white, and 000 is black. To do black, I would just type-in #000000. So I'm using all six there for 0s and then for white, I would just do the opposite, #ffffff.
Now occasionally, you're going to see hexadecimal notation and we're using capital letters or lowercase letters, really browsers and user agents don't care which one you use. So it's really sort of a personal choice. So I'm going to save this and preview this in a browser, and as I do that, I can see the hexadecimal notation that's represented. Well colors like black and white are fairly simple, but what if you want to do something like a maroon color or a blue or a purple or something like that? That's not quite as simple, and more often than not, you're going to have to use a tool to help you figure out what the hexadecimal value is.
Now, more than likely, you have a desktop tool that can help you with this. Programs like Photoshop, programs like Illustrator, most HTML editors that have color pickers will also give you the hexadecimal notation once you've mixed the color together. If you don't have any of those handy, you can visit this really neat online tool by Adobe called Kuler and you can find this at kuler.adobe.com. This tool helps you mix color palettes together, save color palettes, and determine what the syntax would be for various color notations. So let's just say I want to mix a color together.
You can choose from any one of the recent color palettes that people have worked with, or you can create your own. But what you're really looking for is this little setting right down here which allows you to make a change to a theme or view the color values and when you do that, you're presented with a whole new set of tools. Now here you can choose any one of these colors as a starting point, and then you can just start moving the values around in the color mixer, you can move around the Hue, you can move the saturation and brightness and you can even move these sliders down here. You want to make some finer tweaking here, and when you do that, you're presented with a hexadecimal value as well as the HSV, RGB, CMYK, and LAB values for these colors.
So this is really cool. So I'm just going to grab the HEX value from here. I'm going to copy this. I'm going to paste it into the background of my paragraph. Don't forget the (#) that's one of the things about hexadecimal notation. The (#) is part of the syntax and you'll notice there is no space between the (#) and the rest of the HEX decimal notation. I can come in and grab another color for the foreground, so maybe something a little bit brighter. Again, I can move this color around until I get what I'm looking for. I can grab this color, copy it, and paste it into my code.
So this is an extremely handy tool, and as I save this and preview it, we can see the change that I've made to the color. Excellent. Very handy tool, but more than likely you probably already have something on your desktop you can use, it's totally up to you, it's just another option out there. Now, there are some slight variations to the hexadecimal notation syntax. If you have matching number pairs and here's what I mean by that, let's say for background we had something like (#336633) which is going to be a darker gray and for foreground, maybe we had something like (#ffaacc).
Now, if I save this and preview this in the browser, you can see that we have sort of a pink and a green together there. All right. Well, anytime you have matching pairs like this, you can just shorten that to three characters. So I can go here (#363) and that represents (#336633). Here, I can shorten this to fac which is short for (#ffaacc). If I save this and preview it, I get exactly the same color representation.
So anytime you have those matching pairs, you can go ahead and do that shorthand notation. Now, all three have to be matching. If I had (#ffaacd) I would not be able to use shorthand notation for this because cd does not match. Now, speaking of shorthand notation, I'm just going to go ahead and end this with a background of 600 and for color, I'm going to come in and use (#fff) which again is shorthand for white, so (#000) would be black, fff would be white, (#600) is going to give me a nice maroon color.
So if I save this and preview it, I get exactly what I'm expecting. HEX values are relatively easy to use, especially if you're using the shorthand notation, but they are not easy to memorize, especially if we're using values that depart from the sort of matching pair web 216 that most people are used to using. So you'll usually need to use a tool like Kuler to find HEX value you're looking for unless your HTML Editor has a built-in color palette of its own. Now, as you may have noticed in the labs that I've worked with, I'm really fond of putting a color palette for the site at the very top of my Styles, makes it a lot easier for to remember the values, and it's a practice that I recommend you adopt as well.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.