Back to all articles

Creating emotions with colour in web design


When designing a website, the colour is a very important aspect. The colour gives an emotional feel to the page that users unknowingly judge when then visit. We are going to talk about the fundamentals of the colour theory and how designers use it when creating brilliant websites. We will also look at the emotional effects of the most commonly used web colours.

The colour theory

There are three parts to the colour theory; Contrast, vibrancy and complementation we will explain how they each play their own part in UI web design.

CONTRAST

Contrast is the difference between two colours when used together. Bad colour contrast colour means people not being able to read text or see navigations.

VIBRACY

All Colours create different moods, Dark cool colours like (Green blue and Purple) tend to be more relaxing and chilled. Whereas brighter warm colours like (Red, Orange and Yellow) are used to promote alertness to grab attention quickly. See below BBC News used a red themed page to alert.

COMPLEMENTATION

The opposite of contrast, this is about the colours that bring out the best in each other. You can find the complementation of a colour by picking the colour in the direct opposite of each other in the colour wheel below. For example Yellows complement is blue.

The emotional impacts of colour

Blue
Safety, Security, calmness

Blues meaning can sway depending on its shade a lighter blue promotes safety and relaxation whereas a darker blue shows strength and reliability.

PayPal is a secure way to pay a receive money over the internet, this is why they use the theme of blue as it shows its safety to the user. Other websites like Skype and twitter use blue for the same reason.

PayPal

Red

Alertness, power, importance

Red is used on pages to make them look important and get messages across with serious effect. It grabs attention and works well with lots of other colours.
The Give blood website is set out to get people to ‘give blood’ and inform people about how important it is to give blood. The colour Red against the white background works very well to highlight the points with importance.

Give Blood

Green

Education, Environmental, growth, technology

Green is in-between both the warm and cool colour and bridges the gap between them both. It serves as a nice neutral and is commonly used in news websites. Above tech crunch, a ‘technology news site’ uses green to show the tech side as well as promote it as educational reading.

Tech Crunch

Black

Sophistication, class, power

Black pages are rare to come across because they are hard to design well. Done correctly they can look amazing along with looking classy and sophisticated while still looking powerful. Apple got it spot on when releasing the Mac pro which is all about its class and sophistication with it also being apples most powerful computer. It all ties into the page colours.

Mac Pro

Yellow
Happiness, excitement, confidence

Shades of yellow promote happiness, excitement and confidence that’s why a lot of brands use it on their websites. Bose in the past used very boring corporate colours like blue grey and white but after a complete rebrand they use much more colour for excitement as that is what music Is all about.

Bose

White

Clean, simplicity, confidence

A white website promotes cleanliness, simplicity and confidence. IT is hard to use as the empty spaces will be amplified with the colour. The Apple brand fits in with this colour website as the brand has always been about its simplicity and cleanliness of its product design and the web page follows.

Apple

Orange
Fun, Excitement, energy

The colour orange on a web page promotes fun, excitement and energy, with its bright colours it can also look great. Darker shades promote confidence and reliability. Fanta is a fun energetic brand for children and teens, that’s why they have a bright energetic website.

Fanta

 

Picking a colour scheme

Every website has a colour scheme, it’s the primary colours it uses for the main areas. (background, text, navigation, block parts) There are lots of ways to choose you main colours but we are going to show you the three most successful ones.

TRIADIC

This is the most basic and balanced of the three colour structures, it’s also the most widely used. Using vibrancy and complementation, the triadic is the safest and most reliable. On the 12 sections colour wheel select any three colours in an equilateral triangle.

SPLIT COMPLEMENTARY

Trickier to pull off but can be more rewarding if done right, the scheme uses two complementary pairs and one contrasting.

ANALOGOUS

This just focuses on the complementary colours and using them together. It can be hard to use if you are not experienced as it could be hard to make things stand out from the background colour. This scheme highlights the vibrancy of the colours.

Just the basic knowledge on colour can take you a long way as now you know what colours you should be using and also what colours not to use with each other.

Useful tools

Canva Colour – Give you all the information you need about colours, their meanings, the emotions they give and what combinations are best.

Adobe colour cc – lets you try out, create and save various colour schemes, each of which consists of a set of five colours

The colour app – iOS tool The Colour App aims to make finding colours much easier, with a large grid of colours so you can utilise your full screen

Mudcube colour sphere – it not only provides the hex numbers for each colour; it also helps you to build up a colour scheme from one chosen shade.

Colour hunter – Find an image that you like the look of and then enter it into Colour Hunter; the tool will then create a colour palette from your chosen image.

Colour Hailpixel – Hover your mouse anywhere across the screen to nail down your chosen colour, scroll to set your saturation, and the site will give you that all-important hex code for your projects.

If you have any questions regarding the article please get in touch with us either on Twitter – @CarpediemAgencyor by Email – Hello@Carpe-diem.co.uk.