Effec­tive use of colour in web­site design is of cru­cial impor­tance. A well thought-out and imple­ment­ed scheme affects user expe­ri­ence pos­i­tive­ly and increas­es engage­ment, while poor­ly-cho­sen colour palettes have the oppo­site effect. In the fol­low­ing arti­cle, you will learn the best prac­tices for effec­tive use of colour in web­site design.

Colours and emotions

Colours evoke emo­tions, and a suc­cess­ful­ly designed web­site trig­gers sen­sa­tions with­in its vis­i­tors. Humans asso­ciate spe­cif­ic emo­tions with spe­cif­ic colours, regard­less of their cul­tur­al background.

Here is a short list of ref­er­ences for the emo­tion­al “weight” of colours:

• Red – rep­re­sents love, pas­sion, dan­ger, anger, warning
  When we see red, we know that the con­veyed mes­sage is very impor­tant! This is one of the main rea­sons we put warn­ing signs and colour-spe­cif­ic lines in text in red, to accen­tu­ate their importance.
• Blue – rep­re­sents calm­ness, sad­ness, peace
  This colour is relat­ed to the feel­ings of relax­ation and peace­ful­ness, some­times even melan­choly or sad­ness. Blue is a mel­low, calm­ing colour.
• Green – repre­sents life, fresh­ness, growth
  Even in the busi­ness world, green rep­re­sents a pos­i­tive devel­op­ment in var­i­ous rev­enue reports, while red marks the opposite.
• Black – rep­re­sents dark, mys­tery, secrets, fear
  A dark palette may strike fear in peo­ple or evoke the sen­sa­tion of mystery.
• White – repre­sents puri­ty, health, innocence
  White is one of the most pop­u­lar colours for all types of web­sites, since it aligns very well with all colour palettes.

Unlike the under­stand­ing of spo­ken or writ­ten lan­guage, colour inter­pre­ta­tion is uni­ver­sal. Colours affect the major­i­ty of peo­ple in the same way, con­vey­ing the same emo­tions. For this rea­son web design­ers need to pay spe­cial atten­tion to the use of colour in web­site design.

How to pick your colour palette

Some colours have over­all pos­i­tive and some neg­a­tive con­no­ta­tions. How­ev­er, it does not mean you should only pick warm, emo­tion­al colours to evoke pos­i­tive feelings.

Next to the uni­fied inter­pre­ta­tion of colours, humans also share spe­cif­ic sets of habits. These habits trans­late into expec­ta­tions. For exam­ple, when enter­ing a kinder­garten we expect to see a wide range of warm colours. When enter­ing an office build­ing, we expect neu­tral tones that will under­line the pro­fes­sion­al nature of the object. The same expec­ta­tions are true for the use of colour in web­site design.

For exam­ple, a web­site that pro­motes yacht char­ter ser­vices will, nat­u­ral­ly, set a blue colour to be its dom­i­nant. On the oth­er hand, a web­site focused on gar­den­ing will use green. A land­ing page for Valen­tine’s gifts will always sport red colours, and a den­tist’s web­site will use white as its pri­ma­ry. Red cer­tain­ly would not have a pos­i­tive effect in the last example.

Company and brand identity

Colours are a cru­cial part of brand­ing, and there­fore very impor­tant for the com­pa­ny’s iden­ti­ty on the Inter­net. We have pre­vi­ous­ly men­tioned how colours affect peo­ple’s emo­tion­al state, and now we need to relate the pos­i­tive effects of colours on our brand.

It is essen­tial for a web­site design to have a spe­cif­ic com­pa­ny image, a brand iden­ti­ty that is eas­i­ly rec­og­niz­able by the tar­get audi­ence. Nat­u­ral­ly, the web­site needs to reflect the same com­pa­ny and brand iden­ti­ty ele­ments that have been estab­lished for off-line use. Logos, the colour palette, the font, need to be in sync with the brand identity.

The rule of 60–30-10

One of the design rules that has been car­ried over to the world of web­site design is the so-called Rule of 60–30-10. The rule defines the ratio between the dom­i­nant, sec­ondary and accent colours. It has proven to be quite effec­tive in inte­ri­or room design and has been even­tu­al­ly adopt­ed by web­site design­ers across the world.

In web design, 60% is the pri­ma­ry col­or of the over­all space – this is the neg­a­tive space (back­ground). 30% is the sec­ondary colour and 10% is the accent colour used to make sure the most impor­tant sec­tions, such as your pri­ma­ry Call to Action but­ton and impor­tant links, draw atten­tion and increase chances of vis­i­tors click­ing on them.

If you already have your pre­dom­i­nant colour select­ed, you can use one of the many colour scheme gen­er­a­tors, such as Adobe’s Colour Wheel, to help you define com­ple­men­tary colours. It’s up to you to decide whether you will use only three or per­haps even four or five colours to design your website.

pur­plenote: Do not get car­ried away with the num­ber of colours! Research has shown that the major­i­ty of vis­i­tors pre­fer sim­pler colour schemes with up to a max­i­mum of three pri­ma­ry colours.

Creating a Greyscale Layout

Many design­ers resort to cre­at­ing a grayscale lay­out before they start work­ing with colours. This enables them to per­ceive the web­site in its form, and assess ele­ments through­out the page. Once they have made the grayscale design, they can play around with dif­fer­ent colour palettes and test what fits best to the web­site they’re work­ing on.

Applying the colour scheme to your website

After you have defined your pri­ma­ry and sec­ondary colours, you need to prac­ti­cal­ly apply them to your web­site. The pri­ma­ry colour that you use for your logo should become your brand colour through­out the website.

You should use your brand colour in some or most of the fol­low­ing elements:

• main nav­i­ga­tion
• page titles
• head­lines
• high­light impor­tant sec­tions of text
• calls to action

You should use the sec­ondary colour for all the ele­ments of sec­ondary nature. These ele­ments include, but are not lim­it­ed to:

• acti­vat­ed links (when the link has been clicked, it slight­ly changes its colour)
• sub­ti­tles and sub­head­ings through­out the page
• sep­a­rat­ing ele­ments with sec­ondary infor­ma­tion designed to visu­al­ly break up a page into more man­age­able parts (pre­vents the so-called “wall of text” effect).

Final­ly, you need to choose the back­ground colour for your web­site. A good back­ground makes vis­i­tors feel com­fort­able and does not divert atten­tion from the con­tent of the page.

The back­ground colour choice main­ly depends on the type of web­site. A rule of thumb for most busi­ness web­sites is to go with a fair­ly neu­tral or white back­ground, so that your con­tent will become more promi­nent. For fash­ion web­sites or trendy stores you will prob­a­bly use bold colours. For graph­i­cal­ly inten­sive web­sites, such as pho­tog­ra­ph­er port­fo­lios, the back­ground can con­sist of more dif­fer­ent images or a sin­gle large back­ground image.

Accessibility aspects of design

Anoth­er impor­tant aspect of the effec­tive use of colour in web­site design is acces­si­bil­i­ty. When design­ing a web­site, you should not rely only on colour noti­fi­ca­tions. Around 8% of men and 0.5% of women suf­fer from some type of colour blind­ness, with red-green colour blind­ness being the most common.

In this sit­u­a­tion, high­light­ing a piece of text in red does­n’t work for any­one who is affect­ed by colour blind­ness, so you need to resort to oth­er types of infor­ma­tive noti­fi­ca­tions. To over­come this obsta­cle, you can use icons and oth­er types of mark­ers to direct atten­tion to spe­cif­ic parts of the con­tent, such as required fields that a vis­i­tor needs to fill in.

A/B testing of colour in website design

A/B test­ing is essen­tial­ly a test of the qual­i­ty of design lay­outs. If you don’t want to rely on per­son­al pref­er­ences, and you should­n’t, an A/B test is a way to find out which colour scheme per­forms best.

To test which colour scheme is more attrac­tive to your tar­get audi­ence, you can sim­ply set up two pages with iden­ti­cal con­tent but dif­fer­ent colour schemes, and split the incom­ing traf­fic. As long as both web­page ver­sions get suf­fi­cient traf­fic com­ing to them, you can form prop­er esti­mates on their val­ue and con­ver­sion capabilities.

Conclusion

Effec­tive use of colour in web­site design does­n’t leave room for gut feel­ing or intu­ition. There is a firm set of rules that results in prac­ti­cal, func­tion­al, and visu­al­ly appeal­ing web­sites. Every­thing from the def­i­n­i­tion of the dom­i­nant colour, to how to imple­ment this colour on spe­cif­ic ele­ments on the web­site, have best prac­tices that you should fol­low. One of the most impor­tant is – put your audi­ence first. If you design web­sites with your tar­get audi­ence in mind your web­site projects should be set up for success.