Coloring By Numbers

Unless you've been living under a rock, or are still cruising the Web with a Lynx browser, you're probably familiar with the use of colors in Web page design. HTML allows us to specify colors for text, links, visited links, backgrounds, etc., with a fair amount of ease.

You can do all these things, and much more, under CSS1. In fact, with CSS1 you can define a color value for any element, class, pseudo-class or -element, and so on. However, we aren't going to talk about how to set the colors today. Instead, we're going to discuss the ways in which the colors can be specified. There are more of them than you might think.

How Colors are Represented Every color on your monitor is defined by three values: red, green, and blue (thus the term "RGB monitor"). By combining different levels of these three colors, any color in the visible spectrum can be generated. For example, white is a combination of all three colors at full strength. Black is the absence of color. Red is created by turning red up to full strength, and blue and green down to nothing. To obtain various shades of red, turn down the red, then turn up blue or green until you get the desired color. To create the color purple, for example, turn the red and blue values up as high as they'll go, and leave green at zero.

Coloring Basics

Actually, I am going to talk briefly about one property: color. I bring it up because I'm going to be using it in examples throughout this article. color is used to set the foreground color for an element. In most cases, that will be text, although in some cases it could be used to determine the color of a border. Anyway, the generic syntax for color is:

color: <color>

That isn't an actual value there. It's a placeholder for a whole range of possible values, which are the subject of today's discussion.

Playing the Percentages

The easiest CSS1 color system to understand uses percentage values. In this scheme, the RGB levels are specified by writing out three percentages, like this:

<P style="color: rgb(50%,0%,50%);">
This is a shade of purple.</P>

This is a shade of purple.

Let's pull out the actual rule and examine it. First, the set of RGB values is preceded by the keyword rgb and surrounded by parentheses. A generic representation of this system would be rgb(R%,G%,B%). Second, the three percentages are separated by commas. Finally, the order in which the percentages are given is critical. They must be specified in the order red-green-blue. If I were to change the order of the values above, I'd get a very different color:

<P style="color: rgb(0%,50%,50%);">
This is not a shade of purple.</P>

This is not a shade of purple.

One theoretical advantage of percentages is that you can, if you so desire, declare percentages using real numbers (as opposed to integers, which we'll get to in a moment). In other words, the following declaration is perfectly legal:

<P style="color: rgb(50.5%, 0.0%, 49.7%);">
This should be a shade of purple.</P>

This should be a shade of purple.

If, however, your browser shows a color which is significantly different from the one shown in the previous 'purple' example, then it probably isn't interpreting real numbers too well. This is one of those areas where authors should tread with caution.

A Scale of a Different Range

The next way to specify colors is very similar to using percentages. This time, however, instead of values having the range 0.0% - 100.0%, they have the range 0 - 255, like this:

<P style="color: rgb(128,0,128);">
This is a shade of purple.</P>

This is a shade of purple.

The number 255, as you may know, is one of those mystical powers-of-two values around which so much of computer programming revolves. We'll see how it came into color values in the next section, but for now, let's concentrate on how to use it.

As you can see above, it's another rgb(R,G,B) expression, only this time, don't forget to omit the percentage signs. Also, using this particular system, only integers (whole numbers) are allowed, so no decimals! You can convert back and forth between this system and the percentage system simply by dividing an integer by 255 to get the percentage value, or calculating the percentage of 255 to get the proper integer. For example:

192 / 255 = .75294 (approx. 75%)
25% of 255 = 63.75 (approx. 64)

Thus, rgb(192,64,0) is very close to being the same as rgb(75%,25%,0%). Note that I say "very close" because they aren't exact matches, but the difference of a few tenths of a percent won't be obvious to anyone except the most color-obsessive.

This Should Seem Familiar

We turn now to hexadecimal notation, which you've probably seen or used in countless Web pages, because it's been used for at least a couple of years now. In this color scheme, colors are represented using three hexadecimal values strung together into one string, something like this: #FC0EA8. This system can be represented as #RRGGBB, thus showing that the red, green, and blue values fall right where you'd expect them.

If you're familiar with hexadecimal notation, this part will be a bit of a bore. For those still in the dark, here's how it works. Every decimal number (that is, every number in the base-ten counting system we all use) has an equivalent value in the hexadecimal notation, which is base-sixteen. Counting up from zero goes like this:

00,01,02,03,04,05,06,07,08,09,0A,0B,0C,0D,0E,0F,
10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F,
20,21,22...

In #RRGGBB notation, you can use values in the range 00 - FF. 00 is the same as zero, of course, and FF translates to 255 in decimal counting. Thus the use of the range 0 - 255 in the integer-value system we talked about above. In order to get the same shade of purple we've been using in some of our examples:

<P style="color: #800080;">
This is a shade of purple.</P>

This is a shade of purple.

From this, you can infer that 80 is roughly equivalent to 50%. As it happens, it's exactly the same as 128, since 128 decimal is the same as 80 hexadecimal.

As for converting from hexadecimal to integers (and from there to percentages), my recommendation is that you use a calculator which convert between decimal and hexadecimal numbers, or a obtain program for your computer which does the same thing. Of course, you might also have a program which lets you pick colors from a palette and then gives you the appropriate hexadecimal value. In that case, just use the program's output and don't worry about converting from one system to another.

There is an even easier way to use hexadecimal notation. It's sort of like a shorthand, although you can only use it in certain circumstances. This system is written #RGB, instead of #RRGGBB. In this case, each of the RGB levels is represented using only a single digit in the range 0 - F. Therefore, the color white, which is written #FFFFFF in normal hex notation, is written #FFF in this shorthand. Similarly, red can be written either #FF0000 or #F00.

What you have to remember is that the three-digit form is converted to the six digit form by replicating digits, not filling in zeros. Therefore, the color #080 is the same #008800, and #FC3 translates to #FFCC33.

Just Name the Color!

There is one last way to declare colors. It's even simpler than the last one. In this system, you just fill in the name of the color, like this:

<P style="color: purple;">
This is a shade of purple.</P>

This is a shade of purple.

Of course, this is a lot easier to do, because color names are easier to remember than percentages or hexadecimal values or what have you. However, there is a major drawback, which is that there are only sixteen defined color names. They are, in alphabetical order:

aqua, black, blue, fuschia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, yellow.

That's it. Some browsers may recognize more values than just these sixteen, but they aren't part of the specification.

Conclusion

We've seen all the ways you can define a color in CSS1. For those who are interested, I've drawn up a list of color equivalencies, based on the sixteen named colors. A little bonus for those of you who stuck with me to the end: the three-digit hex system is a convenient way to declare "Web-safe" colors for page elements. All Web-safe colors are based on the hex-pairs 00, 33, 66, 99, CC, and FF. An example is #33FF00. You can write the same value as #0F3 and save yourself some keystrokes, and that holds true for any of these "safe" colors.

Thanks for sticking with me through all the numbers, and come back for the next "Sense of Style!"

Color Equivalencies Table
Interested in finding out what the percentage, integer and hexidecimal values are for the 16 standard colors in the HTML 4.0 spec? This table has everything you need to start adding color to your site.