Choosing An Effective Website Colour Combination

An aesthetically pleasing colour scheme can make or break your website. After all, in advertising, colour accounts for 60% of advertisement's acceptance or rejection. Therefore, colour plays a pivotal role in determining whether or not a potential customer will choose to conduct business with your firm. A web designer needs to ensure that all of your website’s colours work in harmony, while keeping the client’s identity consistent with other marketing efforts.

Quick Rules of Thumb

- Stick to 3 to 5 colours when planning a website

- When in doubt, use white for the background colour, and black for the text colour

Using Your Company’s Logo Colours

If your company already has a logo designed by a professional – great! This is the best starting point for choosing your website’s colour combination. You may choose to use the exact colours found in your logo, or even add some complimentary colours. But, it is important not to stray too far from your logo’s colour scheme in order to keep your company’s identity consistent.

Colour Defines Mood

The colours of your website are important because they can elicit different emotions from your visitors. Colours can make us happy, excited, angry or sad. Below is a list of colours along with the corresponding moods which they evoke:

Warm Colors
Red: aggressiveness, passion, strength, vitality
Pink: femininity, innocence, softness, health
Orange: fun, cheeriness, warm exuberance
Yellow: positive thinking, sunshine, cowardice

Cool Colors
Green: tranquility, health, freshness
Blue: authority, dignity, security, faithfulness
Purple: sophistication, spirituality, costliness, royalty, mystery

Neutral Colors
Brown: utility, earthiness, woodiness, subtle richness
White: purity, truthfulness, being contemporary and refined
Gray: somberness, authority, practicality, corporate mentality
Black: seriousness, distinctiveness, boldness, being classic

Choosing a Color Scheme

Once you understand the colours and their connotations, the next step is to choose a colour scheme for your website. Below is list of different types of colour combinations:

Monochromatic colour combinations use a single color. Variations in lightness of the selected colour can be used to create the sense of different colours. Monochromatic colors go well together, producing a soothing effect, and are very easy on the eyes. The drawback however, is that, it can be difficult to highlight the most important elements on your website.

Analogous color schemes use colours that are related, but not the identical, to create visually attractive combinations. Choosing this type of colour scheme is accomplished by picking colours that are close to each other on the colour wheel. For example, a selection of blues and purples, or reds and oranges would make a good analogous combination. One colour must be picked as the dominant colour while the others are used as accents.

Complementary (or contrasting) color schemes are comprised of 2 colours that are opposite each other on the color wheel. This combination is most appealing when a warm and a cool colour are used. For example, red with green or blue work well as contrasting colours. Using one colour for your background, and its complementary color to highlight key elements will give you colour dominance and colour contrast. One word of caution: it is difficult for the human eye to focus on contrasting colours at the same time. Therefore, it is best to avoid using strong contrasts for background and text colours.