Why Is Colour Important in Website Design?
When it comes to website design, colour is one of the most important elements. You can use colour to create a certain mood or feeling. It can also be used to influence people’s actions.
Here at Boast Digital, our team is great at making complicated subjects like website colour schemes seem simple and easy to understand.
In this blog post, we will answer the question: ‘why is colour important in website design?’ in web design, and we will also provide some tips on how to choose the right website colours for your project.
Why Is Colour Important In Website Design?
The role of marketing is to influence what people think, how they feel, and what they do. Usually, we want them to think our brand has integrity. We want them to feel great and we want them to buy our goods and services.
A key part of influencing how people feel is visual. It’s creative! Colour choices influence people’s feelings.
Different colours have different connotations. They all give us a different vibe!
Colour Connotations
Have you heard of colour psychology? It’s the study of why colours affect the way we feel. It’s also why different brands use different colours to convey a particular message or feeling.
Colour psychology suggests that red is a colour of power and urgency and many designers would use Coca-Cola as a good example.
Coca-Cola has used red and white colours in its branding since its inception in the 19th century. The unmistakable red and white colours of Coca-Cola are used to stimulate feelings of nostalgia and thirst.
Blue Inspires Trust
Blue is the colour of trust and it might remind you of all the major banking brands which use blue. Bank of Sydney, ANZ Bank, AMP, Citi Bank, and Bpay, and Paypal all use blue branding.
Green Suggests Nature
Green represents money, balance, and nature. Perhaps, more recently, it emphatically represents nature. It has been co-opted by environmentalists. It’s also used by nutritious food brands to represent wholesomeness and eco-friendliness.
Wholefoods, Woolworths, and Oxfam all use green to connotate their earthy compassion.
Yellow Is Playful
Colour experts describe yellow as playful and unique. Vegemite and Schweppes both use yellow to show how bright and fun they are. McDonalds’ golden arches, Hellman’s mayonnaise and Ikea also use this colour to stand out.
Orange Is Confident and Zesty
Orange, apparently suggests confidence. Can you think of anything other than EasyJet? Tool brands like Black Decker, Hanson, and Quick-Grip have made orange a colour we can associate with safety and power tools.
Purple Is Creative
Purple is described as imaginative and sophisticated. Chocolate brands like Cadbury and Milka have selected purple as their brand colour. Hallmark also chose purple because it has a sensitive and creative appeal.
Black Is Bold and Authoritative
Black, meanwhile, is bold and classy. All brands usually have a black variant of their logo that they use when they need to stand out in a design scheme. However, black is particularly used by fashion and apparel brands.
Colours Become Emblematic of Brands
Whether you agree with these appraisals or would dispute them, it’s hard to deny that we all feel something when we see different colours. If the famous McDonalds arches which are red and yellow were suddenly purple and green, how would you feel?
Colour Science in Website Colour Schemes
We’ve talked about feelings and connotations. Both are certainly important to bear in mind when deciding on the use of colour in web design. Next, let’s look at colour science.
There are certain rules and combinations we can use to make colours compliment and contrast with each other.
The following website colour schemes are called: monochromatic, analogous, complementary, split-complementary, triadic, and tetradic. Let’s define each one clearly.
Monochromatic Website Colours
Monochromatic means using one colour. This can be achieved by using different shades, tints, and tones of the same hue or it can be a single solid colour.
For example, a website could use one colour, with a range of different shades. Alternatively, it could be very simple and have plain black text on a white background. That’s still very monochromatic.
This is used to great effect by Apple. They use a range of monochromatic shades on their website and in their marketing materials. They often use black, white and grey. This results in a sleek, clean brand image.
Analogous Website Colours
This is where two or three colours are placed next to each other on the colour wheel. They share some common hues which makes them look harmonious together.
For example, red, orange, and yellow are all adjacent on the wheel and so can be used together well. Green, blue, and purple can also be used as analogous colours.
An example of a brand that uses these well is McDonald’s. They use red, yellow, and orange in their branding which all work well together because they are adjacent on the colour wheel.
The connotations for red, yellow, and orange are also powerful, playful, and uplifting.
Complementary Website Colours
A complementary website colour palette is when two colours that are opposite each other on the colour wheel are used. For example, blue and orange or red and green.
This contrast is popular because the strong difference between colours can make them stand out from each other. A good example of this is the Pepsi logo. It uses blue and red which are opposite each other on the wheel.
Split-Complementary Website Colours
This colour scheme is similar to complementary, but instead of using two colours that are opposites, it uses one that is opposite and another that is adjacent to the first colour.
For example, yellow and purple. This scheme is less jarring than complementary and can often look more sophisticated. It can also look a little retro and psychedelic so it’s not in fashion right now for major brand logos.
There’s a good chance it will become in fashion though because it would probably resonate with young people who like unusual or unfamiliar design choices.
Triadic Website Colours
This is a colour scheme that uses three colours equally spaced on the wheel. For example, blue, yellow and red (the primary colours).
Triadic schemes are popular because they look harmonious together but also stand out from each other well. This can result in attractive website design or branding.
A good example of a brand that uses triadic colours would be Burger King, which uses red, yellow and blue for its logo.
Tetradic Website Colours
This is a colour scheme that uses four colours on the wheel.
For example, yellow, red, blue, and green can all work well together because they are equally spaced around the wheel. However, this combination can look very childish so it’s not popular in major branding schemes or website designs.
eBay, Google, and the Microsoft flags logo all use tetradic colours, which have the connotation of a rainbow to indicate playfulness, creativity, and energy.
User Journey Stories Told Through Colour
Mark Parnell, a product designer at Atlassian wrote an interesting Medium article. He wrote about how colours and shapes influence usability on websites and in software applications.
One example he used was that Google recently redesigned icons for Google workspace and they purposefully made them more consistent. This resulted in them all looking similar and as the job of an icon is to be different and quickly identifiable, this was a failure.
Users Complained About Google’s Revamped Workspace Icons
A lot of users complained that the icons looked too similar.
Web designers and people hiring web designers should be careful to use colour in a way that emphasises meanings and prompts users. They should avoid using colour in a way that is consistent but misdirects or confuses users.
For example, call-to-action buttons should stand out clearly as a contrasting colour for best results. Icons on a dashboard should be colour coded to differentiate them.
A Cheat’s Guide To Choosing Colours For Websites
If you want to quickly and easily choose colours for your website here are some criteria to use.
- Pick a feeling
- Choose a colour scheme
- Pick a logo concept
- Choose an accent colour for CTAs (calls to action, e.g. buttons)
If you follow these steps you will quickly arrive at a colour scheme that will work for any business, here are a few examples.
An Organic Dog Grooming Salon
We want it to feel natural, healthy, and creative. So we should choose green (natural) and creative (purple).
Green, blue, and purple are analogous colours. So, we can easily create an analogous colour scheme. For our logo concept, we should choose a dog.
The accent colour for buttons and logos should contrast the other colours. We want it to look high-end so we’ll choose gold.
A Fintech Start-Up
We want the brand to have the credibility and apparent integrity of other banks. Blue is used for trust and integrity. It’s a common colour for banking and medical clinics. Let’s choose blue and make it monochromatic. We can use different shades of blue within the design ranging from pale blue highlights to deep blue low lights.
The logo concept will be a flying bird, denoting freedom. For our Fintech start-up, we can choose a mellow yellow as a highlight colour. It will provide a strong differentiation, and make our buttons stand out as a clear call to action.
An Italian Restaurant
For our Italian restaurant, we want to create a sense of history and prestige. Black, white, and grey (like Apple), will make it look modern, sleek, and classy. We’ll use a monochromatic scheme. When adding images of your menu and food items to the menu using rustic or well focused images will make them pop against the prestige theme!
The logo concept we’ll choose is a basil leaf. The accent colour we’ll choose will be green, like basil, because of the association with nature and freshness. The green will immediately pop against the monochrome colour theme.
A Child Care Centre
Children are associated with play and fun. So, there are a few options here. We know we can use all the colours safely. We even choose four and use a tetradic scheme like the Google logo, that would evoke a rainbow.
However, a lot of children’s services do that and we want to stand out. So, instead, let’s opt for yellow (playful), green (natural), and purple (creative). Yellow and purple are split complementary colours.
In this case we can use a tree as a logo, to illustrate that the children in our care grow and develop.
We can use light green as our accent colour and it will stand out as a contrast against deep purple.
A Recruitment Agency
Recruiters are associated with success, money and optimism.
We should choose blue or red to demonstrate the successful end result of finding a job or employee. Let’s use analogous colours because they all look good together and suggest a sense of harmony.
Red, purple, and blue are analogous. We can use purple as a thematic colour for creative roles, blue as a colour for finance roles, and red as a symbolic colour for technical roles.
A recruitment agency logo can be a handshake to convey the idea of bringing people together. Alternativeley it can use white as an accent colour because it contrasts both purple and red.
Still Considering Which Website Colours To Choose?
We hope that helped you to better understand why colour is important in website design, and how to go about choosing the right colours for your website.
Did we answer the question ‘why is colour important in website design?’ Do you want to create a website? We can help you develop the perfect website for your business.
If you’re still feeling lost when it comes to picking the perfect palette for your business, don’t worry! We’re ready here to help. Contact us today.
