A Brief Introduction to Colour Theory
Tags: colour, ui, ux, colourtheory
Published: 2021-04-21 13:36:54

Whatever the art or design you do, colour theory plays an important role in conveying your message to your audience. Although many won't really know it, the colour mix you implement in your designs can affect the audience in a psychological way. 

Before going that mental, let's dig up the basics.

# Colour Systems
Understanding colour system is vital in reproducing more colours. There are two main colour systems. 

 1. Additive
 2. Subtractive 

Additive colours are used in screens while subtractive colours are used in printed materials. Another way of looking at this is that objects that emit light use additive colours and objects that reflect light use subtractive colour.

### 1. Additive Colour
<img src="https://i.imgur.com/j5DGWeJ.jpg" alt="Additive">
Primary colours of this are Red, Green and Blue (RGB). This is the holy trinity of additive colours that is the basis for all colours that's used on a screen. Combination of all these colours creates white, and absence of the all three colours is black.

### 2. Subtractive Colour
<img src="https://i.imgur.com/7gpJGMh.jpg" alt="Subtractive">
Primary colours of subtractive are cyan, magenta, yellow and black (CMYK). K stands for 'key' because cyan, magenta and yellow don't fully absorb light and a need arose for a compensating colour to account for this. Hence, black is added as a fourth colour. 

# Colour Wheel
<img src="https://i.stack.imgur.com/SBvcU.png" alt="Colour-wheel">
A bit of a history for you; the colour wheel was invented in 1666 by Isaac Newton, as he mapped the colour spectrum onto a circle. The colour wheel is called the basis of colour theory, as it shows the relationship between colours.

Colour Wheel is used to find colour *harmonies* by using the specific colour combinations. Colour harmony is achieved by using colours that look good together. 

## Colour Combinations

**1. Complementary Colours**
<img src="https://static-cse.canva.com/_next/static/assets/complementary-colors.1200x690.f6aff61a6d4a050896d92666ac184888.png" alt="Complementary Colours">
Complementary colours are **two** colours that are on opposite sides of the colour wheel. A combination of two of these like this provides a high contrast for your work and these colours will appear brighter and more prominent.

**2. Monochromatic**
<img src="https://static-cse.canva.com/_next/static/assets/monochromatic-colors.1200x690.c7f66f1fcd6a6993b518384ac67996cf.png" alt="Monochromatic Colours">
Monochromatic colour is used as shades, tones and tints (later explained) of a one base colour. It adds minimalism to your work and also it's easier to design too.

**3. Analogous**
<img src="https://static-cse.canva.com/_next/static/assets/analogous-colors.1200x690.09f7dce335bf3297b64fbe9ec4107942.png" alt="Analogous Colours">
Three colours which are placed side by side on the colour wheel are called Analogous colours. The idea is to use one colour as the dominant colour and use the others as supplementary colours. This combination is often called a versatile but overwhelming combination.

**4. Triadic**
<img src="https://static-cse.canva.com/_next/static/assets/triadic-colors.1200x690.a4b8643c90eb65eeec9ee403474a8688.png" alt="Triadic Colours">
Triadic involves three colours that are evenly spaced on colour wheel. This combination creates a high contrast, bold and vibrant colour schemes.

**5. Tetradic**
<img src="https://static-cse.canva.com/_next/static/assets/tetradic-colors.1200x690.fccadf1e4d2ef031edc49c508d2fe2d9.png" alt="Monochromatic Colours">
Tetradic is four colours that are evenly spaced on the colour wheel. As in the analogous combination, this combination works best if you let one colour be dominant and use others as supplementary. Although they make a bold impression, more colours means it is more difficult to balance them all.

## Warm and Cool Colours
The colours of colour wheel can be also divided as warm and cool. Warmness or coolness is known as the temperature of a colour. According to psychology as mentioned above, different colour temperature evokes different feelings.
<img src="https://static-cse.canva.com/_next/static/assets/warm-cool-colors.1200x707.217f638962f8da17d66dc775cc16807a.png" alt="Monochromatic Colours">

The general idea is that warm colours arouse or stimulate the viewer and cool colours make the viewer calm and relax. 

# Three Components of a Colour
You can refer to many different 'colours' as when you say the name of a certain colour. To overcome this, there are three primary factors that help in defining a colour. 
<img src="https://static-cse.canva.com/_next/static/assets/hue-saturation-luminance.1200x707.05679cea2b904bb29845f87e16c1962d.png" alt="Components-of-colour">

### 1. Hue
Hue is defined by the position of the colour wheel, and it represents the name of the colour.  

### 2. Saturation
Saturation defines how saturated (rich) a colour is. Saturation at 100% is the normal state of the colour while 0% can result in just a shade of grey. 

### 3. Brightness (Luminance)
Same as the saturation, this is expressed as a percentage between 0 and 100. 0% brightness of a colour is black and 100% bright is the full colour.
 
# Shades, tints and tones
<img src="https://static-cse.canva.com/_next/static/assets/shade-tint-tones.1200x707.99715a943279b262c99287f9db129c26.png" alt="Shades-tint-tones">
### Shade
Created by adding **black** to base hue and it makes the colour darker. This results in a deeper and richer effect and can be overpowering at times.

### Tint
Created by adding **white** to base hue and results in lighter colour. It decreases the intense and used to balance vivid colour combinations.

### Tones
Created by adding black and black *and* white (or grey) to base hue. Tones may not look lie pastel but can reveal complex characters which were not apparent in the base hue.

# Conclusion
<img src="https://www.freepik.com/blog/app/uploads/2019/08/UXColor.jpeg" alt="colours-in-ui-ux">
This has been just an introduction to the world of colours. However, with the basics in mind, you can explore more combinations and techniques to use colours in your designs to really make an effect on the viewer.