The Relationship Between Colour Theory and Web Design


Colour theory is one of the most important elements of web design and this is a topic I spoke about in great depth recently when I had a work experience week at Hallway Studios. Humans are trichromatic and possess three different channels in which to portray colour. These receptor cells in the retina are each sensitive to different light properties – red, green and blue; and through these channels we are able to see approximately 10 million different colours.

Colour is the fundamental attribute of any object and is the first element that the brain processes. In design, it’s provides the “first impression.”


Colour is Subjective

Colour evokes different emotions depending on the viewer. These reactions are triggered in the subconscious by memories and common associations. Minute changes in colour design can trigger completely different feelings, even if it’s something small like changing the hue. According to Cameron Chapman of Smashing Magazine, cultural differences can also have a significant impact; and what’s considered a happy colour in one country may be considered depressing in another. In order for you to make the “right” choice as a designer, you must tap into your target demographic and appeal to the majority – the laws of biology make it impossible to satisfy everyone.


Warm and Cool Colours

Warm colours are variations of red, orange and yellow. Generally speaking, they’re energizing and often related to passion, happiness and enthusiasm. Cool colours include green, blue and purple. These are often considered to be the colours of night and are used for calming and relaxing purposes. Good design is all about creating context. Colours should be relative to what you’re designing; otherwise they’ll look out-of-place and lead to confusion. For example, if you’re designing a logo for a spa, then a relaxing colour will be far more appropriate than a bold red, which is commonly associated with danger.


Neutral Colours

Neutral colours often serve as a backdrop rather than a primary colour. This is because they can affect the colours which surround them and emphasize accents. For example, in home décor, a neutral colour palette may be used to draw attention to a piece of boldly coloured artwork. Neutrals combine well with any colour scheme; however, just like warm and cool colours they should have a purpose. For example, in website design a white backdrop provides a clean image to work off, this not only provides the viewer with a visual “break,” but can be used to highlight a certain area of the page.



When you’re working with colour, creating harmony is paramount. Always ensure your designs are pleasing to the eye, engaging and balanced; otherwise they’ll look either too boring or too chaotic. If you’re ever in doubt, use the colour wheel. Colours on the opposite end of the spectrum always work well together.

Colours which aren’t arranged properly often don’t appear to work well together. Application will often yield unexpected results, so don’t be afraid to try combinations that you’re unsure about. If you trust colour theory and think in a more scientific manner, it will reflect positively in your designs.


Author: Helen Wallis