|
HTML uses a three-part hexadecimal format to specify colors (of text, of backgrounds, of cells in tables). The first part specifies the strength of the red component of color, the second specifies the strength of the green component, and the last specifies the strength of the blue component. Look at Figure 1. It is a representation of the HTML color format. In the Figure, the "#" represent numeric values. As I stated above, HTML denotes the strength of each color by a two-digit hexadecimal (base 16) number. In base ten, there are 10x10 possible combinations of two digits. The weakest (smallest) two-digit number in base ten is "00", or zero. The next stronger (larger) number is "01"; the next larger number after that is "02" or two, etc. There are ten possible digits in base 10: "0", "1", "2", "3", "4", "5", "6", "7", "8", " and "9". When we exceed "9", we go to the second digit and start over in the first digit: "10", "11", "12", etc. When we exceed "19", we increment the second digit and start over in the first digit: "20", "21", "22", etc. The largest number that can be represented by two digits, in base ten, is "99", which means 9x10 (nine times the value of the second digit, which is ten in base 10) + 9 (nine times the value of the first digit). In base 16, we do not stop at "9"; we go to "A", "B", "C", "D", "E", and "F". So while the largest one-digit number in base ten is "9", the largest single-digit number in base sixteen is "F" (written as "15" in base ten). In base sixteen, the numbers "A", "B", "C", "D", "E", and "F" correspond to "10", "11", "12", "13", "14", and "15" in base ten. In base 16, the next larger number after "F" is "10". It does not correspond to ten, but to sixteen. We increment the second digit and start over on the first. Then the next larger numbers are "11", "12", "13", "14", "15", "16", "17", "18", "19", "1A", "1B", "1C", "1D", "1E", and "1F". These correspond to "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", and "31" in base ten. |
|||||||||||||||||||
|
|
|
|
|
|
|
Figure 1. HTML represents colors by specifying strength of red, green, and blue components. Each strength is represented by two hexadecimal (base 16) characters.
| |
| ||||||||||||
| When a color is turned off completely (minimum strength), it is represented by "00". When a color is turned on completely (maximum strength), it is represented by "FF". | |||||||||||||||||||
|
So the color red is represented by red turned fully on ("FF" in hexadecimal), and green and blue turned fully off ("00"). Thus the six-digit hexadecimal representation of red is "FF0000". |
The color green is represented by red and blue turned fully off ("00" in hexadecimal), and green turned fully on ("FF"). Therefore the six-digit hexadecimal representation of green is "00FF00".
|
The color blue is represented by red and green turned fully off ("00" in hexadecimal), and blue turned fully on ("FF"). So the six-digit hexadecimal representation of blue is "0000FF". |
|||||||||||||||||
|
The color yellow can be represented by both red and green being fully turned on, with blue turned off: "FFFF00". |
If the green is reduced, the result is orange: "FFCC00" |
If both red and blue are fully turned on, with green turned off, the result is violet: "FF00FF" |
|||||||||||||||||
|
Reducing the red, but leaving blue fully on and green off, produces another shade of violet: "9900FF" |
If red is turned off, but blue and green are turned fully on, the result is turquoise: "00FFFF". |
Start with turquoise, then reduce the blue: "00FF66" |
|||||||||||||||||
|
Take the previous color, and swap green and blue: "0066FF" |
Start with violet, then increase the green: "FF99FF" |
"990066" produces yet another shade of violet |
|||||||||||||||||
| Putting the colors adjacent to each other: | |||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
You can experiment with different combinations. Template 3 allows you to specify the six-digit hexadecimal representation of a color, and see what the color is. The number of possible HTML colors is 16 6 = (24) 6 = 2 24, which exceeds 16 million. But if we use three pairs of two digits (the pairs corresponding to red, green, and blue), and allow just six values for each pair ("00", "33", "66", "99", "CC", and "FF"), the number of possible combinations is just 6 3 = 216. Those colors are shown below. The numbers in each box are the hexadecimal representations of the color of the box. There are 36 colors starting with "00", 36 starting with "33", 36 starting with "66", 36 starting with "99", 36 starting with "CC", and 36 starting with "FF". This gives a total of 6x36 = 216 colors. The second color file contains the same colors, but the boxes are much smaller so that you can see more of the colors at once. The third color file contains the colors in color order (red, then green, the blue, then pink, then teal, then gray/brown), rather than numeric order. The fourth color file is the same as the third, but with smaller boxes. |
|||||||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|||||||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
||||||||||||||