Using Color On Your Site

Choosing colors is probably the most important design decision you will make about your site; color and the way it is used plays a major role in giving a site a unique identity. While choosing color is a very personal thing and your choice is your own, there are a few guidelines worth considering and which are especially helpful if you do not feel very expert in the use of color.

What Colors Say

Our experience of color gives certain combinations different and powerful connotations. Most people are instinctively aware of the powerful effect that color can have on the 'mood' of a site: reds can communicate warmth but certain reds with black may suggest aggression or danger, greens and blues are generally considered to be cool colors though deep greens or blues in combination with yellow/gold can imply richness and exclusivity and dull blues, greens and yellows suggest nature; pastels can give a very light, airy feel.

Creating Color Schemes

Color schemes can be usefully broken down into a number of categories, deciding which one your site will use gives you a head start in getting to the point of picking the actual shades and hues you will use.

• Key Color Schemes:  Use mainly black and white with a third color for emphasis or contrast. This is easy to do well, can be very striking and effective and looks professional.
• Monochromatic Schemes: These use various shades of a single color. They can look very classy or very dull depending on how well the shades are chosen and used.
• Complimentary Color Schemes:  Use combinations of color from opposite sides of the color wheel. Perhaps the most commonly used examples are blue with yellow or red with green. These can be striking and distinctive if done well or garish and unpleasant if the shades are not carefully chosen.
• Adjacent Color Schemes:  Use adjacent colors on the color wheel, eg green with yellow or purple with blue. Tend to be very subtle and can be an excellent choice for creating 'moods'.
• Color Coding Schemes:  The use of different colors to indicate location in the site. This is best done with by using a basic and consistent scheme and varying one emphasis color.

In general it is best to restrict the use of colors to no more than three with perhaps additional colors introduced the form of different shades of these.  An exception is where a riot of colors is a design feature with the proviso this is a difficult thing to do really well and if not done to a high standard can look a mess.

Color and Readability

In most cases areas intended for reading look best with a white background and black text.  Dull perhaps but true, especially where there is a large amount of text content. If other combinations are used there are few very important points to note:

• A lot of people are color blind - be conscious of this when choosing background and text combinations or your page may appear blank to them!
• Avoid putting text on any but the most subtle background image; it can be hell to read.
• White text on a black background is very hard on the eye. If you do want this sort of effect try using a dark grey background and/or tan or pastel colored text.

Color on the Web

It is well nigh impossible to reproduce on the screen colors as seen in print media with absolute precision. This is because one is a mix of inks and the other is not and so will never appear identical. The technical reasons are a story for another day but accepting that a close approximation is as good as it gets and not striving in vain for a perfect reproduction of print material will save a lot of angst.

Web Safe Colors

Some older computers can only display 256 colors, though these now comprise an increasingly small percentage of internet users.  If an unavailable color is specified these computers will replace it with the nearest equivalent. While it is not necessary to stick to those colors rigidly, since most users now have many more at their disposal, it is a good idea to check your pages using a reduced palette to ensure at least that they do not become unreadable on older computers. You can do this in Windows by choosing:  Start > Control Panel > Display > Settings and changing your color settings.

About the Author

Katherine Nolan is an associate editor for OutFront.net .

Additional Website Color Resources

Color Logic for Website Design: (by Jill Morton) This book provides a solid foundation in color usage in web site design, saving time, trouble and rework.  Enjoy new design potential through the informed use of color in web design.

For more information on the topic of this article use our Google-powered search engine:

Subscribe to our newsletter:

Your Email address:

Privacy Policy: Your e-mail address will never be sold, rented or given away to anybody. You can unsubscribe at any time.