Impact of colour on web design.

Colouring pencil ends formed into a circle

Just like art, websites are impacted greatly by their colours.

You perceive a painting in a certain way based on its colours. Consider the following scenario: you have two paintings. They’re the exact same image, except one is black and the other is multicoloured. Each painting evokes completely different emotions and perceptions. This is the exact same for websites.

The colours you choose on your website will impact how visitors perceive you as a business. Directly affecting their memory retention, attention focus and conversion decisions. This comes down to colour psychology.

a library of books, showing the psychology section

What is colour psychology?

Colour psychology is the study of how different colours impact human behaviour. It’s related closely to colour theory. Firstly, colour theory is very similar to colour psychology. Except it focuses on the effect of certain colour combinations, rather than individual colours. Colour psychology and colour theory have depicted certain meanings from colours/ colour combinations. Giving marketers and web designers an insight into the feelings they evoke.

Despite this, it’s important to understand ‘colour feelings’ are greatly impacted by personal preferences. Crafted by personal experiences and cultural backgrounds. As well as being impacted by age and gender too. Which makes consumer research an absolute necessity. Understanding how your audience perceives certain colours play a huge role in conversion success.

Colour psychology in web design

Understanding the feelings evoked by certain colours and combinations can benefit your business greatly. Studies have shown using the correct ones can lead to higher conversions and increased engagement. As well as developing a stronger brand identity. Here’s an overview of the feelings, attitudes, and perceptions associated with common colours, and how you can use them to enhance your website design…

green branding for a sustianble business

Green

Typically green is used by environmental and outdoor businesses, particularly when combined with brown. The colour is associated with positivity, balance, growth, nature, calmness and peace. Additionally, it can evoke feelings of reassurance, hope, support and relaxation. Its calming effects have revealed it’s the easiest colour on the eye. Therefore making a website easy to view. Its strong relation to nature further emphasises its balancing, harmonizing effects. Which can create a compassionate tone for your web design. Reflecting your business as a trustworthy, caring one.

Examples: Aswell as environmental sites, green is also used in other industries.

  • Food Sites: Evoking a sense of fresh, organic and healthy produce.
  • Medical Sites: Due to their calming effects, which can reduce stress.
  • Tech Sites: Due to its associations with growth and innovation

Top Tip: Green works great for calls to action e.g. Sign Up, Add to Cart. In fact, it’s the second most used colour for CTA’s.

Blue

Blue is the most favourable colour choice in web design. Its popularity comes with strong psychological backing. Research has shown blue has a substantial effect on improving brand recognition. Moreover, it’s associated with dependability, intelligence and security. Hence why using blue is a great way to convey feelings of trust between you and your visitors. Think of PayPal for example, their whole business is built upon the trust of transactions.

Examples: Some of the biggest corporations globally use blue for it’s design influences.

  • Financial Sites: Its trustworthy, secure, dependable influences make it a perfect fit for banking services.
  • Airline Sites: Once again its trustworthy element makes it popular amongst airlines, which can be daunting for some customers.
  • Tech Sites: Just like green, blue has associations with innovation and progress.
a yellow smiley face painted on gravel

Yellow

What used to be an uncommon colour has seen a lot of growth in the last 5 years. Its vibrant, youthful and optimistic associations can effectively influence a web visitors mood. Making them feel happy, creative and uplifted. In web design, use yellow as a way to grab the readers attention. Its vibrancy against neutral colours gives it maximum impact. Therefore, it’s an effective colour to use on CTA’s. Despite this, don’t overuse yellow as it can strain the eyes.

Examples:

  • Wellness Sites: A soft, lighter yellow is less straining and is said to create a calming feeling. Creating an inviting web page for visitors.
  • Parenting Sites: Often used to uplift the mood of stressed parents. Creating an approachable friendly web page for parents seeking advice.
  • Travel sites: Yellows’ sunny associations make it a great fit for holiday/travel sites. Its fun, enthusiastic, exciting influences match the moods of keen holiday seekers.

 

Red

Conversely, red is a rather contrasting colour. While it evokes feelings of excitement, passion and energy. It at the same time conveys feelings of anger, impulsiveness and caution. A bold, powerful colour that can command attention. Research has found in web design red can directly improve conversion efficiency. Due to its contrasting emotions, it’s important you pick the right red for your website. For example, a light red creates a feminine, beautiful, soft feel. Whereas a deeper red evokes much more intensive emotions.

Examples: 

  • Food sites: Used alongside attractive images of food, red has been said to excite customers and stimulate an appetite.
  • Dating sites: Dating sites use dark red to further enhance their customer’s feelings of love and excitement.
  • Design Agency: Prior to changing to a purple/pink colour scheme. gloversure’s old colour scheme was red. We utilised it due to its ambitious, bold and authoritative qualities.
  • Fashion sites: Red’s commanding influence makes it a great fit in alluring both impulsive and budget shoppers.

Top Tip: Use red for CTA’s. It is the number one colour used for CTA’s. Additionally use it to highlight sales promotions. Due to its commanding influences on consumer behaviour.

a wet floor with a red light reflecting in the water

Orange

Similarly to red, orange has a controversial nature. It is associated with being cheerful, playful, vital and friendly. It’s warm, evokes energy and can even signify affordability (EasyJet). Whilst it doesn’t behold the same aggressive nature of the red, it still has an attention-grabbing influence. Making it another great choice for CTA’s.

For example, Amazon utilises orange to trigger action. Benefiting from its urgent nature. Amazon CTA’s stand out against its white background. Appearing more noticeable and therefore actionable.

Examples: 

  • Entertainment sites: Its energetic and enthusiastic associations make orange a great fit for entertainment businesses.
  • Automotive services sites: Think of RAC for example, they strategically benefit from oranges controversial nature. Orange conveys caution which reflects the safety and danger involved in roadside assistance. Whilst additionally benefitting from its friendly, approachable influences too.
  • Childcare sites: Orange perfectly communicates sociability, activity and friendliness. Which directly reflects how childcare companies want to be perceived.

Top Tip: Small doses is best! Although it isn’t as bold as red. Orange is best utilised sparingly. Too much orange can overpower your web page.

Black

Black is widely associated with elegance, luxury and sophistication. Its powerful nature has been said to give websites authority, prestige and formality. Hence why black is regularly used by luxury brands. Despite this, black also has a strong relation to death and sadness. When used correctly in web design, black can help establish your business as a unique one.

Despite this, in the web design world, not everyone agrees with black. Research has found it can reduce readability and visitor engagement rather than a bold statement. To combat this, there are plenty of black variations on offer. For example, using charcoal or slate grey as a lighter stylish tone of black. Additionally, tones of black also contrast brilliantly with certain colour types, such as neons and pastels.

Examples: 

  • Fashion Sites: Black’s luxury associations allow fashion brands to depict themselves as a unique brand. Which can be easily embedded into website design, portraying them as upmarket businesses people want to be associated with. For example; Prada and Chanel.
  • Automotive Sites: Once again, due to its elegant look, black is often used on automotive sites. Particularly by luxury brands such as Rolls Royce.
  • Funeral sites: On the other hand, delving into blacks alternate meaning it’s often used for funeral sites. Representing sadness whilst also portraying the company as a quality, sophisticated one.

Top Tip: If you’re going to use black, make sure your balance it out with lighter colours.

a close up image of a silky pink bed sheet

Pink

Pink is a soft, approachable colour in web design. Its strong associations with romance, compassion and beauty make it an easy choice for female-targeted websites. Moreover, pink variations in tones can evoke a variety of feelings. Furthermore, using bright pink can bring out feelings of excitement, youth and energy.

On the other hand, using lighter tones can create a calm, sincere environment. In web design, using too much pink can be overwhelming, depending on the shade used. Therefore it’s best utilised sparingly.

Examples:

  • Beauty Cosmetics sites: Pinks female connection makes it an easy choice for cosmetic web design.
  • Baby sites: Baby pink is a common choice amongst baby-centric sites, due to its relation to love and sensitivity.
  • Sweet sites: Pink has been said to stimulate the ‘sweet tooth’. Hence why it’s often used by sweet shops.

Three simple tips to implement colour in web design:

1. Pick a colour scheme and stick with it

Firstly, do your research. Understand your target market and the emotions you want to evoke. Once you’ve chosen a colour scheme, be consistent with it. Consistent colouring will help to improve brand recognition and identity. We recommend choosing no more than three colours for your colour scheme.  Otherwise, your site may look overcrowded. Which in turn can drive website visitors to your site.

2. Incorporate plenty of white space

An easy mistake made by businesses is choosing a colour scheme and forgetting about the power of white space. White space improves readability and keeps customers engaged. It also contrasts against your chosen colours better. Make your colours and content stand out better.

3. Focus attention on CTA’s

Use your most eye-catching colours for calls to action. As this is how you’re going to increase conversions you want to focus attention on them.

web developer working on balancing colour in web design

Find out how we can help kickstart your project.

Start a Project