The art of practical colour theory

Life is full of colour, and we are fortunate to be able to see all the colours out there. Every element, every pigment, every grain of all the shades and tints of the whole colour spectrum are splayed out right before our eyes in the world around us.


Working as an individual in the creative industry, you will find that your livelihood is defined by colour and consequently depends upon hex codes, RGB, CMYK. Whether you produce web-designs, work in branding, design for print or logos, your creative ability and scope is defined by your ability to understand and use colours. Initially, the art of getting principals of colour ‘just right’ may cause some stress: “How can something so simple, something we perceive all the time around us be so hard to pinpoint. How can colours be so difficult to manipulate to create aesthetically pleasing combinations, palettes and overall effective stylistic solutions and approaches”?


So to help you become a bit more attuned to effective colour usage in your design we have put together this little guide on colour theory and successful application of tricks and techniques that will turn your site from a blank canvas into a masterpiece filled with colour.


The method behind the colour wheel

A good place to begin would be to look at where the understanding of the colour spectrum began, and this was with the colour prism. Sir Isaac Newton developed the first circular diagram of colours in 1666, he discovered that when pure white light passes through a prism, it separates into all of the colours visible to our naked eye. Upon discovering this, Newton also found that each colour is made up of a single wavelength and cannot be separated any further into other colours. Since then, scientists and artists have studied and designed numerous variations of this concept. One such thing to come out of this is the design colour wheel. This invaluable tool is perfect for matching complementary colours to create colour schemes. Or if you want to go a step further, you can deliberately employ contrasting colours to achieve bold effects in your design, though this can be very risky so do it at your own risk!


Psychology of colour

Subconsciously your mind reacts differently to different colours well this is down to your subconscious. Colour psychology tells us that different colours convey different meanings. In other words, colours subconsciously influence your feelings when you see them. The psychological effect that colours can have on the individual are incredibly powerful and also very subjective. This is why interior designers fuss over meticulous little elements of colour balance; the right balance can create the right environmental feel. Enhancing the right colour elements will produce the desired environmental qualities (such as mood enhancement) in a space. When applying colour theory to your design brief, it is wise to keep in mind that colours can mean different things in different parts of the world.


For example red is seen as lucky in Chinese culture, in western society we view red as danger, as a warning or to stop; but also in total contrast it can symbolise love and passion. Hence the hues of red that adorn the world on Valentine’s day. A typical example of practical colour psychology used in society are traffic lights; red equals stop or risk potential hazard, amber is very soft, and represents a combination of emotions elicited by its parent colours; the danger of red and the security of yellow. Then Green is used for go, as green traditionally symbolises growth and movement, which is why you move when you see the green light.


When designing a website, you absolutely must take into account what you want your palette to say about your website. For example, when we designed the Prophet website we wanted to convey that their purpose as a supply chain software provider was that they ensure that perishable products are delivered to the supplier in the quickest time possible; ensuring the product was fresh when it got to its destination. To convey this we chose very rich and fresh colours; organic colours such as reds and greens. Identifying the purpose behind a company or their product can help you select the perfect colour options for them.


Colour and the digital world

Companies are very selective when it comes to colour arrangements in their websites,  their logos; practically every element of a company’s branding or identity has some governance as a result of the subjective responses elicited by colour. Obviously in the creation of a website it is always wise to consider that this works both ways and that individual subjectivity often shapes this. A client may ask for their website to feature a certain colour scheme as it evokes an emotion akin to their cultural understanding of that particular colour, which may be different to your understanding; remember the example of red that I touched upon earlier? Application of moods and social implication is a mandatory part of design, and understanding cultural implications can influence your working palette when designing for a client.


Let’s talk about some working examples. Blue is a very common colour in blog and web design. Many top web brands use blue as their primary brand colour. For example, the logos and websites of TwitterFacebook, and LinkedIn are all predominantly blue. This is due to the fact that the majority of the target audience and the general public react well to the colour blue. In colour psychology, blue is said to evoke feelings of calmness, security, trust, and dependability. Keeping this in mind, the colour blue helps to promote the brand ethics of the chosen organisation.


Take Facebook for example, it is a social platform whereby people communicate, stay in touch by sharing important information between them and their selected audience. To promote Facebook as a reputable platform, first they must build trust so that people feel at ease when sharing their most personal information (as we saw tested with the introduction of timeline). The fact that the colour blue subconsciously communicates calmness and security is no coincidence, we as the general public will think it’s ok to use Facebook as a secure platform to store our personal information as the mood of trust is conveyed to us through their use of website colouring.


Colour and typography

The whole purpose of typography is so that the type is legible to the eye and fit for purpose and function. Colour will enhance and compliment the typeface or font used, and will adapt the way that it is perceived for the intended target audience. Many great examples of this can be found in poster design of the past and present. There are some classical examples, for example red and black is a common one for sports cars. There are some colours that you should really steer clear from using though, for example yellow. Yellow is not really used as a colour to present type due to the fact it is often illegible or straining to the eye. In the rare cases yellow is used in type, it is of a mustard shade or tone as opposed to a brighter shade.


So, hopefully now you have a basic understanding of how to apply basic colour theory to website design. Notice now how you will register the effects of colour differently than you maybe would of before reading this article. Colour theory also goes beyond the realms of website design, it is also a staple part of understanding culture. Gaining a good working knowledge of cultural implications of colour and learning how to apply this to your design will guarantee you results that scope into the psyche of your client.