Have Your Colors Done

Working with colors on a computer screen is quite different from working with colors for print. While print applications usually use a CMYK color model, the Web uses a RGB (red, green, blue) color model, which uses 3 numbers from 0 to 255 to represent each of three colors. Because browsers are only capable of displaying a small subset of the 16 million possible RGB colors, most Web designers stick to what we call a Web-safe palette. If you use a color that's not in the Web-safe palette, a user's browser may arbitrarily substitute some other color.

A color is usually represented in HTML as a set of three two-digit hexadecimal numbers. The ones in the Web-safe palette are all the colors that may be represented by combinations of the number pairs 00, 33, 66, 99, cc and ff. 000000 is black, and ffffff is white. 00ff33, 990033 and 66cc66 are all valid combinations. This gives you a respectable number of possible colors to work with. To see all the possible colors, go to: http://wdvl.com/Authoring/Graphics/Colour/.

Whether you're choosing colors for a graphic image, a background, or for colored text, you should give some thought to what types of colors are appropriate for your site, and the message you're trying to convey. Whole courses are taught on the proper uses of color, and how to evoke various emotions with appropriate colors, so we'll just touch on the basics.

Bright primary or secondary colors (blue, red, yellow, orange, green) are loud and happy. They are seldom, if ever, used by stodgy corporate sites, but kids love 'em. If your design is mostly black and white, then a bright color can be used to call attention to certain elements, if they don't need to look particularly dignified. For example, red is often used to call attention to a short bit of text, although it always makes me think there's a closeout sale going on (perhaps there is).

Darker shades that contain a large proportion of black are attractive but dignified. A dark blue (#000066) or brick red (#330000) can add a little life to a black and white page. Try using colors like these for heading text or for horizontal rules (if you must use horizontal rules).

Shades containing a large proportion of white (sometimes called pastels) are laid back and undemanding. A pastel shade is often a good choice for a background.

Earth tones (brown, beige, tan, etc.) are organic and unobtrusive, and are popular with the earthy set. They can be used in either dark or light shades, and they tend to contrast well with primary colors.

Follow the same rule with colors as with fonts - unless you're designing a kids' site, don't use very many.

Backgrounds: Better Boring Than Bad

By now, everyone knows that busy backgrounds make text hard to read, and announce to anyone who cares that the designer of a site is a clueless amateur. So do overused motifs like sunsets and pictures of the Earth from space. How busy is too busy? Some purists would say that anything other than white or black is too much. More liberal designers, however, admit that a well-chosen solid color background can set the mood, while giving a site a unique identity. Choose a very light neutral color, and think carefully about the kind of associations a particular color has. Whatever color you choose, don't make it light grey. Someday sites with this default background color will be considered retro and cool, but that won't be for a while. If in doubt, make it white.

Have you ever wondered why all ISP sites have white backgrounds, while all Web design firms' sites have black backgrounds? A white background implies a no-nonsense businesslike attitude, while a black one evokes an air of creativity and mystery.

What about an image as a background? You can use one large image that fills the whole screen, or a small one that repeats (or "tiles") over and over to fill all available screen space. Using one large image as a background can cause problems, since not all site visitors will be using the same screen resolution. If your background image is 640 pixels wide, and your visitor's resolution is 1024 wide, then the image will automatically begin to tile. This means the visitor will see the edge of another copy of the graphic over to the right, which, I think most people will agree, looks really stupid. Far more predictable results may be had by using a small graphic that tiles over and over. The page will load faster, too.

One popular technique is to divide a page into 2 or more columns, each with a different background color, by creating a 1-pixel-high image that tiles over and over. The problem with this approach is that you'll still have to use a table to format your text into columns. Since the table and the background are independent, it's very hard to insure that they'll always line up. Once again, differing screen resolutions will mess you up. To achieve this effect, I prefer simply to specify different background colors for different table cells.

Good Page, Bad Page
Designing Attractive Web Pages
Timeless Typography