Grab a coffee and read our purpleblog

Tea works too. Or hot choco­late. Or even some­thing stronger! Our arti­cles are based on the most com­mon ques­tions we get from our clients, that’s why they are so inter­est­ing to read, and actu­al­ly utilise. You won’t notice how time flies!

5 min read How to Use of Colour in Website Design

Effective Use of Colour in Website Design

Key Takeaways

  • You might think colours and design are intuitive practices, but your brand will be better off following proven colour theory to secure the best results.
  • With red suggesting urgency, it’s best placed in CTAs or notifications, whilst white suggests health and innocence and is favoured by brands that identify with these values.
  • For best results, use no more than three colours, and use them to a ratio of 60-30-10.
  • Rather than relying on your personal preferences, use A/B testing to prove your use of colour and track which ones see the greatest results

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.


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.

Free Consultation
Please let us know your project requirements, and we’ll get in touch as soon as we can.

    We are pleased to welcome you on the purpleplanet!
    To order the service package you’ve chosen, please fill in the form and we’ll get in touch with you soon.

      We are pleased to welcome you on the purpleplanet!
      To order the service package you’ve chosen, please fill in the form and we’ll get in touch with you soon.