DESIGN PRACTICE BLOG: Design Principles: Colour Theory

CHROMATIC VALUE =

HUE
+
TONE (LUMINANCE)
+
SATURATION

Chromatic value is describing a certain colour. Each colour is made up of different elements that make it look a certain way. Hue, tone and saturation all come together to make a certain colour.

The contrasts below are all elements of each colour, too.

Contrast of TONE
Contrast of HUE
Contrast of SATURATION
Contrast of EXTENSION
Contrast of TEMPERATURE
COMPLEMENTARY contrast
SIMULTANEOUS contrast

Contrast of TONE

It is formed by the juxtaposition of light and dark values. This could be monochromatic.

Tone deeply affects how type is perceived. The higher the contrast, the more readable the word is against the background.

Above, the word is too similar in tone to the background, so it isn't as clear. The black word is the most readable against the grey, because they are opposites on the colour wheel, so they compliment eachother with a nice balance of contrast that isn't too high or too low.

Coming back to colour, the same still applies.

Orange is too near red on the colour wheel, so they clash, making reading the word difficult and quite unpleasant.

The word definitely stands out, but too much, making the blue pop out in a very extreme, unpleasant way. The right balance for a red background would be a green colour.

Contrast of HUE

Formed by the juxtaposing of different hues. The greater the distance between hues on a colour wheel, the greater the contrast.

Its quite hard to distinguish between the colours when the bright white is in the background, as the contrast is so high.

The black makes the colours easier and more pleasant to look at as the darkness works well with the brightness of the blue, yellow and red.

Having no space in between the colours makes for a more pleasant experience, as the contrast has been toned down and there is less to focus on.

The yellow word is the hardest to read because it is too light in hue against the white. The blue reads best as the contrast is highest.

It is the opposite on the black background; yellow is the most readable.

Yellow is the most readable on a red background.

The blue word is the most readable, which is surprising because it is on a blue background but it shows that high contrast isn't always suitable.

Contrast of SATURATION

Formed by the juxtaposition of light and dark values and their relative saturations.

Contrast of EXTENSION

Formed by assigning proportional field sizes in relation to the visual weight of a colour. Also known as the contrast of proportion.

Lighter colours are usually used more than darker colours are when used together.

Contrast of TEMPERATURE

Formed by juxtaposing hues that can be considered 'warm' or 'cool'.

These colours are all extremely similar when put next to each other, but when separated are completely different. Our eyes adapt to the colours and changed how we see them; we create a gradient that helps us determine between different colours that are touching. It can be seen below with and without separators: