Lesson 4

 Web Design Home

Web Design

So How Does Color Work on Web Pages?

Good question. You may already know that the three primary colors are red, blue, and yellow. They're called the primary colors because there are no two "lesser" colors that make them up. For example, purple is not a primary color because it can be created through combining equal parts of blue and red. By combining different amounts of these 3 primary colors, you can create just about any color that you want to.

In the world of mechanical things that make color, like a television or a computer screen, color is created through the mixing of three basic colors to make other colors. You would think that the TV's and computer monitors of the world would simply use the three primary colors to start with (red, blue and yellow), right? Wrong! Believe it or not, the three colors used are red, green, and blue. Why, you ask? I don’t want to make this too complicated, but believe it or not, by combining red, green and blue, you can still create all possible colors, since green already has yellow in it (green = yellow + blue). Anyway, this process of creating color is called RGB color. What do you think R, G and B stand for? You guessed it…red, green and blue.

I hope that you were able to follow all that. What you definitely need to know is that to create a color on a Web page, you will be combining red, green and blue to create that color. You will represent these colors by a 6-digit number called a hexadecimal code or a “hex-code”.

Hex-Code Basics

As you already know, our number system contains 10 digits. That is why our number system is known as the decimal number system. The digits that we are accustomed to are:

0 1 2 3 4 5 6 7 8 9

When we count, we normally count like this:

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21….

Notice that the largest one-digit number is 9. Then we start using combinations of our ten digits to create larger numbers. I know you’re reading this right now thinking, “No duh!” But we’re about to see a brand new number system and I want to make sure you understand how it works.

OK, here we go. The hexadecimal number system contains 16 digits. To keep things simple, the 16 digits are:

0 1 2 3 4 5 6 7 8 9 A B C D E F

The first part looks just like the decimal number system, but what about those letters? Those are actually the last 6 digits of this number system. The letter A in this number system would be equal to the number 10 in the decimal number system. So….

A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

So if we count in the hexadecimal number system, it would look something like this:

1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F, 20, 21…

I know that it’s strange to see letters as part of numbers, but these extra 6 digits will give us many more options of color when we start using our hex-codes.

So How Does a Hex-Code Create a Color?

Now we are ready to look at the format for a hex-code. In this model, H stands for a hexadecimal digit, which can be anything from 0 to F.

#HHHHHH

We always start our hex-code with the “#” symbol. This tells your Web browser that a hex-code is coming up. The first 2 digits of your hex-code tells you how much red you want in your color. The next 2 digits tell you how much green you want in your color. And finally, the last 2 digits tell you how much blue you want in your color. The computer creates the three intensities of red, green and blue, mashes them together, and you get a single shade of color.

So for each “color part” (red, green or blue), the smallest number you could have is 00, which represents zero hue. On the other end of the spectrum, the largest number, FF, is equal to a pure color. If this makes perfect sense to you, that’s great! If not, just keep reading along, and as we look at some examples, it will probably start making more sense.

Let’s start by looking at opposite ends of the color scale. Here is our first hex code:

#000000

This tells us that this color contains no red, no green, and no blue. What color do you think this may be? If you guessed black, you’re right!

#FFFFFF

This code is equal to white. Why? Notice the three colors are all set to FF. That means the highest level of red, green, and blue. In a computer or a television, the combination of all three primary colors creates white.

What if we wanted to create a hex-code to create pure red? Any ideas? You would want as much red as we could have, no green and no blue, right? Here is the hex-code for pure red:

#FF0000

How about pure green? What would that look like? You would want as much green as we could have, no red and no blue. So this code would be:

#00FF00

And what about pure blue? You would want as much blue as we could have, no red and no green. So this code would be:

#0000FF

Now, here are a few other codes and their breakdown. Don’t worry, you won’t have to memorize all of these hex-codes. I just want you to understand how the hex-code creates a color: Here is yellow

#FFFF00

Notice the red and the green are at full tilt. There is no blue. You may wonder how this works. After all, if you had color crayons, red and green don’t make yellow, right? Remember that we are dealing with a computer screen. What goes on digitally is that when you put the red and green up against each other, the red cancels out the blue in the green (since blue and yellow make green), and all that is left is the yellow part of green. Again, I know that this is a little strange. OK, here are a few more examples.

#DC143C

The code above creates a shade of red called "crimson". The red setting, DC, is pretty intense. There's not much green. Blue is set a little less than halfway up.

#EE82EE

That's violet. The red and the blue are at pretty high levels. The green is there, but at a lower level. Now, this is not purple, but violet. Purple, as I said above, is a combination of red and blue alone. The code is #800080. Notice there's no green at all, just an equal amount of red and blue.

How Many Hex-Codes Are There?

To be precise, there are 16,777,216 colors that you can create using hex-codes. Now don’t freak out. I have some good news for you. Most of these colors are not “Web-safe”, meaning that these colors will not consistently work well on all Web browsers. There are only 216 Web-safe colors, and these are the colors that you should use on your Web pages. To create these 216 colors, these are the only 2-digit hexadecimal digits that we will use for red, green, and blue:

00
33
66
99
CC
FF

Do you want to see what these colors look like? I have provided you with an easy-to-use color chart to help you out. Please take a few moments now to look at this chart. You will be using these colors on your assignments for this lesson, and on all future Web pages that you create.

In addition to these 216 hex-codes, there are 16 colors that can be represented in HTML by the English name for the color instead of the 6-digit hex-codes. These colors are:

Changing the Background or Text Color for an Entire Page

On the Web pages that we have already created the past few weeks, we have included a <BODY> tag to begin the body of the page. You have noticed, of course, that in all of the pages that we have created so far, the background color of each page has been white and the text color has been black. Well, it’s time to give you some new options. Look at the new body tag that we will be using:

<BODY BGCOLOR="#HHHHHH" TEXT="#HHHHHH">