HWG-News Tips Early April 2000

Effective Use of Color

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 8 April 2000 newsletter, for the following category:

Effective Use of Color

When designing web pages, the effective use of color can often make someone more likely to browse the site. Not surprisingly, a bad choice of color can be the quickest way to get someone to hit the back button. How do you get a clean, attractive, and expressive color scheme for a web page, that stands out from the crowd, but isn't garish or distracting?

This issue's winner!

Hi, I always try to match the color in some way, physically or psychologically, to the item that is on the web site, for instance 'pipestone pipes' the color that goes with the pipe, maroon-red and grey. A shopping site has a chocolate feel to it to make women feel comfortable, a housing company to the color of the house, etc. It works.

-- Submitted by Gloria Hazell <dragonfly_7@hotmail.com>

Other Tips for Effective Use of Color

I've found it useful to take my cue from other areas of design, for example interior design and fashion. There are always colours that are "hip" and "trendy", and these can generally be used for the web as well. More important than the colours you choose, however, is to keep white as your primary base. It gives your page a nice, clean look every time. Check out "Color Harmony" a book on colour schemes. It comes with free software called a "Palette Picker" that will give you endless colour schemes, as well as the emotions, moods, messages, these colours will invoke.

-- Submitted by Nancy Macedo <nancy_macedo@hotmail.com>

Less is more. Don't make excessive use of different colors. Instead, try lowering your choice to as little colors as possible. Too many different colors will make your page look 'childish'.

Try not to use unusual colours on the background if your page holds lots of information. If your page is packed with information your visitors are likely to be willing to print the page. Not all browsers are capable of filtering the background for printer output. If you use a dark background and light colours, make a printable version (black letters on white background) available for the most important pages!

-- Submitted by Florian Kunze <Florian@BlueSky.org>

I have developed a JavaScript Browser Safe Color evaluation tool that allows one to quickly evaluate text and background color combinations. URL: http://earthonly.com/trpa/browser_safe.php3

-- Submitted by Tom Powell <tompow@n2.net>

The colors you choose for a web design should depend largely on the topic of the site after factoring colors you must use to compliment a client's existing logos and colors. For example if the site is about money, you might consider greens and golds to carry through the site theme. A balance of color, contrasting but complimentary colors and theme appropriate are all keys to effective color design.

-- Submitted by <katsuey@katsuey.com>

I like to use various shades of one color or complimentary colors (like blues and purples). If you use the colors on various objects and side backgrounds and use white for the main part of the page, you can also use colors for text instead of black or white. In my opinion, effective use of various shades of a dominant color can make for a very attractive color scheme. Additionally, if you apply textures, filters, or other special effects to the colors, they won't be flat and boring.

-- Submitted by Bill Gentry <wsgentry@worldnet.att.net>

Use striking colors as lines or a dot or something that will attract attention but not on text and background. Uniform color scheme should be practiced. Use different contrast of colors for the text and the background unless it is a design. The colors used should match the overall theme of the site(for corporate site usually the company color is used). And be imaginative.

-- Submitted by Robert Dela Cruz <bobby@asiadata.com>

One of the things I do is browse many sites. I decide whether I like the site and why or why not. I jot down some notes about what I like or don't like. I also have "user" friends navigate the same sites and take notes (just a quick "how do I like this site" visit, since the initial seconds are what determines whether people stay or leave or even ever come back). Often, if the background is black and the text is blueish or green, it is hard to read. Too many fancy doo-dads also annoy me. The site must be clean. There are also many books available on color and are helpful when designing a site. What colors have a calming effect? Which ones are warm and inviting? Basically, know some psychology when building a web site.

-- Submitted by Hoh, John (MED, GE-Marquette) <John.Hoh@amermsx.med.ge.com>

Black text on a white ground is the easiest to read. Set background, text and links in contrast (most users expect links to be blue). Match the background to the tone of any background image to aid anti-aliasing. The commonest form of colour blindness is red/green so make sure you have strong contrast in the blue element and in overall brightness.

Check in all available colour depths, greyscale, monochrome and a cheap LCD screen. Check usability with your grandparents.

-- Submitted by Derek Moody <derek.moody@clara.net>

I find the best use of colour is to look at complimentary colours, they can provide a very useful tool to producing colours that can blend with each other and be able to work together to produce a harmonious site. I have carried out a research study into this area for my degree and have put together a section on my site that shows the colours available, both in tone and tint combinations. Emphasis is on using safe colours. There is also a section on the site which allows the visitor to interact with the different screen colours and see how they affect each other. The site is still under construction, but should be completed by the end of April. www.manchula.com

-- Submitted by M Foulkes <manch@manchula.freeserve.co.uk>

Effective use of color is not a new problem unique to web sites; graphic designers, photographers, and others working in print media have grappled with it for years. My tip: Learn from those who have gone before. Many excellent books and other resources are available on this and other fundamentals of design -- use them! Familiarize yourself with subjects like color wheels and the emotional responses evoked by different color combinations and you'll have some powerful tools at your disposal.

-- Submitted by Tracey [Baker] Wagner <tab@pobox.com>

I have found that the best looking color combinations, that are catchy and flashy usually sort of just "happen". When starting with a blank page, I usually go surfing to some of the "weekly winner" sites, just to get creative juices flowing.. then when I have the concept, I just start playing w/ different combinations, variations, and textures. Transparency is another big helper too.

-- Submitted by Shelly Timmerman <webmaster@dzineworkz.com>

First, unless the company behind the site is selling/providing a product or service that is "flashy" and "explosive" (games, for example) by nature, I try to stay away from "loud", or bright colors; picking 3-4 colors from the 16 safe browsing colors category. The colors I settle on should attempt to "convey the mood, attitude and the product and/or service" the company behind the site is trying to sell. For example, at one pizza store site, I used a tomato color for the main page's left navigation bar. I used black for its top navigation bar, because I felt the black background brought attention to a navigation scheme that was important but secondary to the site's intent. I stick to plain white backgrounds with black legible font text (such as Arial, Helvetica, Times New Roman, or even Verdana -- all of which are very commonly installed fonts across a wide platform of computers) for the written content. I try to use black text, in the same font size and family for the actual links, with wording that implies that "this is a link", at which point the text "evolves" on a mouseover event.

Bottom-line: I try to keep things as simple and easy to use as possible. I rely more on textual and color-shading effects as opposed to graphics wherever possible. And I always ask for the user's input about any aspect of the site.

-- Submitted by Ray Ban <macrospot@earthlink.net>

Consider the following when choosing color schemes: Design in black and white, adding color for emphasis. Color should never be the only visual cue for anything. Distinguish between features that a user *must * be able to see in order to use the web page and those that would be *nice* to see. Test whether color contrast is sufficient to be read by people with color blindness or by those with low-resolution monitors, print pages on a black and white printer. Avoid red-green, green-yellow, and blue-yellow combinations when possible. Use the 216 common browser-safe colors to ensure cross-platform consistency.

-- Submitted by Glenda Watson Hyatt <Glenda@eaglecom.bc.ca>