A Comprehensive Guide to Colour Theory and Colour Psychology

This post is a comprehensive breakdown on colour theory. Pulled together from the web, we feel this is the best guide out there. Enjoy!

  1. Colour Wheel
  2. Hue, saturation, and brightness
  3. Colour Combinations/Harmonies
  4. Colour Context
  5. Colour Psychology

What is the Colour Wheel?

Colour theory starts with the colour wheel which was invented by Isaac Newton 1666. It’s kind of what it sounds like, a wheel of colour. What you can do with this wheel is both an art and a science and can be used to find out what colours work well together in theory. Understanding this together with the emotions they convey is crucial if you are building a brand.

The two types of colour wheels in colour theory are RGB and RYB (CMYK). CMYK is useful for artists as mixing colours uses subtractive colour mixing model and it’s used on anything physical like posters and paper. RGB is what you are looking at now and used by mixing light – additive colour mixing model.

A colour wheel is made up of twelve colours (red, orange, yellow, chartreuse green, green, spring green, cyan, azure, blue, violet, magenta and rose) and can be divided into three different colour groups.

Image result for colour wheel
Colour wheel

The 3 Primary Colours

Primary colours are Red, Yellow and Blue and these colours can be mixed together to create white. Three pigment colours that cannot be mixed or formed by any combination of other colours and all other colours are derived from these 3 hues.

Primary colours

The 3 Secondary Colours

Secondary colours are a result of mixing two primary colours together. When using subtractive and the RYB colour wheel you will get purple (red mixed with blue), orange (red mixed with yellow), and green (yellow mixed with blue). The classics.

Secondary Colours

Tertiary Colours

Tertiary colours are created by mixing a secondary colour with a primary these are orange, chartreuse green, spring green, azure, violet and rose.

In the RYB color wheel, the tertiary colors are red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet.

Tertiary colours in RYB colour wheel

Warm and Cool Colours in the Colour Wheel

The colour wheel can be divided to create warm or cool colours (temperature). In colour theory, warm colors (red through to yellow) are said to bring to mind happiness, optimism and energy, while cool colors (blue to green and purple) are associated with serenity and isolation.

Warm & cold colours

Introducing Hue, Saturation and Brightness

HSB (or HSL) stands for Hue, Saturation (Chroma) and Brightness (Luminosity). Hue is the actual colour on the colour wheel. Brightness refers to how much white (or black) is mixed in the colour while Saturation indicates the amount of grey or purity in a colour. We can also use this same concept to similarly describe…

Shade, Tint and Tone

Shade is created when you add black to the base hue. This darkens the colour and tend to be richer, darker and often more intense than the original hue.

Tint is created when you add white to the base hue. This makes it lighter and desaturates the hue and makes it less intense but also makes colours calmer and quiet.

When you add both black and white (grey) to a base hue, this is known as Tone. They appear less saturated or intense and often more closely resemble real-life colour.

Shade, tints, tones
Shade/tint/tone

Useful Colour Combinations/Harmonies

Now with the colour wheel out the way, let’s talk about how we can use colour theory to find harmonious colours.

Complimentary

Complimentary colours are colours that exist at opposite ends of the colour wheel. These colours are high impact, vibrant and contrast with each other very well. They must be used carefully so they are not jarring. Contrasting colours can help imagery pop and are a good idea for logos or identities but are not advisable for text and typography.

Complimentary colours

Monochromatic

Monochromatic colours are three shades – tones and tints of one base hue. They are a much more subtle colour combination and can feel calm and harmonious when used.

Monochromatic

Analogous

Three colours that are side by side on the colour wheel are called analogous and are often found in nature. These colours have a high impact but should be used wisely as they can be overpowering. You should use one dominant colour from this selection while the other two should be used as accents. Analogous colours can be used effectively on websites as it can draw the eye so that a user knows where to take action.

Triadic

Triadic colours are three colours that are evenly spaced on the colour wheel and are bright and dynamic. They can create contrast and harmony simultaneously so can be very effective but once again, let one of these colours dominate and use the others as accents.

Triadic colours

Rectangle (Tetradic)

Tetradic colours are four colours evenly spaced on the colour wheel with two complimentary squares (Double-Complementary Relationship). They are quite bold and can offer a lot of variations. Letting one colour remain dominant is key here. You should be aware of cold and warm colours so that correct grouping can be established.

Tetradic colours

What is Colour Context

Another key thing to note is how colours behave in relation to others. Two of the same colours used in slightly different ways can create different contrasting effects and this is called simultaneous contrast. This is at its most powerful when the colours are complementary colours. Michel Chevreul studied the idea that an object of any given colour will cast a shadow tinged with that of its complementary colour and there are several effects of colour context.

Lightness

The most drastic and obvious effect of simultaneous contrast is the apparent shift in brightness. If you take two squares of the same hue and surround it with a lighter or darker shade, the square surrounded by the darker shade will appear lighter and the square surrounded by the lighter shade will appear darker.

color shift in a simultaneous lightness contrast, all large and small squares have the same hue and chroma

Chroma

Similarly, chroma can apparently be affected by having two squares of the same hue surrounded by a desaturated and an increased saturation of that hue. The colour on the right seems duller against the high contrast and reversely the colour on the left seems extreme opposite. This is because value and chroma are often confused in colour perception.

all large and small squares have the same hue and lightness

Crispening Effect

Crispening effect is the apparent shift in the contrast between two colours of similar lightness while surrounded by a colour of a different colour lightness.


the crispening effect

Colour context source: http://facweb.cs.depaul.edu/sgrais/color_context.htm

Colour Psychology and Its Affect On Us

Colour can play to our stereotypical view of the world and the way we understand it. Given this, we can take a look at the different colours and what they could mean to an observer of your brand. Colour psychology can be split up into warm, cool and neutral colours.

These explanations are very subjective though and it can vary because of someones past experiences or cultural differences so take with a pinch of salt and do your research.

Warm Colours

Warm colours often evoke feelings of happiness, optimism and energy however, yellow and orange can also slightly irritate the eyes and red can increase a person’s appetite.

Red

Red is warm and dynamic and can (apparently) invoke hunger. It can also be associated with passion, love, anger and danger. Red is playful, modern and exciting but used as an accent as it can be quite tiring to look at.

Orange

Orange can be associated with happiness. It still has elements of energy and is playful but is not overpowering like red.

Headspace is a meditation app and uses the vitality and hapiness of orange in their logo

Yellow

Happiness, friendship, energy and hope. A brand using yellow gives a sense of optimism and cheerfulness but a word of warning it can also be tiring to look at so use sparingly.

Image result for biotech logo
Aranya logo gives a sense of happiness and optimism

Cool Colours

Cool colours are usually calming and soothing but can also express sadness and are often chosen by health and security sectors.

Green

Green is, of course, associated with wealth, nature and health. It’s also very easy on the eyes and because of its association with nature, green can depict growth, prosperity and safety.

Image result for biotech logo
Cannasphere uses green for its obvious natural conotations

Blue

Blue apparently induces chemical reactions in the body that are calming so is great for calm and spiritual brands. Dark blues feel more corporate and professional but can also feel cold while light blue is relaxed and friendly. Blue is said to be trustworthy and mature.

Image result for biotech logo
Nascent are focused on the development and delivery of human antibodies and cytokine responses for the treatment of cancer

Purple

Purple can be associated with royalty, wealth, sophistication and authority. It can be soothing and calming being a colder colour but is also perceived to be luxurious. It’s also commonly associated with mystery and romance and it’s also not overly feminine.

Neutral Colours

Neutral colours work great as background colours and include black, grey, white, tan and brown.

We hope you’ve enjoyed this article about colour theory. It was originally part of this article what colour to use for you biotech branding but was broken out for readability. If you want to know more, check that out.