Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As we start to explore working with color on the web, we have to understand that color on the web is displayed and interpreted in a different way that you might not have seen before. In traditional design, we think of color as being a formula that's comprised of different values of channels, like RGB for red, green, and blue; or CMYK for cyan, magenta, yellow, and black. On the web, it's still RGB color, but it utilizes a system known as hexadecimal codes in order to display the color. Hex codes are six-digit values that range from 0 all the way to the letter F, and it refers to the amount of color present in the overall appearance of the object.
Zero is the smallest representation of a color. It's almost a total absence of color. The letter F is 15 times the intensity of the color zero. Combinations of these digits create different shades of a particular color. Double zero is equal to the zero Hue. Double F is equal to pure color. Think of it this way: if you have double zeros, I mean you have nothing. You are broke; no color exists. If you have two Fs, you are full. F for full. So you are full of whatever color that maybe. So zero means nothing and F means full, and anything in between is just a varying degree of how full you are on that particular color.
This color representation is done three times: once for the red, once for the green, and once for the blue, in that specific order. So as you can see here on the screen in my example I have a black square in the background, and the hex code value for this is 000000. So I have no red, no green, and no blue. So I have the total absence of color, which translates to black. If I wanted to go to the opposite side of the spectrum, I could type in all Fs and I would get the color white.
Let's jump into the color picker and show you some more examples. First thing I'm going to do is default my background colors by hitting the letter D on my keyboard. That's just going to set my fill and stroke back to the default of white and black. I'll then double-click on the fill to open up the color picker. Once inside of the color picker, let's go down to this little corner area here, and let's start to mix up some hex codes. Let's see that I wanted pure red. Well, remember, in order to be full on a color, I need to type in the letter F. So the red comes first, so that will be two Fs: FF.
I don't want any green, so that will be two zeros, and I don't want any blue. That will be two zeros. Now, when I press the Tab key, you should see my color picker switch to completely red, just like so. Now, let's say that I wanted full-on green. Well, that's zero reds, full-on green, and zero blue. Press the Tab key. There's my 100% green. Same thing for blue. That's zero reds, zero greens, and full-on blue. Press Tab and there you have it. Now, are you going to be able to remember every single hex code under the sun? No, it's not possible, but you don't have to.
Inside of Illustrator, all you have to do is pick your color inside of the color picker and it will automatically write up the hex code for you, which you can then take and send off to your developer or use it in any other designs or CSS that you might be composing. Let's take a look. Let's say I wanted some sort of orange color, like this. As soon as I set the color picker to a specific area, it automatically gives me the hex code right here. All I have to do now is copy that and then send it off to the developer or paste it into my Dreamweaver document or wherever I might be working with CSS, and I've automatically got that color ready to be assigned to anything.
So, let's escape out of here and go back into my document. Remember, zero means you have no color, F means you are full-on with that color. So, hopefully by now, you have a better understanding of what hex code colors are, why they are used on the web, and how you can use them to implement color in your next project.
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.