Web Color
Whether for text, backgrounds or stripes, sooner or later you will need to specify colors. There are plenty of methods for choosing colors, complimentary, triads, all kinds of color theory stuff. The part that is particular to the web is how the color is specified, and how it works once it is. The most common (and probably most obscure) way is hexadecimal. You can also use rgb values (either 0-256 or percentages), or a certain number of plain-language (reb, green, maroon).
Color on the web is often a matter of dealing with a certain amount of limitations, much like type. Another very important factor is that you are really at the mercy of your viewer. If someone is looking at your site with a 15-year-old CRT with the red channel blown, through on-board hamster graphics, it really doesn’t matter what you do. Mostly though, you can figure on at least thousands of colors.
Palettes
Web color is dominated by the 216 color ‘web safe’ palette. This is due to really two factors. The first is that when the web was new, many displays were only capable of 256 colors. Along with this, there were (are) only 216 of those colors which displayed with any accuracy across platforms. The second factor is that the 216 Web Safe palette is pretty manageable. Below is the VisiBone 2 version, a nice layout that can be used with lots of applications, including BBEdit, Photoshop, and ImageReady.
Now, however, the idea of what is web safe (in terms of color) has changed. Mostly due to the fact that only a few crazy people and utter cheapskates are running boxen with displays only capable of 256 colors (8-bit color), the web safe palette has expanded to thousands. Millions of colors are still not a sure bet, but even folks who have no idea how to change their display resolution are running thousands of colors (24-bit color).
So with thousands, how do you know what is safe and what is not? The secret is in making used of hexadecimal notation for color. A bit of explanation. Hex uses 0 through F, or base 16, to denote values. Each color, red, green and blue is denoted by a two-digit value. In hex rgb, black is #000000 and white is #FFFFFF. The traditional web-safe, 216 color palette uses the 00, 33, 66, 99, CC and FF values, and only these for the three colors. So, #CCCC66 and #FF33FF are valid combinations. (With CSS these can be written in a shorthand, with a single digit for each color: #CC6, #F3F, etc.).
In the expanded web-safe palette, any pairs can be used. So you can have #AA1144, or #332211. A nice version of this palette can be found at More Crayons. The only real drawback is the size of the palette, which is really too big to be practical for a floating palette like the Visibone 2.
Below are two greyscale color bars. The top uses the greys available in the 216 web-safe palette, and the bottom uses the expanded palette. The bottom colors are (in shorthand version) #FFF, #EEE, #DDD, #CCC, #BBB, #AAA, #999, #888, #777, #666, #555, #444, #333, #222, #111, and #000.
As a side note, Macintoshes (or at least the ‘pro’ models: PowerBooks and towers) come with a nice little app called Digital Color Meter (found in the Utilities folder), which allows you to find the hex value of any color on your screen.
Dithering
One of the results of a limited palette is dithering. Dithering is a kind of digital pointillism. Pixels of ‘pure’, in this case colors from the 216 palette, are interspersed in other pure color to make a third color. This has particular effect in gradients:
JPEG, no dither, 1.35K
PNG, using 256 colors, 10.36K
PNG, using 2 colors, 4.19K
Dithering does not affect JPEG, but plays a large part in GIF and PNG. As you can see in the lowest image, the file size is much smaller, but the image is pretty poor.
Dithering will generally occur when you specify a color that cannot be displayed on a viewer’s machine, or by a particular browser. Mostly it would be the former case, but limited colors may occur with devices such as handhelds and the like.
