Colourful butterfly painting

There is more to consider when choosing colours for a website than just picking colours that appeal to you. Colour plays a greater part in website design than one might initially think. Aside from adding to the general attractiveness of the overall look, the site's effectiveness as a sales tool can be affected simply by changing the chromatic palette.

The choices you make can affect the message you're trying to communicate, and can strengthen brand awareness. Colour can also greatly affect the usability of your site... the choice of background colour vs. text colour can make a big difference in how easily the viewer is able to view and read the information on your site.

A key goal in marketing is to evoke emotion in your audience. By choosing your site colours with care and consideration, you can intentionally evoke an emotional response that will increase sales.

We'll explore some of the issues that must be taken into consideration when designing a website.

Contrast is required between background and text.

If the text doesn't stand out clearly from the background, viewers will lose patience with the forced eye strain and head somewhere else... most likely to your competitor's site. Don't try to reinvent the wheel... stick with what works. Black text on white background is always a safe choice, as well as dark grey or navy on a light background. As long as your background and text choices are easy on the eyes and clear even at a squint, you should be okay.

Consider your company's branding.

If you already have an established brand or logo, then it's important to work within the existing colours of the brand. All marketing materials - website, business cards, brochures, etc. - must be consistent in appearance. Keep in mind that if your logo is a strong dominant colour like bright orange, small touches of orange within the design are most likely enough, while allowing softer complimentary colours like white, black, or maybe light grey to hold the majority of real estate on your site. Go easy on the viewer's eyes. Bright colours should be used in moderation.

Choose a browser-safe palette.

There are 256 colours that fit within the parameters of a browser-safe palette. This means that as long as you stay choose any of these colours, the results will be consistent and predictable across any Windows, MacOS, and UNIX platforms. Most computers today can render thousands of different colours, but usability must always be kept in mind for those using 8-bit computer systems.

It's also important to use the right combination of colours for the best visual results. Limiting the colour palette to only two or three different colours is always most effective. There are multiple variations of shades available to consider. Fewer colours on the site and within the colour palette of graphics create smaller files and faster download times.

Colours have different meanings for different nations.

If your web audience includes people from different countries and cultures, it's worth investing some time researching the meaning of different colours with regards to that nation. Certain colours can have different meanings in different cultures. While white is considered a symbol of purity in western culture, it is considered to be a symbol of bad luck and unhappiness in many Asian countries. Yellow is considered to be a symbol of hope and happiness in most European and North American countries, while it is a symbol of mourning in some African countries. Certain colour combinations can evoke different feelings and emotions as well. It's up to you to consider your audience and decide what works best.

Consider the psychology of colour.

Colours can have both positive and negative associations. Here are a list of common colours and their most common meanings:

  •    Red:
    Positive: action, power, love, energy, passion, strength
    Negative: anger, danger, aggression

  •    Blue:
    Positive: coolness, loyalty, peace, trustworthiness, security
    Negative: fear, coldness, depression, sadness

  •    Green:
    Positive: life, health, prosperity, wealth, fertility, nature, freshness
    Negative: envy, greed, jealousy, toxicity

  •    Yellow:
    Positive: cheerfulness, optimism, light, joy, warmth
    Negative: caution, warning

  •    Purple:
    Positive: wisdom, royalty, sophistication, celebration
    Negative: bruised, foreboding

  •    Orange:
    Positive: friendliness, excitement, energy, playfulness, approachability, creativity
    Negative: ignorance, distrust

  •    White:
    Positive: purity, peace, freshness, youth, cleanliness
    Negative: coldness, winter, distance, blindness

  •    Black:
    Positive: dramatic, serious, mystery, sophisticated, stylish, power, secrecy
    Negative: evil, death

  •    Pink:
    Positive: innocence, healthiness, purity, love
    Negative: immaturity, lack of willpower

  •    Grey:
    Positive: security, maturity, reliability
    Negative: decay, sadness, boredom

  •    Brown:
    Positive: earth, home, comfort, endurance, outdoors, stability
    Negative: uncleanliness, laziness, repression

Colour is the first thing we notice and the last thing we remember, so be aware of the impact that it can have. When in doubt, let your web designer steer you in the right direction. Knowing how to combine the best colours in the most pleasing and effective ways will yield the best results. The best rule of thumb? Keep it simple!