Section banner indicating the start of a new section. On the right, 7 icons depict the senses: a heart and brain, an eye, a hand, an ear, a nost, a mouth, and an arrow (movement). Chapter 3 banner is purple with the eye icon highlighted.

3.3 Colour Wheel and perceived Colour Relationships

You may be familiar with the concept of a colour wheel, like the one seen in the image below, a model that illustrates a circular relationship between colours (Itten, 1970). In the 17th century (1666), Sir Isaac Newton developed the first colour wheel to represent a system for understanding how colours relate to one another. Since then, many colour systems have been based on this by organizing the spectral colours in a circular array, where red and violet are placed side by side, even though we actually see them at opposite ends of the spectrum.

Itten's colour wheel. A circle with 12 colours surrounds a hexagon with triangle inside. The colours on the circumference of the circle range from yellow to orange to red to purple to blue to green with the tertiary colours in between. There is a triangle centred within a hexagon in the middle of the wheel. The hexagon inside the circle is split into 3 triangular sections. Each of these three triangles points at the secondary colours in the outside circle: green, orange and purple. The triangle at the very centre is split into 3 sections, pointing at the primary colours found in the circle: yellow, red and blue.

Itten’s RYB Subtractive Colour Wheel (1970)

Since then, other colour theorists have developed a range of models to demonstrate relationships among colours such as Goethe’s colour wheel and colour triangle (19th century), Maxwell’s colour triangle (19th century), Munsell’s three-dimensional colour tree (early 20th century), Itten’s colour wheel as seen above (early 20th century), and the Pantone Colour System, which is a current product design industry standard discussed later in this chapter. Colour theory is a vast area of study across disciplines that range from physics to design (Clay, 2009, Hope and Walch, 1990, Fiesner and Reed, 2104). In this section, we focus on applied colour theory that can bring products to life.

Itten’s colour wheel is the most common way we visualize the relationships of the basic colours in design. In his subtractive RYB colour model, seen above, the primary colours are red, yellow, and blue, which we see in the triangular centre area. The three secondary colours, depicted in green, orange, and purple triangles adjacent to the centre, are created by mixing pairs of primary colours. Green is composed of blue and yellow, orange is composed of red and yellow, and purple is composed of red and blue. Six tertiary colours are created by mixing primary and secondary colours, as seen in the models below (Itten, 1970).

Three hexagons side by side. First one has three coloured sections arranged from red, yellow, to blue. The second one has six coloured sections arranged from red, orange, yellow, green, blue, to purple. Third one has 12 coloured sections arranged from red, orange, yellow, lime green, darker green, aqua blue, turquoise, light blue, darker blue, dark purple, lighter purple, to pink.

Primary, Secondary, and Tertiary Colour Models (adapted from Itten)

As you probably know, every designer should understand basic colour theory. Colour system schemes provide a foundation for designers to select appropriate product colour relationships that will enhance a user’s product experience by communicating an aesthetic, emotional, or functional message. You can apply the following colour relationships or colour schemes in the design of products, environments, and interfaces. As you will see, we discuss relationships using an adaptation of Itten’s colour wheel as our foundation.

Monochromatic Colour Schemes

Monochromatic colour schemes are derived from a single base hue that is extended using its shades, tones, and tints. The hue never changes, but the value does. For example, in the image below, each segment depicts a monochromatic colour scheme, where the original hue is in the centre of the segment, the shade is above it and the tint is below it.

Colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices are muted except for one orange slice, highlighting a monochromatic colour combination. The colours in this slice are copied beside the wheel, forming a palette where the original hue is in the centre, shades are above it and tints are below it.

Monochromatic colour wheel

Complementary Colour Schemes

Complementary colours are positioned opposite one another on Itten’s colour wheel: red and green, blue and orange, and yellow and purple. These are derived as a product of partitive colour mixing, where complementary opposites include: yellow and blue-violet, red and blue-green, green and red-violet, and violet and yellow-green (Munsell, 1946). These hue combinations intensify (contrast) each other and catch our eye, often expressing fun or excitement (Clay, 2009). Some key points about complementary colours are that placing two complementary colours side by side creates a brighter image. However, mixing two complementary colours together creates grey.

Colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices except for the green and red slices are muted, highlighting the two complimentary colours. Beside the wheel there is a green square on top of a red square to show the red and green beside each other.

Complementary Colours

Split Complementary Colour Schemes

In addition to the base colour, split complementary colours include the two colours adjacent to the original colour’s complement. This colour scheme has the same strong visual contrast as the complementary colour scheme, but less tension. This relationship is built with one hue plus two others equally spaced from its complement. In the diagram below the split complementary colours for green are orange/red and red/blue.

Colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices are muted except for 3 slices: green, orange/red, and red/blue. This highlights a split complimentary colour combination, shown in a split complimentary colour palette beside the colour wheel.

Split Complementary Colours

Analogous Colour Schemes

An analogous colour relationship includes a colour combination of three colours located adjacent to each other on a colour wheel. The analogous colours in the example below range from blue to indigo. Analogous colour schemes provide visual harmony.

Colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices are muted except for a section of 5 slices next to eachother, starting at a blue and going to a violet-blue. This highlights an analagous colour combination, shown in a colour palette next to the colour wheel.

Analogous Colours

Triad Colour Schemes

A triad colour combination includes three colours that are at an equal distance from each other on the colour wheel. They are perceived as stimulating and enhancing each other, as with the triad colour combination of green, violet, and orange below.

Colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices are muted except for 3 slices evenly spread out around the circle: green, violet, and orange. This highlights a triad colour combination, shown in a colour palette next to the colour wheel.

Triad Colour Combination

Discordant Colour Schemes

Discordant colours are widely separated on the colour wheel (but not complementary or triadic). Discordant colours can be eye-catching and/or visually disturbing. They deliberately break from harmonious schemes and can be said to clash or fight against each other. They are often used as attention-getting devices in advertising. For example, the red font on the violet magazine cover below is a discordant colour combination that has recently become rather fashionable.

On the left is a colour wheel with 6 rings circling around its centre, where each ring gets darker as it gets closer to the outside of the circle. The slices of the colour wheel are yellow, orange, red, purple, blue, and green. All slices are muted except for 2 slices: red and violet. This highlights a discordant combination, shown in a colour palette next to the colour wheel as well as an example of a magazine cover. The magazine cover's title, Home and Garden, is more difficult to read as it is written in red over a purple gradient background.

An Example of a Discordant Colour Scheme

Warm/Cool Contrast Colour Schemes

Itten divides the colour wheel into warm and cool hues. He associates warm colours with the ability to conjure up vivid and energetic perceptions. They include violets to yellows and may send us a semantic message, reminding us of the summer, sun, or fire. On the other hand, he associates cool colours with communicating the message of calm, or soothing. They include greens to violets and may remind us of spring, ice, or water.

The first of three diagrams shows a colour wheel representing warm and cool colours. The wheel is split on a diagonal by a black line with the top part of wheel showing warm colours from violet to red to orange to yellow. The word Warm is written inside this half of the wheel. The bottom part of wheel shows cool colours from green to blue to purple. The word Cool is written inside this half of the wheel. The second diagram shows 2 hexagons interlocking. The hexagon on the top is different shades of blue to show a cool colour palette, and the hexagon on the bottom fades from orange to pink to yellow to show a warm colour palette. The third diagram shows two square grids: one that is warm-toned with orange and pink colours, and one that is cool-toned with green and blue colours.

Warm red/yellow and Cool blue/green colour schemes

White, black, and grey are neutral. However, you can make colours (hues) ‘cooler’ or ‘warmer’ by playing with the vividness or colour saturation, as discussed earlier. For example, a warmer or cooler version of a blue may be manipulated by levels of saturation. There can also be warm or cool whites and greys depending on the variation of undertones mixed with the base hue. For example, a blue undertone contributes to a perception of coolness, whereas a yellow undertone contributes to a perception of warmth.

On the left, a transparent water bottle with a green lid and a blue filter inside the bottle. Beside the water bottle, there is a green, blue and white hexagon representing a cool colour scheme. On the right, there is a metal drinking thermos with a red strip on top of a purple strip as detailing. Beside the thermos there is a red, purple and silver hexagon representing a warm colour scheme.

Cool Colour Palette (left) and Warm Colour Palette (right)

The first example above is a cool colour scheme or combination symbolizing refreshing cold water (blue = water) in the context of nature (green). By contrast, the second example is a warm colour scheme, with deep reds and violets symbolizing the comforting warmth of the hot drink inside.

Architects and interior designers depend on colour relationships to create a perception of depth in environments. Clay (2009) notes that warm colours (yellow, red, orange) tend to be perceived as enlarging areas or volumes whereas cool colours (blue, violet, green) reduce their perceived size, as seen in the images below. That is because warm colours generally appear to advance (to be closer to you) and cool colours appear to recede (appear to be farther away from you).

On the left is a purple circle with a yellow hexagon in the middle. On the right is a yellow circle with a purple hexagon in the middle. Both hexagons are the same size, but the yellow one looks larger than the purple one.

The centre shapes are the same size, but the warm yellow shapes appear larger in both cases: the warm yellow advances, the cool violet recedes

Colour contrast is often used to amplify the effects of coloured elements next to one another in a composition. For example, warm hues combined with cool ones or light tones next to dark tones may draw the viewer’s eye to the place where the contrast is the greatest, as discussed below. Even a small area of strong colour contrast could have a positive impact on the overall appeal of the composition. Many effective colour schemes depend on an unequal proportional distribution of colour – a large area of one colour adjacent to a small area of a contrasting colour, like in the images above where the small centre colour is in the middle. Other proportional distribution colour schemes follow below.

Contrast of Extension Colour Scheme

Combining warm and cool colours can also add to the contrast of the composition, creating the desired colour accent. For example, placing small areas of light colour on a dark background, or a small area of dark on a light background will create a colour accent. When you are exploring contrasting colour relationships, experiment with colour combinations as well as proportions to achieve a colour accent. For example, as you explore the ratio of areas of a warm colour to those of a cool colour you may achieve a suitable accent, as seen in some examples below. This colour principle is often applied in product design to highlight elements that users will interact with, like placing a strikingly red stop/start button against a less saturated green background, which minimizes the background or less important elements.

4 diagrams illustrate Contrast of Extension concept. The first has 4 horizontal colour bars stacked atop one another. The top bar is titled Highest Warm/Cold Contrast and has large red sections contrasting small blue sections. The second bar is titled Inversion of Proportions and has large blue sections contrasting small red sections, which is harder to look at than the previous bar due to the colour ratio. The bottom bars show two colour palettes, both starting with violet. The first goes from violet to blue, showing that violet is warmer than blue. The second goes from violet to red, showing that violet is cooler than red. The second disagram is titled Contrast of Extension and has 3 rectangles stacked on top of one another. Top rectangle is 1/3 yellow and 2/3 purple. Middle rectangle is slightly less than 1/2 orange and slightly more than 1/2 blue. Bottom rectangle is 1/2 red and 1/2 green. The third diagram is titled Primary & Secondary Colours in Harmonious Proportion and shows a colour wheel with colours yellow, orange, red, purple, blue and green. All colours take up varying amounts of space in the wheel, with yellow taking up the least space, followed by orange, red and green (about the same), blue and purple (about the same). The fourth diagram has two 5x5 red and green grids. The first grid is titled Equal Amounts of Red and Green and has the two colours in a checkered board. The second grid is a green square with 7 small red squares scattered inside. This grid is titled Bit of red, lots of green! Red is highly active.

Examples of Contrast of Extension (ADAPTED FROM Itten)

Simultaneous Contrast Colour Scheme

Simultaneous contrast can also be called colour modification because identical areas of hue or tones can be perceived differently relative to surrounding or adjacent colours, as we saw in the yellow/violet examples earlier. For example, if large areas of light hues are used, the whole area will appear light; if large areas of dark values are used, the whole area appears dark. Colours can also be modified by their neighbouring colours. For example, in the coloured hexagons below, the grey element can be perceived as a different value in relation to each of the different background colours (a neutral grey appears slightly green next to pink). On the music player below, the value contrast of the white is perceived differently in relation to each of the backgrounds. The contrast is more pronounced on the vibrant blue or yellow than on the silver device.

6 hexagons side by side create a pyramid shape. Top row has 3 hexagons: one yellow, one orange, and one green. Second row has 2 hexagons: one blue and one pink. Bottom row has 1 purple hexagon. Each hexagon has a small grey hexagon in the centre. To the right of the pyramid are 3 music devices, one in front of the other. The one in the back is grey, the one in the middle is yellow, and the one in the front is blue.

Simultaneous Contrast Colour Schemes affect overall perceptions

Zing Colour Scheme

Zing refers to a small patch of highly concentrated colour amidst less saturated colours or greys. It is often used to attract attention or feature important elements in a product.

4 sections with 4 squares in each section make up one larger square. Each section shows a different example of colour combinations that create Zing. All four squares in the top left section are light grey. The top left square has a smaller white square in the centre, with a smaller yellow square in its centre. The top right square has a smaller black square in the centre, with a smaller yellow square in its centre. The bottom left square has a smaller white square in the centre, with a smaller pink square in its centre. The bottom right square has a smaller black square in the centre, with a smaller pink square in its centre. All squares in the top right section are different colours. The top left square is light pink and has a smaller yellow square in the centre, with a smaller light pink square in its centre. The top right square is green and has a smaller yellow square in the centre, with a smaller green square in its centre. The bottom left square is purple and has a smaller yellow square in the centre, with a smaller purple square in its centre. The bottom right square is orange and has a smaller yellow square in the centre, with a smaller orange square in its centre. All squares in the bottom left section are different colours. The top left square is orange and has a smaller dark pink square in the centre, with a smaller orange square in its centre. The top right square is lime green and has a smaller dark pink square in the centre, with a smaller lime green square in its centre. The bottom left square is blue and has a smaller dark pink square in the centre, with a smaller blue square in its centre. The bottom right square is hot pink and has a smaller dark pink square in the centre, with a smaller hot pink square in its centre. All squares in the bottom right section are different colours. The top left square is yellow and has a smaller purple square in the centre, with a smaller yellow square in its centre. The top right square is black and has a smaller purple square in the centre, with a smaller black square in its centre. The bottom left square is burgundy and has a smaller purple square in the centre, with a burgundy square in its centre. The bottom right square is turquoise and has a smaller purple square in the centre, with a smaller turquoise square in its centre.

The Zing of bright patches of colour attract the eye (ADAPTED FROM Itten)

Purple water gun with yellow accent parts.

Zing attracts attention to product features

This is where more complexity can contribute to an interesting product colour palette, which we discuss later. To attract attention, a small amount of one colour, which could be an accent colour, can be applied to create contrast with a larger area of another background or surrounding colour.

Flicker effect 

The flicker effect creates an illusion of independent movement, where two colours that are very similar in tone, but otherwise different in hues (colour) are placed beside or close to each other. This can create the optical illusion of movement or hovering.

On the left is a turquoise bike helmet with randomly-spaced purple squiggly lines that follow the curved contour of the surface. On the right is a lime green square with blue ovals in different sizes scattered all over its surface.

The Flicker effect creates an illusion of movement

 

Activity Time!

Look at the following images. Take some time to reflect on the colour relationships applied to each sneaker below. See if you can match each colour scheme name to its appropriate sneaker.

THE SAME PRODUCT CAN APPEAL TO DIFFERENT USERS BY APPLYING VARIED COLOUR SCHEMES

 

License

Icon for the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

Sense-It!: Insights into Multisensory Design Copyright © 2023 by Lois Frankel, PhD & the Sense-It! Team is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License, except where otherwise noted.

Share This Book