15 Ways to change your perception of colour theory in web design.
Colour theory is an essential skill for a web designer + a strong knowledge of these systems is imperative to create beautiful designs. We must consider how to use colours not just visually but psychologically too. In this article, I take an in-depth study of structured + methodical processes that approach a constantly evolving existence of colour. Colour comes in varying degrees of brilliance, it can be vibrant, calming, complementary + harmonious. They offer us a passage through time as they present a constant reminder contentment can be found in the simplest of things.
Observing the effects colours have on each other is the starting point for understanding the relativity of colour. The relationship of values, saturations + the warmth or coolness of respective hues can cause noticeable differences in our perception. It is important to question our surroundings + I love the age-old question: “Do we all see colours in the same way? Is my red the same red as it is for you?” This inquisitiveness represents colour in many ways, as it is something we all take for granted but it is one of life’s small pleasures that makes our dimension a very beautiful place.
*All graphics we designed by Alex Mango.
01. Colour vision is mind-boggling
What is a colour? In 1666 Sir Issac Newton built his scientific theory on physics, sunlight + certainty. He presented the theory that colour is a feature of light, + his findings were documented when he sliced white light into a rainbow using a chunk of glass. According to physics, a colour is just a unique wavelength of electromagnetic radiation in one narrow part of the spectrum. Of the light that humans can see; violet has the shortest wavelength + red has the longest.
02. Colour is light
Colour is a physical quality of light itself + is not dependent on human perception. The retainers in our eyes have photoreceptor cells that absorb photons + send electrical pulses down our optic nerve. Each type of photoreceptor picks up different ranges of light; short, medium + long, then compares these overlapping signals of different sensitivities. Our visual system can then tell individual colours apart depending on their frequency. The way we perceive colour is a combination of the RGB spectrum, which is the combination of three types of light; red, green + blue, + then various combinations make up all other colours.
03. Catagorising Colour
Based on his findings (point 1) Sir Isaac Newton developed the first colour wheel in 1666. The idea can be broken down into individual categories; primary, secondary + tertiary.
Primary Colours - In traditional paint pigments primary colours are the 3 colours that cannot be formed by any combination + cannot be reproduced.
Secondary Colours - Combining two of the primary colours generates these secondary hues.
Tertiary Colours - These are the colours formed by mixing a primary + a secondary colour. That’s why the hue is a two-word name, such as blue-green, but informally can be referred to as a colour like turquoise.
04. Color Harmony
Once we can actualise a full wheel that contains all the colours visible to the human eye we can physically see where they sit in relation to each other. At this point, we understand that colour + how they interact with each other is a scientific process based on order. This colour chart is almost like analysing the guitar neck in music theory; when you know where all the notes are, you can determine which notes will go together based on a methodological process.
Complementary schemes are based on two colours from opposite sides of the colour wheel. Impact is generated due to the two hues being contrastingly different, resulting in a very maximalist pairing.
06. Split Complement
A split complement utilises the same contrast as the complementary method by choosing one base colour in addition to two colours that sit on either side of the direct complement.
For a harmonised selection of colours an analogous scheme relies on a sequential combination. The overall theory is that if the hues are next to each other on the wheel, then they can sit next to each other with a nice level of consistency.
Triadic colours are evenly spaced around the wheel + tend to be very bright; creating a visual contrast + harmony simultaneously, making each item stand out while making the overall image pop.
The square is almost like a double complement as it consists of 4 colours evenly spaced around the wheel. Personally I rarely use this method, as it propels 4 highly contrasting colours in one space eliminating space for softer pairings.
Saturation describes the intensity of a colour. Increasing saturation makes the colour richer + darker while reducing saturation makes it look faded and lighter. When we say “light purple” or “dark purple,” we’re describing changes in saturation.
11. Are Black + White colours?
The answer to this is actually quite complicated + depending on whether you are recognising findings in physics or chemistry the answer is somewhat subjective. If you are thinking of colour in CMYK as pigment or molecular colouring agents, black is made by combining all three primary colours (red, yellow + blue). Whereas white would be the negative space on the page. Realistically the CMYK definition of black can be disregarded as the absolute hexadecimal of #000000 is impossible in this medium. Based on the research presented in this article, specifically; Issac Newton’s theory that colour is a feature of light + the RGB spectrum it would inadvertently suggest that black is not a colour since its existence is due to the absence of light. Based on the same findings it would suggest that white is a combination of all colours, therefore definitively making it a colour.
12. Shade, Tint + Tone
The darkness or lightness of colour depends on the amount of light passing through the pigment + this can be adjusted using shade, tint + tone. A tint is a hue to which white has been added: shade black + tone grey. For example, red with additional shading creates burgundy. These are applied to the original hue to make the colour appear more subtle or less intense.
13. Psychology + Colour
How do colours affect moods? While perceptions of colour are somewhat subjective, some effects have universal meaning; Colours like red, orange, + yellow are usually regarded as warm colours. Psychologists believe warm colours evoke emotions ranging from feelings of warmth + comfort to feelings of anger, passion + hostility. In contrast to this hues within the blue spectrum are known as cool colours. These colours are often described as calm + relaxing but can also call to mind feelings of sadness or indifference. Green also has similar connotations as blue since there are crossovers in hues, but generally speaking mid-tone greens are usually regarded as natural, also invoking feelings of health, life + freshness.
14. Colour + Culture
No colour actually means anything stripped of its context and history. Colour is a coded system, one that varies in different societies, so to be nomadically curious and inspired by the spontaneity of other cultures.
Just like most elements of the world that we interact with how we personally feel about colours is up to interpretation as well as cultural traditions, for example; red in China symbolises luck, joy, + happiness. Red is the traditional colour worn by Chinese brides, as it is believed to ward off evil. In North-West Africa women put on a black dress after 7 days of marriage to tell the world of their changed status. In Japan, pink has a masculine association: the term ‘hanami’ used to describe the viewing of the blooming of the pink + white blossom on cherry trees are said to represent the Samauri, young warriors who fell in battle like the blossoms.
15. What is reality?
If you look at the image below you may perceive the strawberries as red, however, they are actually grey. This illusion was created by a Japanese researcher called Akiyoshi Kitaoka + it hinges on something called colour constancy. This is a visual phenomenon where the colour of an object seems to stay more or less the same regardless of the lighting conditions of which you see it or the lighting condition that your brain thinks it is seeing.