Skip to main content
Web Design

How Colours Affect Your Web Design

By 11 November 2015No Comments
Colour and Web Design

In a web design, the colour choice has the power to make or break a website. With 55% of visitors spending a maximum of 15 seconds on your homepage, it has got to impress. Research also indicates that half the people who drop off your site do so because of the colours. Crazy, right? Luckily, I have done a little research into the psychology of the most popular colours used on the web. I have also put my findings into a handy list of how to use colours to optimise your web design.


Red resonates with power, strength, passion, excitement and youth. Yet, it can also represent anger and aggression. Red is also the first colour a baby can distinguish.

red web design


  • Pair red with sleek, modern fonts. This can showcase that you’re a youthful, exciting company that offers fresh, innovative ideas.
  • Use red in call-to-action functions. This can make the action seem more urgent and make your audience react to it now rather than later.
  • Pair red with black and white. This creates a defined, cohesive look that gives the impression of unity and professionalism.


  • Over-use red. This can lead to over stimulation and is not recommended if you want to create a calming page for your business.
  • Pair red with too many overwhelming, bold fonts. Unless, of course, you want your web design to look like an aggressive warning sign.
  • Pair red backgrounds with fonts in other warm colours like yellow and orange or vice versa. This can make your site hard to read.


Blue is a relaxing, refreshing, peaceful colour. But, it can also create a cold, unemotional space. Additionally blue is the world’s most favourite colour.

blue web design


  • Use darker shades of blue as accent colours throughout banners and headings. This will promote your business as reliable and professional.
  • Use lighter shades of blue in sharing buttons or comment sections. This encourages interaction on your site as it creates a friendly, open atmosphere.
  • Combine blue with white. This creates a more uniformed look (with dark blue). Also, it could make your website more soothing (with light blue).


  • Over-use dark shades of blue this can create a sombre effect on your site and make it seem dark and closed off.
  • Overlay blue with colours of a similar contrast. So depending on the shade of blue avoid corresponding colours; like navy blue and dark purple. This can make your site difficult to look at.


Black is representative of sophistication, efficiency and substance. Black can also seem oppressive, heavy and cold. Scientists think that black is the absence of all colours. Whereas artists think it is a combination of all the colours from the colour wheel.

black web design


  • Use black throughout your web design in different forms. This creates a timeless classic feel for your brand and website.
  • Use black as either your background colour or predominant font colour. Black is one of the easiest colours to use as it can be part of various colour combinations.
  • Combine black with white. This creates a minimalist design which is sleek, elegant and fashionable.


  • Overuse black, this can make your web design overwhelming. It also creates the feeling of being uncomfortable.
  • Combine black with other dark colours like brown. This makes your website difficult to read or look at.


Yellow is a happy colour that increases cheerfulness and energy levels. It is associated with irrationality and fear. It has also been researched that it makes babies cry the most.

yellow web design


  • Use accents of yellow throughout your web design in graphics and imagery. This creates an energising, cheerful feel.
  • Use yellow as your base for “buying” buttons (if you have an e-commerce site). It has been proven that yellow can convert browsers into buyers better than any other colour.
  • Sparingly use shades of dark yellow or gold throughout the headings on your pages. This gives the impression that your brand is timeless.


  • Combine yellow with too many other shades of yellow. This can create the feeling of irrationality and disorganisation.
  • Combine yellow fonts with warm coloured backgrounds or vice versa. This can make your website hard to read.


Green is a colour that resembles growth, balance and reassurance. However in certain shades it can also represent boredom, blandness and stagnation. Green is also the colour of the brain. So, although it is not a primary colour, it actually helps us see other colours.

green web design


  • Use green in your testimonials or case studies. It will create reassurance and trust with your website visitors.
  • Use green as a bridge from cool space to warm space. This makes the transition seem seamless as green has undertones of both warm and dark colours.
  • Use dark green if you are a company in the finance sector. This will give off affluent vibes and make your company seem more financially conscious.


  • Combine green with white. This combination has been surveyed to bore web users the most.
  • Overlay green fonts on blue backgrounds or vice versa. This can make your content hard to read.


White like black can represent efficiency and sophistication. It can also be associated with purity and simplicity. However, it can depict sterility, unfriendliness and elitism. White is also the world’s least favourite colour.

white web design


  • Use white throughout your web design in different forms. Like black, this creates a timeless classic feel for your brand and website.
  • Use white as a background, as it won’t distract your audience from the content on your site. This gives you limitless possibilities for graphics, fonts, imagery and any other functions.
  • Combine white with almost any colour (apart from extremely light shades). White is universal and looks good with pretty much anything.


  • Overuse white as it can create too much empty space. It can also come across as elitist, unfriendly and sterile.
  • Combine white with any pale colours. This can make all aspects of your site hard to read.

Remember that everybody perceives colour differently. So you won’t be able to please everybody with your colour choices in your web design, even with these tips. The only way to get the best results from colour usage is to research your target audience.

If you want to do some more reading around this subject please click the links below. Here are some of my favourite more in-depth, studies of colour:

An article based around colour through user testing
The psychology based around colours and marketing
A series of trials to determine what colours increase conversion rates

A two-part blog series on colour and web design (Part 1) (Part 2)

I hope this helped you optimise your pages with colours. Happy designing!

Leave a Reply