Color Psychology for webpages

by: Bud Smith

Colour is an aspect of a website that is often picked haphazardly and without any thought from a beginner web designer. The lesser known quality of the colour of a website is that it can greatly affect the mood of your visitors. It is because of this that a websites colours need to be picked carefully.

Other than the mood of the site, the colour can affect your visitors in the more known ways:

Too many bright colours may miss direct the user attention.

Too much of one colour many become irritating.

But the first point about colour that is not well known is that colour is extremely symbolic. Just think, how often have your heard the phrases that someone is "green with envy", "blue" or can “see red." These symbolic influences come from when we are growing up. Name something Green, people say trees, name something blue, people say water. We have come to associate colours with where each colour is predominantly found. We can also summarise the traits for each colour.

Warm Colours

Red

Symbolises: Passion, fire, love, lust, war, violence, blood, and aggression

Suitable Uses: Where the aim is to motivate an individual to take action, convey a warning, or stop the user.

Some believe that: It stimulates the appetite and makes objects seem closer and larger.

When using different shades of red on a website, be careful. Because of the way the eye sees red, pink (which is a light shade of red) does not go with red. Also bright red can be quite irritating if used over large areas.

Pink

Symbolises: Romantic, calming, cute, candy, soft and feminine

Suitable Uses: When you want to appeal to a users caring or romantic side.

Orange

Symbolises: Vibrant and warm, orange is associated with autumn, pumpkins, citrus and Halloween. It is like a less passionate red.

Suitable Uses: Could be used for food sites, nature sites.

Some believe that: It can convey warmth, assurance, stimulate the appetite, symbolise health, stimulates the mind and provides emotional lift. Also it is believed that it requires the eye to focus, therefore objects seem closer and larger.

Orange is one colour that would be good in moderation, avoid over-use.

Yellow

Symbolises: sunshine, caution, construction, happy, cheerful, warmth, hope, light, energy, weakness or illness, or symbolize cowardice.

Suitable Uses: To make a webpage seem brighter and more spring like.

Some believe that: It stimulates the nervous system as well as the mind, makes objects seem closer and larger.

Like red, it captivates the eye, but can be an irritant if over-used.

Cool Colours

Green

Symbolises: spring, renewal, fertility, jealousy, inexperience, health, growth (vegetation) and wealth (money).

Suitable Uses: Great for websites about money and growing.

Some believe that: It lowers the blood pressure, relaxes the nervous system, calms the mind and creates a feeling of freshness. Also does not require the eye to focus, therefore objects and walls seem farther away.

Blue

Symbolises: sky, sea, intelligence, reassurance, and trust but can also signify depression and sadness.

Suitable Uses: Make a website feel formal.

Some believe that: It does not require the eye to focus, therefore objects and walls seem farther away.

Purple

Symbolises: creativity, spiritual and mysterious.

Some believe that: is spiritual, mysterious and a very subduing colour.

Deep purple is associated with royalty and richness while lavender is associated with romance and nostalgia.

Neutral Colours

Black

Symbolises: power, elegance, and sophistication, death (Western culture), evil, anger and sadness.

Just to be on the safe side, do not use over a wide area.

White

Symbolises: cleanliness, purity, and spirituality. It represents life and marriage in Western cultures, but it represents death in Eastern cultures.

Great as an accent or background colour because it makes other colours seem more vivid and bold

Grey

Symbolises: conservativeness, security, maturity and reliability, but it can also signify gloominess and sadness.

Brown

Symbolises: readability and stability, the hearth, home and the earth.

Web safe palettes

Although modern computers are capable of displaying millions of colours on the screen, Web design is limited to only 216 colours. The reason for this is that Mac computers and PC's both use completely different colour palettes. However, they have 216 colours that are common to both. These 216 colours are considered “Web safe". Using the 216 Web safe colours means that your Web site colours will look fairly consistent on different computers (Mac or PC), different operating systems (Windows or Mac), as well as different browsers (Internet Explorer and Firefox, to name two).

Tips and Ideas

Use a single colour for your website design, but change the intensity of it to create other colours but to keep unity.

Try 2 pick 2 colours that are related, but not to similar.

Create contrasting colour designs with contrasting colours, like a warm and cool colour mix.

Try a colour that is getting close to white, and a dark colour.

Use white backgrounds with black text for ease of readability and when in doubt use red to draw the eye to your subject matter. Use caution when using any colours text. You want your content to be readable and easy on the reader's eyes.

Keep your audience in mind

There is no one colour that sells better, but the wrong colours can hurt sales.

Limit your colour palette to no more than three colours to reduce visual clutter.

Use colours that are appropriate to the theme of your web site.

Use colours found in key photos or graphics on your web page for added harmony.

Avoid harsh oversaturated colours. De-saturate colours to approximate colours found in nature and textiles.

Improving colour picking skills

The great fine artists are masters at manipulating the emotions through colour. Many of the principles they employ can be applied to web design. Learn how to choose colours to set the right mood in your web design from colour principles and methods in fine art.