(click anywhere to close)
OPEN MENU

[Colour Theory] Context

category: Design | course: Colour Theory | difficulty:

One of the most important properties of colours – one that people often forget – is the fact that our perception of it changes when placed in a different context. Colour is highly contextual; it may connote positive feelings in one context, but portray the opposite effect in another. Colours carry different meanings across different cultures and people.

For example, white text on a black background jumps out more than black text on a white background. Orange between yellow hues looks less bright than the same colour among red hues. Dark brown surrounded by dark green looks less saturated than when placed in a yellow environment. Certain colours can even change our perception of the size of design elements!

While these differences are subtle, they are important. Changing the surroundings of a colour is not going to change the hue, but rather change perception of saturation and brightness. These can work against you, but you can also use these to your advantage.

However, there are no specific rules for how a colour will behave. Most of it is just trying out different combinations and trying to describe the effect they have on each other.

Shifts in Brightness

ColourContextBrightness

Light colours surrounded by dark ones appear lighter. Dark colours surrounded by light ones appear darker.

A more noticeable, and annoying, concept is that of the slight lightness difference. If you have two colours with only a slight change in lightness, your brain is going nuts over if they are the same colour or not. To solve this, they usually appear more contrasted than they are, but with a subtle, light crisp at the edge; they appear luminous and unstable.

First of all, I forbid you to ever choose two colours that are nearly exact copies. But if it happens, know that when you place these elements in an environment with a huge difference in lightness, these problems are weakened and partially resolved.

These crispy edges can also appear when you put high lightness, high contrast colours together.

And lastly, darker elements are affected more by surrounding elements. Say you create a row of squares with decreasing brightness from white to black, with the same difference in value between each of them. If you place this on a grey background, you will notice that the differences in value between the darker squares appears much greater than that of the white ones.

Shifts in Saturation

ColourContextChroma

Say we have a moderately saturated colour. If we place it on an almost unsaturated background it will appear to have a higher saturation. If we place it on a highly saturated background, it will appear dull.

This shift in Chroma comes with an extra effect: if the contrast is big enough, a change in hue might even be perceived.

Colour Range

The reason colour behaves so differently in different environments, mainly has to do with two things: colour constancy and the afterimage effect.

Color constancy is the phenomenon in which your eye reads two instances of the same colour as being the same colour, despite the fact that one instance is in light, and another is in shade. In other words, our mind determines whether a the colour it sees is affected by its surroundings (light, shadow, reflection), and automatically compensates for it.

The afterimage effect states that looking at something for a few seconds (or longer) makes our visual receptors grow accustomed to it, which means that if you look away you see the opposite colours appearing out of nowhere. This means that as your eyes move around a design, even if they move only a little, they will automatically incorporate aspects of the other colours within their view.

Because of these properties, adding a darker colour to a design would create an overall darker effect, while adding a lighter one yields an overall lighter design. This effect is known as optical mixing, or the Bezold effect. Similarly, colours that don't contrast each other blend together and reduce their impact or function as accent colour.

Knowing that colours appear light or dark relative to each other, we can talk a bit about the colour range of a project. In some cases, a huge range is good, while others require a much smaller one. Adding colours far apart from each other – in terms of darkness/brightness – increases the (typographical and) colour range of a project. On the other and, colours close in value but different in hue create a vibrant yet soft effect; which becomes even softer when analogous colours are used. In the first case, a big range means lots of contrast and dynamics within a design, but can also mean restlessness and chaos. In the second case, a small range means little contrast or difference, but more calm and static designs.

Text over Images

Finding an elegant way to put text over images is often hard. An image contains a lot of different colours, and you can never find one way that works well with all of them. Here’s what you can do:

  • Change the image. You can overlay the image with a slightly opaque white or black rectangle to compress the range of colours to a range of near-neutrals. Then you can put any colour over it.
  • Put the text in a box. Simply putting the text in its own, perhaps slightly opaque, box also removes all the problems. The image is still visible around and underneath it, but the main focus is on the box and its content. A white or black box usually works, but you can use all sorts of matching colours this way.
  • Gradients. If the text is smaller than the image, you can use a gradient from white to transparent (or black to transparent) to only mask the part of the image you need to put the text over (and a bit around it, make it a smooth gradient).

Last Notes

Any effects due to colour context are most apparent in colours that are very close in hue, or are complementary (almost complete opposites of each other when it comes to hue). Any other colour is barely affected by the other colour’s presence, but shifts in brightness and saturation can still occur.

 

CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)