(click anywhere to close)

[Colour Theory] Understanding Colour Triangles

category: Design | course: Colour Theory | difficulty:

Colours are said to be three-dimensional. Therefore, the best way to display the spectrum of ( = all the possibilities of) one colour, is to use a triangle.



Hue = pure colour. Remember that spectrum of visible light we talked about? Well, the hue scale follows exactly that.

At 0° you get the light with the lowest wavelength, which is red. At 360° you get the light with the highest wavelength, which is violet. Setting a value in between those 0 – 360 degrees will get you one of the intermediate colours.

This property is the most absolute of the three properties. No matter the saturation or brightness, a red hue stays a red colour. Neutral colours, such as grey, are achieved when the hue is not (clearly) visible (due to the settings of the other two properties).

Chroma / Saturation

Chroma refers to the purity of a colour. It refers to how strong or weak a colour is. A colour with high saturation has no added black, white or grey. Low saturation means all the hue is gone and it has become black, white or grey. Usually, it's wise to stay around medium levels of saturation. As I already mentioned a few times, the point of greatest saturation is not the same for each colour; each has their own inherent basic level of lightness or darkness, which means the effects of low or high saturation aren't equally visible with every hue.

Desaturated colours are restrained and sombre, while saturated colours are vibrant, intense, exciting and dynamic. Saturated colours attract viewer’s attention, but you should use desaturated colours when function and efficiency of the design are the priority. Desaturated, light colours are seen as friendly, while desaturated, dark colours are seen as formal. Try not to combine highly saturated colours, as they can visually clash with one another.

A value for this is usually set in percentages, 0% to 100%.

Value / Lightness / Brightness

Refers to the light and dark properties of colours. Some colours naturally look brighter (yellow), while others naturally look darker (violet).

A low value colour is usually used for contrast and sometimes background, while colours with high values are used , for the most part, on top or next to each other, to create more aesthetically pleasing designs. Different degrees of value provides a sens of motionin a design, guiding the viewer's eye into, through, and around a visual composition. Additionally, because distant objects appear lighter in the real world, value can create the illusion of depth and space.

Brightness is usually set in percentages, 0% to 100%. Black has the lowest value of all colours, while white has the highest.

Using this Knowledge

Knowing this is great and helpful, but what exactly can you do with it? Well, it helps when creating a colour harmonies, colour schemes and understanding what happens when you put colours in a certain context.

While all these subjects are elaborated on in further chapters, there are still some basic definitions I need to explain here. These have to do with creating variations on a hue, either to get the exact colour you want or to create lighter and darker versions of your main colours.


Shades are darker versions of your hue. You get them by adding black – the more black you add, the darker the shade.

Shades are, as the name suggests, perfect for creating shadow effects. You can also use them as background colour, while the text is coloured in the pure hue. Shades seem to recede into the distance. Their general use, however, is to simulate black in a colourful manner, serving as a neutral.


Tones are slightly different versions of your hue, making the colour look duller or softer. They are created by adding grey – the more grey you add, the more the colour will fade and turn into actual grey.

Tones usually create a vintage, sophisticated or elegant feel, and are easy to use plenty of in designs because they are as neutral as colours get.


Tints are lighter versions of your hue. You get them by adding white – the more white you add, the lighter the shade.

They are usually used to create highlights, or to simulate white in a bit more colourful way and serve as a warm neutral. As opposed to shades, tints seem to pop out of the design, though in a weaker way than warm/cool colours provide this sensation of depth.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk