Home :
Tutorials
What Is Colour Theory
Added by
Stuart Humphreys
on
03 January 2012
What is colour theory?
Colour Theory Terminology
COLOUR: described by three characteristics, hue, value and intensity.
HUE: the name of a particular colour, for example blue, yellow, red etc.
VALUE: the relative lightness or darkness of a colour.
INTENSITY: also known as chroma or saturation. The purity of a colour which determines its relative brightness or dullness.
TINT: colour with white added.
TONE: colour with grey added.
SHADE: colour with black added.
NEUTRAL GREY: a balanced combination of white and black.
Colours
Primary Colours: Red, yellow and blue.The basic colours that cannot be mixed from other colours.
Secondary Colours:Orange, green and purple. The 3 colours made by mixing the 3 primary colours.
Tertiary Colours: These are the six colours made by mixing a primary colour to a secondary colour.
Warm Colours: Also known as advancing colours, these include reds, oranges and yellows.
Cool Colours: Also known as receding colours, these include greens, blues and purples.
Colour theory can be many things, far too many things to talk about here. There are however three main areas of colour theory that are useful in web design, these are: The Colour Wheel, Colour Harmony and Colour In Context.
The Colour Wheel
A colour wheel is as simple as it sounds, a wheel of colour. More specifically a wheel based on the primary colours, red yellow and blue. (Primary colours or base colours are those colours that cannot be made by mixing other colours.) It is widely believed that the great man of science, Sir Isac Newton, first developed the basis of the colour wheel that we see today around 1666. There are of course and perhaps always will be differences of opinions over the format of one colour wheel over another that have scientists and artists arguing until they’re blue in the face. This is simply another reminder that art is always a personal opinion and is always in the eye of the beholder.
A colour wheel can be as represented in 3 basic forms. Primary colours, secondary colours and tertiary colours.
When we’re thinking about colours used in paint and pigments we always start with the primary colours. Primary colours are the 3 colours, red, yellow and blue, that cannot be mixed or formed by any other combination of colours. All other colours can however be mixed from these 3 colours.
The next level of colour wheel is a 6 colour wheel, or secondary colour wheel. These colours include the 3 primary colours, red, yellow and blue, along with 3 new colours, green orange and purple. Green mixed from blue and yellow, orange mixed from yellow and red, and finally, purple mixed from blue and red.
The final level of basic colour wheel is a 12 colour or tertiary colour wheel. Tertiary colours are those produced by mixing primary colours and secondary colours. This is also why the hue produced has a 2 word name. Tertiary colours include; yellow-green, blue-green, blue-purple, purple-red, red-orange and yellow-orange.
Colour Harmony
Harmony, what is it? Harmony can have a number of different meanings to an individual but at its core harmony is defined as a consistent, orderly, or pleasing arrangement of parts. This could be the best drum and guitar solo in a single track that you’ve ever heard to the perfect meshing of a finely engineered gearbox. In a colour theory application, harmony is as simple as something that is pleasing to the individual's eye.
The correct use of colour harmony can have the side effects of drawing a viewer into a piece, creating a natural ordered visual experience sometimes without the user being away of it. In particular when thinking about website design there can be 2 ends of a non-harmonious spectrum, a layout that is non-harmonious can either be boring or chaotic that causes the viewer to switch off and move on. At one end of the scale we have the down right boring layout that so under stimulates the viewer that their brain simply shuts off. At the other end of the scale is a layout that is so chaotic that the viewers brain literally screams at them to turn it off as they’re unable to process and order all the information flooding in at once. A harmonious layout and colour scheme presents information being offered as a logical flow fast enough to engage but slow enough to not overload the viewer. So to answer the original question, colour harmony is somewhere in the middle of the extreme cleanliness of a new pallet and utter chaotic mess that resembles a paintball target.
So if colour harmony is so difficult to find how do get anywhere near close?
There are literally thousands of different theories for colour harmony. After all, artistic reflection is in the eye of the beholder, however there are 2 basic theories that produce something close to resembling a scientific formula for producing a harmonious colour scheme.
1. The ANALOGOUS colour scheme
Analogous colours are any three colours which can be found side-by-side on a tertiary colour wheel, or 12 colour wheel. For example yellow-orange, orange and red-orange. Its more often than not the case that in this kind of colour scheme one colour becomes dominant greatly affecting the other 2. For example in the colours mentioned above this colour will most likely be orange, with yellow-orange and red-orange providing a highlight and shade respectively.
2. The COMPLIMENTARY colour scheme
This is perhaps the most simple of colour schemes to achieve. A set of complimentary colours are any 2 colours that appear directly opposite each other on a colour wheel, for example green and red or blue and orange. Complimentary colour schemes are often paired with other complimentary colour schemes to increase the range of colours used and move out of the boring danger zone on the harmonious colour scale. Although relatively simple to achieve a complimentary colour scheme is often used where maximum contrast is required in a design.
Colour In Context
Simply choosing a colour scheme is often only half the battle. Careful consideration when designing a colour scheme for a website needs to be given to the context in which the colours will be placed. Why is this something we need to think about when every monitor in the world will display a colour differently? This is true however the colour difference between monitors is only very slight in most cases, the changes in colour has much more to do with the way our eyes interpret the colours, consider the example of a red circular logo, when red’s are placed onto different colours there is a noticeable change in the intensity of the red. When placed on a black background the red will appear quite vibrant and strong, whereas when placed on a white background the red will appear washed out and slightly darker. This colour shift doesn’t simply occur with black and white. For example using our red logo again if we place it onto a background of a colour close to it on a colour wheel, say orange, the red will appear very flat and dull, whereas if we place the logo onto a complimentary colour such as light blue the red will appear almost brighter. This shift in intensity isn’t the only optical illusion that occurs when using the examples above, when placed on the black background the red logo will also appear slightly larger than the other examples due to its apparent shift in strength.
If these effects are not considered when we’re designing a website layout, extra colours can start to creep into the design moving the end result away from the intended design.