The ideal number of colors for page elements?

What's a good number and how varied?

[lorax]

Fact: I'm no designer. ;)

I want to upgrade an existing website such that it has 4 CSS files (seasonal) that will control the color of visual HTML elements (fonts, headers, divs, tables, etc).

I've been thinking of color combinations to use like

white/blue/purple for winter
white/green/yellow for spring
white and I'm not sure what for summer
white/red/orange for fall

But as we all know, blue is not just blue. There's sapphire, navy, royal, etc.... So I can easily see a palette of different colors being used but began to wonder there might be a point of diminished returns. Certainly at some point the number of colors used must begin to make the website feel discordent. Is there a rule of thumb for numbers of colors or color combinations? How do those of you who are color experts approach color selections other than using a color wheel?

[korkus2000]

There are some rules when dealing with color theory, but how it relates to web design is just developing. We have to look at both graphic design and painting for color theory that will relate to what we do.

Color has many overtones and meanings that are different from culture to culture. Blue is an anomally, because it is a soothing color cross culturally. The sky and sea are blue and being human we are exposed to this color from birth. Other colors we are not (white, black and grays are nuetrals so we don't really give them any weight. They will blend with any color so how they effect colors is not important.)

So lets get back to the original question of how you choose colors. First you should understand how your audience is moved by a color shade. Different shades of blue, like you mentioned, mean different things. To Western cultures we have powder blue that we associate with baby boys, Some shades are "sky blue", and others have different meanings. (An aside to how we interpret color, scientist have also found that blue light projected on the human body is most condusive for sleeping, while red is the worst. Our skin can pick up on color without using our eyes.)

I noticed you chose different colors to associate with the seasons. Part of how we choose is based on how we associate a concept with color. You can ask why you chose white/green/yellow for spring. The shades should be complimentary which you will decide how they look.

I think if you understand how your audience will feel culturally about colors then you have to just "use the force" on picking the shades. A little research and a bit of intuition should be what is needed. Make sure you get a few oppinions to make sure your color choices are not to personal and can communicate the "concept".

This may sound a little too contrived, but color is important. If people would consider the little things the whole project will be stronger. We have had plenty of discussion on which copy converts, but few on which color converts. We have had a couple of threads here and people running banner campaigns and ecom sites have found some colors do convert better than others. Something to think about how color is a factor of your user.

[limbo]

Quality posting Korkus.

Lorax - this may sound very simple, but having a colour wheel handy is and excellent way to make comparisons between different colours. Some are very basic interpretations but there are colour wheels with three or more 'tiers' that lets you compare and contrast hue, tone, and shade. These are, in turn, comparable to hue, saturation and luminosity on screen.

Each colour has a Complimentary colour, that it's opposite colour on the colour wheel,

E.g. - yellow (warm) is opposite violet (cool), red (warm) is opposite green (cool) and blue (cool) is opposite orange (warm).

Two complimentary colours when mixed together form a greyed or Neutral colour (this only occurs on paper where colours remove not add light). When two complimentary colours are placed side by side they contrast with each other.

When you have chosen a colour palette –

Winter: white/blue/purple

you can further define you colours by creating a ‘highlight’, ‘body’, and ‘tint’ for each. So you might have:

#FFFFFF - White: Highlight (page background)
#CCCCC - Grey: Body
#000000 - Black: Tint (text)

Blues:
#00CCFF – Pale: Highlight
#0000FF – Royal: Body
#003399 – Navy: Tint

Purple:
#CCCCFF - Lavender: Highlight
#9933CC – Violet: Body
#660099 – Indigo: Tint

This would give a palette of 9 colours to choose from. Then I would pick a complimentary colour to the cool blue and purple and do the same. This you might use for a hover class for instance.

Then it’s a case of playing with you selection until you are happy with hierarchy. This will usually result in two or three colours being dropped from the list to help clarity of the page.

Ta

Limbo

[lorax]

Excellent responses, thanks.

I know of the emotive effect of colors - which is one of the reasons for posting this. I've never used a color wheel (is this something you'd find at an art store?) so I'm ignorant of it's usefulness. And as ignorant as I am about that it seems like it might be analagous to giving me Ferrari when I only know how to drive a Ford.

limbo - highlight/body/tint - would you apply these to an example for me? I'm thinking in terms of text, div backgrounds, borders, roll-overs, etc. Should I be thinking about this in a different way?

[tbear]

Try this out, Lorax, you might find it useful.

Colour harmonies and themes [easyrgb.com]

Oh, by the way, I found the link posted here sometime ago, naturally........ ;)

[limbo]

It's hard to give an example because a lot of this is intuitive.

When I have established the colour palette for a site I will then start to play with blocks of colour and text - checking for contrast between them. Usually done in fireworks or PS where I can create and tweak colours quickly. This will also give me the chance to check them as web safe and get the hexi ref. I do this at the same time I am 'sketching' page layout so I can get a feel for how legible the choices are and if they have a visible hierarchy.

Applied to an example I would use 'highlight' colours and white for <div>, <td> and page backgrounds. 'Tint' colours for text and borders. And 'body' colours form the basis of graphics, hr's, menubars, header backgrounds etc.

It is important to point out that this is not exact science by any means and should be interpreted and ordered by the brief you are working to.

I would recommend you do some reading on colour theory and adapt the ideas to suit your own needs. But as Korkus says the concepts for colour and the Internet are still being fleshed out, in particular it's effects on conversion.

While the web is predominantly static, Television and Film colour theory is probably not too applicable (the medium is akin to the web because of the additive value of light). Neither are many of those theories cantered on the print industry (subtractive values) - Perhaps static photography developed on slides gives us the closest comparison?

Working with luminescence and saturation on pages of static colour is probably at best a mixture of colour theory from TV and Print. There are dozens of excellent books out there - take a trip to the library and look up 'colour theory' within print and film sections (and hope they have a good search facility ;) )

Essentially we are in a grey area (no pun intended). I have only ever been able to find documentation for Web/colour usability that tested harsh colours against paler shades. The subtleties are still being explored.

Ta

Limbo

-------------

Added - most understand tint to be a paler shade of a hue - the same as highlight.

So the hierachy would be

Tint(highlight)
Body
Shade

Sorry, one of my quirks.

[lorax]

Thanks folks.

I've since discoverd a couple of little tools called Color Wheel Pro and Color Wheel Expert. I've dnloaded the demos and have found them to be very instructive - particularly CWP as it includes some of the more advanced techniques you mentioned like triadic and tetradic color combinations.

These only make me more dangerous though - I still have a lot to learn.

[henry0]

Just a little addition
I cannot remember where I have seen it
but web color are also associated with mood and nationality
for instance #ffffcc is not supposed to be very welcome in the US
but many use it, I do :)
I whish I had that link