Using Color Names and Hex Numbers

When a monitor displays colors on the screen, it uses the three primary colors of light: red, green, and blue (RGB). The monitor takes different amounts of each color, combines them, and projects them onto an area of the screen called a pixel, which stands for ‘‘picture element.’’ If a pixel must be white, then the monitor displays 100 percent of the red, green, and blue light in that pixel. If a pixel must be black, then the monitor displays zero percent of the red, green, and blue light in that pixel. HTML manages these RGB color combinations by using hexadecimal notation (or base-16). Hex notation has a number set from 0 to 15, unlike the 0 to 9 numbers in the decimal notation (base-10) we use every day. Because we can use only one digit in each number place, hex notation uses A through F to denote the numbers 10 through 15. For example, when you translate the number 60 into a hex number, the hex equivalent is 3C. Writing down 3C is much easier than writing 111100 in binary notation.

When you pronounce a hex number that looks like a decimal number, such as 43, you don’t say ‘‘forty-three’’ but ‘‘four three.’’ This precise pronunciation avoids confusion; it’s even better if you say ‘‘four three hex.’’ (However, saying this may require you to reassure the person you’re talking to that you’re not casting a spell on him or her.) Let’s look at an example and play with it a little bit. Remember that a byte is 8 bits and a nibble is 4 bits. Well, when you take a number in binary and covert it into hex you do it a nibble at a time. That makes it easy. The number 60 in binary is 00111100 32 + 16 + 8 + 4 = 60. Each byte has 8 positions from the rightmost ones position to the leftmost 128th position. The ‘‘0’’ entries have no value associated with them. Therefore, you do include the equivalent positional value in the summing. It is just like taking the decimal number 109 and adding it up as one in the hundredths position, plus 0 in the 10s position, plus 9 in 1s position, and having it sum up to 109.

As you can see, these position values are based on the value of 2 raised to a power: 20 being 1, 21 being 2, 22 being 4, 23 being 8, 24 being 16, 25 being 32, 26 being 64, and 27 being 128. If you add them all together (1 + 2 + 4 + 8 + 16 + 32 + 64 + 128), you get 255, which in binary is 11111111. To convert to hex, you take the four rightmost digits and add their corresponding values: 1, 2, 4, and 8, which will equal 15. According to the earlier description of hex notation, you know that 15 in hex is F. You then take the remaining four leftmost digits and add up their positional values: 16 + 32 + 64 + 128, which adds up to 240. Add 240 to 15, and you get 255. Thus, 255 in hex is FF.

Now, the more astute among you will have wondered why 1111 is 15 for the first set of digits on the right, but 1111 is added up to 240 on the left. And, if it is actually 240, how can it be F? Good question, and this is one of the reasons so many of us gave up on math. It makes perfect sense, but it’s difficult to explain. You can really look it at two ways: as two nibbles of 15 each or as 1 byte of 255. We actually look at it as both. We think of the rightmost 4 digits holding their position values of 1, 2, 4, and 8 to have a total value of 15 (F). We think of this right nibble as the remainder of a number. Then we look at the left nibble and we think of its leftmost four digits as holding the positional values of 16, 32, 64, and 128 for a total value of 240. Now, if you divide 240 by 16, you get 15 (1111), which also equals F. Thus, you derive the left nibble as also being F. Thus you get 240 + 15 for 255 (FF). And getting FF when a byte is all ones is a perfect 255.

Remember that a bit is defined as a quantity of information that can be defined as either a yes-no or true-false value. (In other words, a bit is set if its value is 1 to indicate yes or true, and reset if its value is 0 to indicate no or false.) A nibble is 4 bits, and a byte consists of 8 bits. For the second nibble (left F), square the value 15. You’ll get 225. Add 15 to that. You’ll get 240. Then, add the right nibble value (15): 240 + 15 = 255.

Decoding RGB triplets

HTML specifies colors by using a six-digit hex number, called a color code. The color code begins with a pound sign (#) and then the hex number follows. The six-digit hex number actually is a combination of three two-digit hex numbers that denote the RGB values. These RGB ‘‘triplets’’ enable you to set the red, green, and blue values of a color, and the color code combines these values and produces the color. For example, the color code #FF00FF denotes the strongest red (FF), no green (00), and the strongest blue (FF). This color code produces a magenta color on your screen. Here are some additional simple color code examples:

- #FFFFFF White (red, blue, and green)

- #000000 Black (no red, no blue, no green)

- #FF0000 Red

- #00FF00 Green (although the official HTML color name is ‘‘Lime’’)

- #0000FF Blue

If you want a less intense color, you can lower the red, green, or blue color value in the color code. For example, if you want to display a lighter blue, you can use the color code #0000AA.

Facing limitations of named colors

Learning what color code value combinations produce the desired color can be a process of trial and error. Once you do find the color, the number of sticky notes to remind you of the correct color code can cover the entire perimeter of your screen. Fortunately, HTML does have common colors named, so you can enter the name of the color instead of the color code. Table 6-2 summarizes the named colors in HTML and their corresponding color codes.

Using color pickers

There are 216 Web-safe colors, which are colors that display solid colors on any computer, monitor, and Web browser. Colors other than these 216 exhibit dithering geometric patterns appearing in the color that try to give the appearance of more colors. What happens instead is that the dithered colors give the appearance of a freakish-looking quilt or tartan. What’s more, a dithered color will look different on a different browser or on a different computer than the one you are using. So, using Web-safe colors is the only way to ensure that your Web site has a uniform look, no matter who accesses it. One of the other alternatives to the sticky-note path (and an effective way to ensure that your site has Web-safe colors) is to choose your colors from a color picker. If you use a Web authoring program such as Dreamweaver, you can select from Web-safe colors directly in the program. If you choose to program directly in HTML, there are several sources on the Web for you to explore.

The Microsoft Developer Network Web site has a safety palette page at http://msdn2 .microsoft.com/en-us/library/bb250466.aspx. This page, contains all the Web-safe colors displayed in two ways: from beginning to end, and grouped by related colors. When you move your mouse pointer over the color you’re looking for, the color code appears in a box next to the color.