Choosing Color for Web Pages

Websites have something called palettes (whether the builder of the site knew it or not). Imagine a painter painting a portrait of your web site. The colors he decides to use comprise a palette, or set of colors. Pretty simple.

In books on web design, you will often see references to web safe colors. The idea is that these colors look the same in every browser (e.g. Netscape, Internet Explorer) and on every operating system (e.g. Macintosh, Windows). You would think that colors would be the same everywhere, but they're not. So certain colors that look the same on all the different computers were chosen. There were 216. Further study, though, showed that only 22 of the colors were really 'safe.' Many have questioned these results, however. To only use these, or even the set of 216 colors, is probably not a good idea. Use them when possible.

It's true that you might have some color issues, but for the most part these will be minor. One thing I've noticed is don't make a graphic with a color that is supposed to be alongside some coded color in the web page- this often produces unsatisfactory results, so be aware of it in your planning. So, your page may not look exactly the same on every computer, but it will look fairly close. Besides, it's likely that a color you want or need will not be 'web-safe.' The key to color is good choice and consistency.

Your palette should have about 3 to 5 colors. Once you have them, don't use other colors (except in photos). This will help establish your site's look.

Here are a couple of ideas for getting a palette. Look through other websites and find colors you like. Or go through some photos (or even paintings) and choose some colors.

There are several great resources for choosing color online, such as ColorBurn and Kuler from Adobe. This will hopefully give you an idea of how the colors will look together. Get a couple people's opinion on the colors, too. If you would like, e-mail them to me and I'll take a look!

Appendix: What is that color?

Once you've found the color you want, you may be wondering what the color's name is. Computers use special codes to reference colors. They all have six letters or numbers in them. To find out what the code is (which you will use in your web page), scan in the picture or take a screenshot of the web page with the color in it. Open up the image in a graphics program like GIMP or Photoshop. Find the eye-dropper tool. Using it, click once where the color is and it should now be in your toolbox as a color to paint with. Double-click that part of the toolbox and a window will pop up. Find the six-letter/number code. That's it!