Picking A Color Scheme

For Your Web Page

Before you can consider the finer points of your design, you need to make the big decisions. Few of these decisions are more important than what color scheme your website is going to use.

Pay Attention To Contrast

You need to pick colors that provide enough contrast to make your text stand out (readable). Stay away from using a light colored font on a light color background as it would be very difficult to read. Remember your emphasis is on getting your message read. An unread message is a useless message.

Not Too Many Colors

You should choose 3 or 4 colors for your site, and use only those colors (or shades of those colors). Decide ahead of time which colors you're going to use, and stick to it.

Complementary Colors

Complementary colors are opposite each other on a color wheel. The 3 most common sets are

1. red and green
2. blue and orange
3. yellow and purple.

These colors work surprisingly well together.

Picking complementary colors is also a good way to pick colors that will be easily readable against a certain background: look for the exact opposite color to maximise readability.

Analog Colors

Another approach to try is to pick colors that are similar to your main color, meaning that they're near to it on the color wheel. Red, for example, goes well with its analog colors, orange and yellow. If overdone, this can make your site look too bright, but in moderation the results can look good. It's no coincidence that these combinations often occur in nature.

Chromatic Colors

My personal favorite technique is to use colors chromatically. You use different shades and hues of 1 color in your entire design -- nothing else apart from black and white. For example, you might use light blue, bright blue and dark blue together. This creates a sleek and professional look.

Take Colors From Nature

If you're lacking inspiration for a color scheme, go for a walk outside. Take a look at plants, landscapes, and animals. I once based an entire design on a photograph I took of a cat, and it turned out far better than I would ever have expected. Nature knows how to use colors -- learn from it.

Color Blindness

Try to make sure that your design uses color to make itself aesthetically pleasing, but doesn't rely on the color scheme for anything essential. Statistics show that perhaps 10% of the web users are at least partially color blind, so you need to consider these people when you design your site.

You can see things the way a color blind user would at www.vischeck.com. Make sure they can, at a minimum, still read your text.