The most basic of things to consider when thinking of color is that of the text and the background behind it. The best combination is black text on a white background. This combination aids in readability and in what I call “printability.” There will come a time when a user will print off a page or two from your site; if you use a light color on a dark background, what might result is a blank piece of paper! Not all printers can handle this combination. It’s just best to stick with black on white.
You can bring color into your design with your background color and the graphics and links you choose. It’s best, however, to limit the number of colors in your design to no more than FOUR — use gradations or shades of a color to expand that palette.
Colors on a computer monitor are generated in combinations of red, green, and blue (RGB). This additive RGB color system uses a series of three numbers to represent the intensity of red, green, and blue found in a particular color. In most imaging software, the RGB values are represented in decimal numbers or base-10 (and each number ranges from 0–255 to correspond with 8-bit [256] color). HTML requires that these color values be represented in hexidecimal (abbreviated as “hex”) numbers or base-16.
Let’s compare and expound a little here:
Decimal digits |
|0|1|2|3|4|5|6|7|8|9| |
Hexidecimal digits |
|0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F| |
10 in base-10 would be equivalent to A in hex, 11 would be equivalent to B, 12 to C, and so on. You end up with 15 being equivalent to F. |
You don’t need to be able to add or subtract in hexidecimal numbers (whew!) to create eye-pleasing web pages. The only numbers in hex that we will be concerned with are FF, CC, 99, 66, 33, and 00. These are the ones that correspond to a web-safe palette, one which will render (pretty much) the same in any browser. FF represents the highest intensity of a color component (red, green, or blue) found in a particular color. 00 represents the least amount of a color component. The table below shows the equivalent values in the RGB and hex palettes. |
% of color | RGB | hex |
100 | 255 | FF |
80 | 204 | CC |
60 | 153 | 99 |
40 | 102 | 66 |
20 | 51 | 33 |
0 | 0 | 00 |
|
In HTML, colors are represented by three pairs of these hexidecimal digits, each pair representing the amount of red, green, and blue (and in that order) in that color. |
Some examples: |
FF0000 = | | 990000 = | |
00FF00 = | | 009900 = | |
0000FF = | | 000099 = | |
FF00FF = | | 990099 = | |
FFFF00 = | | 999900 = | |
These colors don’t necessarily jive with what you’ve been taught about the color wheel in art class — FFFF00 above is a case in point. We all know that red and green do not make yellow when we’re mixing paints. But we’re talking the projected LIGHT from your computer monitor here, not paints or pigments, and the additive nature of colors in the visual spectrum applies: |
|
The image above shows how the light from red, green, and blue flashlights would appear if shone on a dark wall. Note that the place where all the colors come together is white. If we recall that white represents the combining of ALL the colors in the visual spectrum, it is easy to see that FFFFFF equals white. The absence of color (000000) is black. (This image also demonstrates that, indeed, red and green DO make yellow in the light spectrum!) |
This web-safe color palette includes 216 colors that the major browsers (Internet Explorer, Netscape, and Mosaic) and platforms (PC and Mac) share, making it possible to design web pages for any of them and to be fairly certain they will look the same no matter what. (NOTE: Macs tend to render slightly darker shades than do PCs.) |
This web-safe color palette was first discovered and used when the web was in its infancy (way back in the late 1990s) and computer monitors could display only 256 colors. Today, most computer monitors can display millions of colors, so some would say all this talk of a web-safe palette is pointless. It is my humble opinion, however, that using a web-safe color palette still is appropriate. Can you really even think in terms of millions of colors? That’s WAY too many choices, especially when you are going to use just a few of them in your web design anyway.
|
