Website Colours

[Jim]

This is to help you pick the right colours for your website. Studies show that it matters what colours you use.


[quote]Color plays a pivotal role in a website\'s impact, and as such must be
carefully considered. This is especially crucial when the site in
question is used for business/professional purposes.

Before delving into the specifics of color selection for professional
sites, here are a few general rules for color usage in websites:

- Don\'t use yellow for web page backgrounds - it causes eyestrain

- Avoid black backgrounds - these essentially limit text color choice
to white and yellow, which can look garish and hard on the eyes
against black

- If in doubt, use black text on white background - while not very
original, this color combination ensures optimal readability. In any
case, choose a text color that constrasts with your background; this
is usually best achieved with dark text on a light background.

- Choose from the 216 "browser-safe" colors, codes for which can be found at
< [url="http://www.wordnet.net/imc/palette.htm"]http://www.wordnet.net/imc/palette.htm[/url] >. If you stray outside these
standard colors, your website colors may be distorted on some users\'
systems.

With that quick primer behind us, let\'s talk business websites.

To lend a professional, organic appearance to your website, your best
bet is to choose a simple palette of a few matching colors. Advanced
Media Productions suggests limiting yourself to three colors, and
using these colors strategically to group related objects or indicate
relationships between objects or segments of the page
(http://www.boston-website-design.com/we ... ategy.html). The
BuildStar Business Builder\'s Network
(http://www.ibuildstar.com/colors.htm) has a similar philosophy,
urging the business website designer to "create an identity through
all your marketing and products with one or two colors you use over
and over. This is a very basic and effective way to tie all your stuff
together in the minds of customers."

If you\'re not good at color coordinating, it\'s a good idea to consult
a color wheel such as that found at < [url="http://www.visibone.com/colorlab"]http://www.visibone.com/colorlab[/url]
>. Complementary colors (that is, those found directly across from
each other on the color wheel - e.g. red and green) are safe choices,
as are neighboring shades. Which of these you choose, however, depends
on what mood you choose to evoke - the contrast of complementary
colors like orange and blue suggests excitement, while neighboring
colors like green and blue suggest unity and harmony.

According to one website, using different shades of the same color,
called the monolithic approach, is the superior choice for
professional website color schemes. The writer asserts that "single
colors or Monoliths work best for business sites because of their more
subtle suggestion," but cautions that this approach can be boring if
overdone and may require "adding a contrasting black [to make] the
color combo monochromatic and more interesting."
(http://createafreewebsite.net/website_w ... olors.html).

But how do you choose the best starting color to work from? An
important consideration in choosing the foundation color for your
website is the emotional association it typically carries. While these
associations can vary somewhat from culture to culture, they generally
hold true for the majority of people. Here\'s a quick snapshot:

Red: Daring, persuasive. Also hard on the eyes. Red is especially
effective in highlighting key text on black and white sites, and also
works to liven up browns and tans.

Blue: Suggests quality, trustworthiness, success, seriousness,
calmness. A common choice for sales pages. In "What is the color of
your website?", Andrew Lapointe suggests highlighting phrases like
"Our history" or "Our mission statement" in blue
(http://www.dotfactor.com/artman/publish ... g_31.shtml). Lapointe
also suggests avoiding purple, which connotes uncertainty and
ambiguity, and only using yellow to highlight key words and phrases.

Pam Renovato, in "The Psychology of Color and Internet Marketing"
(http://www.webmasterstop.com/articles/c ... lors.shtml),
has some interesting comments on the use of grays and browns:

"They suggest weight, or something heavy. This would provide your
visitors with a feeling of stableness and strength. Emotions like this
will help your visitors to associate your site with solidity and
confidence. Other colors such as burgundy, oyster, beige, blues will
also provide a feeling of solidity."

Another important factor is the age of the target audience. Neutral
tones work best with sites designed for an older audience, the target
demographic for many business websites. You\'ll obviously also want to
select shades appropriate to your business, if any - as Ralph Hilliard
points out in "How to choose your web site colors"
(http://www.prowebsitemanagement.com/art ... olors.html), a
web designer who creates a black and green website for the Red Cross
will be out of business quickly. Hillard further stresses the
importance of color selection in marketing:

"The BEST color for selling is the color that captures your primary
audience emotionally," he posits. "If my audience is new mothers and
I\'m selling baby clothes, I guarantee you I can sell more clothes with
soft pinks, blues and purples than I could using bright reds, greens
or black."

When it comes down to it, choosing a professional website color scheme
is as simple as the common sense guideline provided at the 1stsitefree
Design tutorial (http://www.1stsitefree.com/design_colors.htm): "Use
colors that compliment your subject matter and are relatively pleasing
to the eye."
It seems, then, that classic, rich, conservative, "serious" colors
like blues, browns, burgundies and grays are your best bets for
business websites.

On a final note, however, there\'s always an exception that breaks all
the rules; according to "Website Colors That Sell" at the BuildStar
Business Builder\'s Network (http://www.ibuildstar.com/colors.htm),
"one study showed that the color combination with the most powerful
psychological effect was yellow title, white text, on a dark blue
background."

Here\'s a final link for you:

Cobalt Multimedia - Choosing colors for your website
< [url="http://www.cobaltsystems.com/advice/colortips.html"]http://www.cobaltsystems.com/advice/colortips.html[/url] >

I used the following search combinations:

best colors websites
best color scheme professional website
website color scheme study
best website color scheme
website color recommendations
color science studies[/quote]

Source: [url="http://answers.google.com/answers/threadview?id=290239"]http://answers.google.com/answers/threadview?id=290239[/url]


[quote]When discussing the design of a new site, the question of selecting the most effective colors consistently arises. The choice of the right color palette for a site is essential to communicate message, brand your product or service, and if you are in online ecommerce - selling your products. Everyone has favorite colors and the meaning of colors varies from culture to culture. Color communicates far more than most people realize, and the use of the wrong colors can be a disaster.
Before selecting colors we ask the following questions:

Who are the potential visitors to your site?
What are your products or services?
What are key objectives of your site?
Potential visitors to your site could come from just the North America, or they you could be from a global or regional market. Did you know that the color white is the mourning in China, while purple is the color of death in many Catholic countries? Yellow is an Imperial color in Chinese countries while in America it can symbolize cowardliness or urine. Shifting colors can completely change their impact. For example yellow shifted toward red results in a color that indicates gold and value.
Your visitor demographics also can make a difference. Young people are more motivated by saturated colors than adults, who are often put off by them. Strong color contrasts can also drive older audiences away. While young people often respond positively to new color trends, these fashionable colors are often overused and go out of style as quickly as they appear. Readability can also be an issue for people who have visual impairments and older visitors to your site. The colors used for text and backgrounds have a significant effect on their readability. The following is a list of colors with their meanings:

Red: passion, romance, fire, violence, aggression. Red means stop or signals warning or forbidden actions in many cultures.
Purple: creativity, mystery, (reddish purple) royalty, mysticism, rarity. Purple is associated with death in Catholic cultures as mentioned above.
Blue: loyalty, security, conservatism, tranquility, coldness, sadness. Light blues create a feeling of openness, clear air, and freshness, while dark blues can convey tradition, trust and solidity.
Green: nature, fertility, growth, envy. In North American cultures, green means go, is associated with environmental awareness, and is often linked to fiscal matters. A lighter, somewhat desaturated green is the color of money and indicates wealth or value.
Yellow: brightness, illumination, illness, cowardice. Some yellows can symbolize the precious metal, gold and are universally valued.
Black: power, sophistication, contemporary style, death, morbidity, evil, night.
White: purity, innocence, cleanliness, truth, peace, coldness, sterility. As mentioned above, white is also the color of death in Chinese culture.
Many websites clearly show the negative effect of bad color choice. Oftentimes people choose colors to \'dress-up\' their site without regard to the objectives of their site. Here are a couple of common mistakes made in selecting website colors:
Colors are selected that conflict with your brand, service or products.
If you have a well-known brand like Coke you can use bold colors like \'Coca-Cola red\' as much as you want without concern. Very few companies are in this unique situation where the brand name is more powerful than color, but less well know businesses need to carefully consider the colors they use for their logos and in their website. Certain colors work well with specific types of businesses. For example reds, yellows, and oranges -what we call a \'fiesta palette\' can work well for food sites and restaurants that offer spicy fare, while creams, whites and dark browns work better for a site selling chocolate products. Colors in the warm range can also be effective in selling products associated with sun, passion or sensuality. Cool colors, such as blues and greens work well with outdoor products, airlines, intellectual materials, medical services, law firms and others where trust and a more laid-back website is desired. As one person has noted, "On the other hand, the color blue has a relaxing effect on the nervous system, and some studies have shown that it increases productivity when used as a background color. However, don\'t use blue in your color scheme if your product is food-related, as blue is a natural appetite suppressant."

The use of saturated background colors can fight with website content and can make your site a mess.
If you are using product pictures or headlines with important messages on your site saturated backgrounds will \'pop\' over your content and make it difficult for the website viewer to easily navigate your site and your pictures will loose effectiveness. Product pictures and key messages should always be more highly saturated than your background colors or less they will be lost. Whatever graphics or areas of your site that have the most saturated colors will attract the visitor eye first. Here\'s an example:



On the left you can see a product name and picture on saturated backgrounds. Next to it is an example with lighter, less saturated color backgrounds. As can be seen, the less saturated colors on the right compliment and \'sell\' the product name and picture more effectively.



Above is another example that shows colors reduced by 10% saturation each step. You can see that colors move from garish to modulated to dingy as they progress from left to right. The 4th through 7th colors in each row are considered good choices.



Above is an example showing the impact of lightening saturated and desaturated colors. The saturated colors on the left retain their \'pop\' even when lightened, while desaturated colors move into the background and are even more muted as they are lightened.



The example above shows how back and white text appears on saturated versus desaturated colors. White jumps and has more pop on saturated while black text is more readable on desaturated. The white text on the desaturated \'shouts\' less as well. Note that the product picture appears more intense on the saturated color, while the blue box looks less blue on the saturated color box. The picture and the blue box are the same color on both sides. The desaturated example is more effective.

Using too many colors.
Color harmony is the most important thing to consider in selecting colors. Make sure that a moderate number of colors have been selected - no more than 4 or 5 plus black and white are enough. Too many colors create discord and distract the user.[/quote]

Source: [url="http://www.pallasweb.com/color.html"]http://www.pallasweb.com/color.html[/url]

[to@ds]

Some great info here. I love learning about stuff like this. Ive done some reasearch myself into stuff like this while I was still at college, we had a whole assignment on just web safe colours and colour schemes that are safe to use. My Web Design lecturer made a site just for his students with more helpfull info on it, I'll see if I can remember the address, because he used no meta tags so it cant be found on a search engine, it was just for us students.