Web Design & UX: Using Colour Effectively in Designs & Websites

The significance of colour

Colour is used as a form of communication; evoking meaning, emotions and actions. Specific colours have different associations, that, when used in design, can engage the user and create responses. Users will associate colours with objects in the real world, for example, a set of traffic lights will have three states. In web design, the use of red, orange and green can represent three states of completion, with red indicating incompletion and green indicating that a task is complete. 

Colour is also used to create retention and association, as a brand is often associated with a specific colour. As well as creating a brand, this colour can be used to create consistency and continuity across the website, gaining the users trust and confidence. Users will find it easier to navigate around a well-designed website that uses colour appropriately on elements such as links and buttons. 

How colour can influence interaction

Links generally use the same colour across the site, highlighting to the user that this takes them to another page or creates an action. Another colour can be implemented to differentiate between state changes. With apps such as Instagram, the colour red is used to indicate a state change i.e. liking a picture.  

Colour can also call attention to specific parts of the website. A contrasting colour can be used for important images, error messages and call to actions, drawing the attention of the user to those areas.  

High contrast areas are also great for people with colour blindness – a website with a lack of contrast can be harder to read. You might wonder why you would design a site with such a small percentage of users being colour blind, but a lot of colour combinations that are an issue also apply to general users.  

Colour and meaning

Different colours are associated with different meanings which you can apply to real-life situations. Green is a commonly used colour to represent health, nature and fitness, as it is a well-balanced colour, inflicting a level of calmness. Blue is another calm colour, commonly used for technology and business sites, as it signifies power and intelligence. 

Red is often associated with danger/urgency, therefore is often found on warning signs or error buttons. However, red can also be associated with love, a sense of urgency and speed, therefore is ideal for websites that need an action from the user, such as charity or donation websites.  

Whatever colour scheme you decide for your website, it is worth taking into consideration the emotional impact it gives. Cool colours such as blue, green and purple evoke a level of calmness, sadness or a neutral opinion. Warmer colours, such as red and orange are used for creating emotion or actions.  

How to choose a colour scheme

Using a logo to create your colour scheme, if you already have a logo then that can be the basis of your colour scheme. Be careful about heavy use of strong colours as they can make the eye feel tired. You can desaturate the colours to mute them slightly to make them less strong.  

If you already have a main colour for your website, a great tool to help with accent colours is the adobe colour wheel. This tool can select complementary or analogous colours to help find colours that work together and complement each other.