Colors on the web are tricky. First of all, they're usually represented as six digit hexadecimal numbers. These six digits are divided into three sets of two digits, each set representing the amount of red, green, and blue, respectively. Programmers love to confuse things this way. Instead of saying, "I want a web page with a blue background," you must say, "I want a web page with a #0000CC background."

To further confuse things, only 216 of the 16.7 million possible colors are "web safe" and will look approximately the same on all computers. So when you choose colors for a web page, try to stick with web safe colors if you can.

How to do it:

OK, lets look at how these colors fit into the HTML code for a page. Here's a snippet of HTML from the page you're reading right now:

See the colors? The bgcolor (white) sets the background color of the page, text (black) is the color of the text, link (blue) is the color of any links on the page, and vlink (purple) is the color of links that have been visited already.

In order to get these color settings to work on most web browsers, don't forget to end your HTML document properly:

The system is nice once you get used to it. If you're feeling really lazy and don't want to look up a particular color, you can try using the name of the color instead of its hexadecimal value. But your options are limited to colors you can name.

<FONT color="red">Red text</FONT>

Backgrounds:

I recently looked at 20 or 30 background graphic archives on the Internet, and here are some typical examples of background graphics I found:

OK, something's wrong here. You don't need an masters degree in Fine Arts to know that these just won't work as background graphics. (hey, I don't have one) Self-important graphics like these are Kings of the anti-subtle. Click on any of them to see for yourself--it's laughable.

The background should stay in the background.

Now that I've said that, here are my tips for background graphics:

Subtlety is the key word. Background graphics should interact with the foreground, but not dominate it.

Sometimes, a background graphic can become part of the foreground of the page, at which point it's only a background graphic by name, not by function. Notice how well the background of PBS's Frank Lloyd Wright web site works as a foreground element.

Background graphics should be very small (in bytes, not necessarily size). The simplest background is a repeating pattern that takes less than 1kb of space and can work wonders. Here's a tiny (164 byte) background graphic:

When it's used as a background of an otherwise boring art history paper, it repeats itself and gives the paper an entirely different character. So whatever you do, make 20kb your upper limit on the size of a background. (Look at the huge background on American Mile Markers -- surprisingly, it's only 18kb)

If you still want to use a really obnoxious background, you can always contain the page in one big table with a solid background color. Here's an example, which is totally readable and still has the background element.

The best uses of backgrounds are often away from the main text of a page. Take a look at Contax Cameras -- they only use background graphics on the left side, behind the toolbar.

Enough background etiquette, lets do this...

How to do it:

Remember how we put colors into the <BODY> tag earlier? The filename for a background graphic goes there too:

If you provide both a bgcolor and a background in the <BODY> tag, the background color will be shown until the background graphic finishes loading.

Non-scrolling Backgrounds:

You can also have the foreground of your page scroll while the background stays still. Just specify bgproperties="fixed" after the background="filename" in the <BODY> tag.

Non-tiled Backgrounds:

Lets say you have a large background graphic (large in dimensions, not file size), and you want to keep it from being tiled on your page. The easiest thing to do is to start with a very big graphic. Make it wider than most people's screen width (at least 2000 pixels wide), and taller than any of the web pages you'll make with it. This may turn out to be very tall, in which case some web browsers could choke on the file, and you're out of luck unless you use a non-scrolling background graphic (as discussed directly above). Anyway, this new graphic should have the same background color as your intended background graphic. Once you have the file created, copy and paste the background graphic you originally had into the upper-left hand corner of the big graphic you just created. This is your actual background graphic. It shouldn't be much larger than the original file you had, because blank space doesn't "cost" much in terms of file size.

Resources:

I made a web safe color chart. There are a lot of good colors here, so you should be able to restrict yourself to these 216 without much trouble.

R35 Direct sells a webColor Pad that has been very popular--it's a mouse pad with the 216 web safe colors on it. They also sell a few posters with web colors in various arrangements, and everything is pretty cheap.

Off the web, there are good books about color in general. Color theory and color psychology are interesting subjects all on their own, and they certainly have applications with web sites. I recommend Josef Albers' Interaction of Color. Another good color theory book (more of a textbook--Prentice Hall publishes it) is called, simply, Color.