Color Psychology for webpages


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 PCs 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 readers 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.





About The Author

Written by staff at infoweb.co.nz. Infoweb is the place to go for information on musical instruments and creating websites. Take a look at infowebs reprintable section http://www.infoweb.co.nz/243.html. You can reprint this article free on your site as long as the above credit is not edited and the web addresses are work.



To provide some examples of web design and development I give you here:

10 latest blog posts by Web Developer Jim Westergren

I’m an SEO and I have been working a lot with WordPress, here I give you all my tips for you to rank very well in Google with your blog. UPDATE: Check this blog post for a better guide. Quick Facts There are 55 million blogs out there, if you don’t stand out you will have no chance. The [...]

Update, March 9th I have now changed it again and put some color into it. What do you guys think? Sunday today and I was away from work with clients so I decided to work with my blog today from home. I made a new design for this site. Check out the navigation links at the top left [...]

This article is written for my friend “honey” (site). I have been bidding against honey on web site auctions for almost 2 years now. I have won maybe 60 auctions and I have now over 100 web sites. Honey owns over 300 … So here comes my checklist that I want to show honey as I [...]

Have you also heard of those horror stories of Google banning Adsense accounts for the smallest mistakes? You have read the Terms and Conditions and you know the basics but what do you do when you show your friend your site on your computer and the first thing he does is to click the Adsense ad [...]

This article is written more for myself so I remember how I do it the next time but probably a few people will also benefit from this for different uses and purposes. Today I updated all the PR values for the directories listed on my directory list. I had to update each listing in the MySQL [...]

Official site of a children’s hospital in Japan Hey, your “logo” is not blinking! MSY Technology Pty. Ltd. Are you sure product X is HOT? Personal site of Franz Magnus Incredible that you got several awards for that site. Angren.net, electronic shop Can’t you squeeze in something more on the home page? Official site of Northbridge Police Department Still being updated in 2006. Perhaps [...]

The last days I have been fighting in the war against the latest spam bot soldiers like a maniac. I own and manage over 70 web sites. This includes different forums, directories, blogs, topsites, article submission sites and you name it. Very recently there is a new wave of spam. The default captcha for vBulletin is now [...]

This is a WordPress plugin that will give you more links and higher rankings in the search engines. Most bloggers knows the importance of getting links in order to get high rankings in search engines. But did you know that the best links are those that are natural recommendations? Additionally I experienced better rankings across all [...]

To improve the navigation of your users as well as search engine traffic and ranking to your WordPress blog I suggest making a good site map of your posts - a map of your site. A kind of user friendly archive of your posts. This is not “Google sitemap”! The benefits: The user can quickly find a [...]

How I rank on different keywords and links to the different SE queries.

home | site map

Articles



Mortgage Loans | Secured Loans | Consolidation Loan | Mortgages | Personal Finance