COLOUR THEORY

Colour theory is both the science and art of using colour. It explains how humans perceive
colour; and the visual effects of how colours mix, match or contrast with each other. Colour
theory also involves the messages colours communicate; and the methods used to replicate
colour.
Why study colour theory?
If you are involved in the creation or design of visual documents, an understanding of colour
will help when incorporating it into your own designs. Choices regarding colour often seem
rather mystical, as many seem to base decisions on nothing other than "it looks right."

COLOUR BASICS
Light is composed of many colours—those we see are the colours of the visual spectrum: red,
orange, yellow, green, blue, and violet. Without light there’s no colour. White light contains
all the visible spectrum colours. It means that these colours together, make the white light. The
light from the sun, for example, is a white light. We can see that sunlight is made from all the
colours in the rainbow, when the sunlight is decomposed.

How the light and colours work?

The white light from the sun reaches the object. All the colours are absorbed, except the red
(for a red apple) and red is the colour that we see. Objects absorb certain wavelengths and
reflect others back to the viewer. We perceive these wavelengths as colour.
A colour is described in three ways: by its name, how pure or de-saturated it is, and its
value or lightness. Although pink, crimson, and brick are all variations of the colour red, each
hue is distinct.

A colour is described in terms of three features (or properties)

Hue: The property we use to name the colour.
For example: red, green, blue, yellow brown
etc.

Saturation The degree of purity of a hue. It measures

( Chroma): purity of a hue in relation to addition of
gray. Desaturated colours tend to look grey

Luminance The brightness or dullness of a hue. One

(Brightness/ may change the intensity by adding white or
Intensity/ black. It is a measure of the amount of light
Value): reflected from a hue. Those hues with a high
content of white have a higher luminance or
value.

1
Colour is perception. Our eyes see something (the sky, for example), and data sent from our
eyes to our brains tells us it’s a certain colour (blue). Objects reflect light in different
combinations of wavelengths. Our brains pick up on those wavelength combinations and
translate them into the phenomenon we call colour. People decide whether or not they like a
product in 90 seconds or less. 90% of that decision is based solely on colour. So, a very
important part of design is colour.

COLOUR SYSTEMS
Colour systems are dependent on the medium with which a designer is working. When
painting, an artist has a variety of paints to choose from, and mixed colours are achieved
through the subtractive colour method. When a designer is utilizing the computer to generate
digital media, colours are achieved with the additive colour method.

Subtractive Colour
When we mix colours using paint, or through the printing process, we are using the subtractive
colour method. Any colour you see on a physical surface (paper, signage, packaging, etc.) uses
the subtractive colour mixing model. Most people are more familiar with this colour model
because it’s what we learned in kindergarten when mixing finger paints. In this case,
“subtractive” simply refers to the fact that you subtract the light from the paper by adding more
colour. Subtractive colour mixing means that one begins with white and ends with black; as
one adds colour, the result gets darker and tends to black.

Traditionally, the primary colours used in subtractive process

were red, yellow and blue, as these were the colours painters
mixed to get all other hues. As colour printing emerged, they
were subsequently replaced with cyan, magenta, yellow and
key/black (CMYK), as this colour combo enables printers to
produce a wider variety of colours on paper.

The CMYK colour system is the colour system used for printing. Those colours used in
painting—an example of the subtractive colour method.

Additive Colour
If we are working on a computer, the colours we see on the screen are created with light using
the additive colour method. Humans see colours in light waves.
Mixing light—or the additive colour mixing model—allows
you to create colours by mixing red, green and blue light
sources of various intensities. The lighter you add, the
brighter the colour mix becomes. If you mix all three colours
of light (RGB), you get pure, white light. TVs, screens and
projectors use red, green and blue (RGB) as their primary
colours, and then mix them together to create other colours.

2
Additive colour mixing begins with black and ends with white; as more colour is added, the
result is lighter and tends to white. The RGB colours are light primaries and colours are created
with light. Percentages of red, green, & blue light are used to generate colour on a computer
screen.

Significance of additive colours namely RGB and subtractive colours namely CMYK in
Multimedia Design
The Visible spectrum consists of billions of colours, a monitor can display millions, a high
quality printer is only capable of producing thousands. Reproducing colour can be problematic
with regard to printed, digital media, because what we see is not what is possible to get.
Although a monitor may be able to display 'true colour' (16,000,000 colours), millions of these
colours are outside of the spectrum available to printers.
Since digital designs are generated using the RGB colour system, colours used in those designs
must be part of the CMYK spectrum or they will not be reproduced with proper colour
rendering. Working within the CMYK colour system ensures proper colour rendering.

COLOUR WHEEL
A colour wheel (also referred to as a colour circle) is a
visual representation of colours arranged according to
their chromatic relationship. The first colour wheel was
designed by Sir Isaac Newton in 1666. Artists and
designers use it to develop colour harmonies, mixing and
palettes. The colour wheel consists of three primary
colours (red, yellow, blue), three secondary colours
(colours created when primary colours are mixed: green,
orange, purple) and six tertiary colours (colours made
from primary and secondary colours, such as blue-green
or red-violet)
Begin a colour wheel by positioning primary hues equidistant from one another, then create
a bridge between primaries using secondary and tertiary colours.

Primary Colours: Primary colours are those colours that

cannot be created by mixing other colours. The colour
wheel consists of three primary colours (red, yellow,
blue).

3
Secondary Colours: Secondary colours are those
colours achieved by a mixture of two primary colours.
The colour wheel consists of three secondary colours
(green, orange, purple)

Tertiary Colours: Those colours achieved by a mixture

of primary and secondary hues. The colour wheel
consists of six tertiary colours (such as blue-green or red-
violet)

Complementary Colours: Those colours located

opposite each other on a colour wheel. Red and green, for
example. Because there’s a sharp contrast between the two
colours, they can really make imagery pop, but overusing
them can get tiresome. Using a complementary colour
scheme offers sharp contrast and clear differentiation
between images.
Analogous Colours: Those colours located close
together on a colour wheel. Red, orange and yellow, for
example. When creating an analogous colour scheme,
one colour will dominate, one will support and another
will accent. Analogous colour schemes are pleasing to
the eye.

Active & Passive Colours (Warm & Cool)

The colour wheel can be divided into ranges that are visually active or passive.
Active or Warm colour Passive or Cool colour
Warm colours are generally associated with Cool colours are often identified with
energy, brightness, and action calm, peace, and serenity.
Active colours will appear to advance when Passive colours appear to recede when
placed against passive hues. positioned against active hues.
All the warm colours (red/violet, red, Cool, low saturated, dark value hues are
red/orange, orange, yellow/orange, yellow) are "passive" and visually recede. All the
advancing colours - they appear to come cool colours (green, blue/green, blue,
towards you. Most often warm, saturated, light blue/violet) are receding colours - they
value hues are "active" and visually advance. appear to go away from you.

4
Some colours remain visually neutral or indifferent.

COMPLEMENTARY COLOURS
We look at a colour wheel to understand the relationships between colours. The colours that
are positioned opposite one another are complementary colours. To call those hues in direct
opposition to each other "complements of each other" is appropriate. Complementary colours
bring out the best in each other. When fully saturated complements are brought together,
interesting effects are noticeable. This may be a desirable illusion, or a problem if creating
visuals that are to be read. For example, if Red and Green which are complementary colours
are used together such that we have red text on a green background, the text starts vibrating
and it is difficult to read.

AFTER IMAGES
Colour is light and coloured objects absorb and reflect different colours (also called
wavelengths). Light & colour are seen by the human eye because of the two types of
photoreceptor cells - rods and cones - located in the retina of the eye. Rods are sensitive to light
and dark; cones are sensitive to red, green & blue light and responsible for colour vision. These
photoreceptors convey the colour of light to our brain.
When our eyes are exposed to a hue for a prolonged period, the rods & cones become fatigued.
You might notice this if you are reading something on coloured paper, and then look away—
you often see the inverse, or complement, of the image also called after image. This occurrence
can be advantageous if you are seeking the opposite, or contrast, of a colour. This may be
disturbing to a viewer if presented with prolonged exposure to coloured screens or reading
materials. People see the opposite colours or a negative image because staring at one colour for
an extended period will fatigue the eyes rods & cones. There is some constancy with after
images as people see images within the same general hue families.

COLOUR COMBINATIONS
Color harmony is the base of any design and artwork because designers use these color
relationships to convey messages and create a particular look or feel. Color harmony is a basic
color theory technique for combining colors. Colour combinations may pass unnoticed when
pleasing, yet offend dramatically when compositions seem to clash. Planning a successful
colour combination begins with the investigation, and understanding, of colour relationships.
Using a colour wheel and a template, the relationships between colours are easy to identify.
Color harmony relationships are usually determined by the color wheel. Every design has a key
color, which can either be intentional or by necessity. Key color is the most important color of

5
our design. It’s the color we can’t change or the color of the element we want to draw attention
to. For instance, if we are doing product photography for Tide detergent, which is orange. In
this case, our key color is orange because we can’t change that. We need to know our key color
before we can determine color harmony. This will be our starting point.
The key color is the main color that an artist chooses for their artwork. It can be a primary,
secondary, or tertiary color. It is the color that we want to concentrate on in our creations. Once
an artist has chosen their key color, with the help of technical tools, they can identify possible
relationships to other colors.
Some of the main colour harmony relationships are as follows:
Monochromatic Relationship: Colours that are shade or tint
variations of the same hue. This harmony is achieved by a single
color and its different variations. Monochrome relationships force
us to play with shapes and textures more creatively. The result is
a complex and rich design very different from the common
misconception that monochromatic color harmonies are dull and
lifeless. When choosing this color schemes, make sure to add
enough contrast in the shades to create visual interest. Use
patterns and texture–they will add depth to your design. This color
harmony is vibrant and eye-pleasing.
Complementary Relationship: Complementary color schemes
are the most basic of all harmonies. They’re often used in the
world of design because of their simplicity. Put simply,
complementary pairs are colors positioned on opposite ends of the
color wheel (or color circle), and they can be either primary,
secondary, or tertiary colors. These color combinations create
vibrant color palettes with high contrast. While that’s desirable in
a number of designs, it can be jarring if not appropriately
managed. For instance, text and background in complementary
colors are tough to read and should be avoided.
Split-Complementary Relationship: Split complementary
combinations are slightly more complex than complementary
colors because they have three hues. The simplest split
complementary color schemes have one key color and two colors
adjacent to that key color’s complement. Because of that, this
color harmony has a vibrant contrast that is generally easy to use.
Beginner artists and graphic designers often gravitate toward
these types of combinations as they start to branch out into more
complex color schemes since they’re approachable and intuitive.
Beyond that, split complements work exceptionally well with
artwork since it gives you enough colors to work with. Also, it’s
easy to understand how to use them: use the two base colors for
most of the artwork and the accent color for accents.

6
 Double-Complementary Relationship: Double Complementary
have four individual colors: a key color and three more colors, all
equidistant from the key color on the color wheel. It is also called
Tetradic color schemes. This color harmony consists of two
complementary color pairs. Like any complementary scheme with
a wide range of colors, the result is a vibrant palette rich with
contrast. It is one of the boldest, most vibrant color schemes.
These should be used judiciously and with caution. If applied with
an unpracticed hand, this color harmony can look aggressive and
even a little nervous. To avoid that, let one color dominate,
balance the use of warm colors and cool colors wisely.
Analogous Relationship: The analogous color schemes consist
of three hues, all positioned next to each other on the color wheel.
They usually consist of one dominant color, then a supporting
color. The third color can be the first two colors blended together
or an accent color that pops. Analogous color schemes are
widespread in decorating and interior design. These color
harmonies tend to be eye-soothing and have a sense of visual
cohesion without being too flat, overwhelming, or
monochromatic. It is important to have enough contrast when
choosing analogous color scheme. When employing an analogous
color scheme, stick to the 60-30-10 rule to maintain a visually
appealing balance. Also, stick to warm or cool colors because
your design will give a sense of cohesion and harmony by using
only one color temperature.
Triad Relationship: Triadic color combinations consist of three
colors evenly spaced on the color wheel. They are very versatile,
and more often than not, they create a vibrant, bold color palette.
Similar to complementary color schemes, triadic color schemes
offer strong contrast. Still, they tend to be easier on the eye than a
simple complementary pair, making them a pretty safe bet if you
want more than one hue to play with, but don’t want to make quite
as much of a splash as a complementary pair would. When
choosing colors in harmony, let one hue dominate and use the
others for accents only.

When planning your color scheme, keep in mind the mood you want it to evoke and start by
deciding on the appropriate colors.

7
COLOUR & CONTRAST
Every visual presentation involves figure-ground (also called foreground and background)
relationships. This relationship between a subject (or figure) and its surrounding field (ground)
brings a level of contrast. The more an object contrasts with its surrounds, the more visible it
becomes.
Some combinations are difficult to read due to the low level of contrast between figure and
ground
For example:
Yellow text on a white background.
Blue text on a black background.
When we create visuals that are intended to be read, offering the viewer enough contrast
between the background (paper or screen) and the text is important. Text presentations ideally
offer at least an 80% contrast between figure and ground. (Black text on a white background is
ideal.) If there is not enough contrast between figure and ground, a viewer will squint to view
the text, causing eye fatigue.
Simultaneous contrast: Some colour combinations can cause illusions when positioned
together such as Red text on a blue background. An occurrence known as 'simultaneous
contrast' may happen when opposing colours are placed in close proximity to each other. Text
may appear to vibrate, or cast a shadow. Eye strain and fatigue will result if a viewer focuses
on a document displaying similar properties for an extended time period.
Colourblind Deficiencies: The Design of visual documents or signage without thought to the
overall contrast level between figure and ground can be problematic for people with sight
deficiencies. For example, a hospital creatively marked the floor with "road maps" to various
areas like the lab, lobby, etc. and used red and green lines. However, a colourblind person
cannot distinguish between the colours. Thus, if a visual document uses colour to relate
important information, we must ensure that no information is lost, or potentially
misunderstood, when the colour is not available.

ITTEN'S CONTRASTS
Johannes Itten was one of the first people to define and identify strategies for successful colour
combinations. Through his research he devised seven methodologies for coordinating colours
utilizing the hue's contrasting properties. These contrasts add other variations with respect to
the intensity of the respective hues; i.e. contrasts may be obtained due to light, moderate, or
dark value.
The contrast of saturation: The contrast is formed by the placing of light and dark values and
their relative saturation. Saturation, or quality, relates to the degree of purity of a colour.
Contrast of saturation is the contrast between pure, intense colours and dull, diluted colours.
The contrast of light and dark: The contrast is formed by the placing of light and dark values.
This could be a monochromatic composition.
The contrast of extension: Also known as the Contrast of Proportion. The contrast is formed
by assigning proportional field sizes in relation to the visual weight of a colour.
The contrast of Complements: In the colour wheel, complementary colours are diametrically
opposite each other. Examples of complementary pairs are: yellow, violet blue, orange red,

8
green. The contrast is formed by the placing perceptual opposites of colour wheel next to each
other.
Simultaneous contrast: The contrast is formed when the boundaries between colours
perceptually vibrate. Some interesting illusions are accomplished with this contrast.
The contrast of hue: The contrast is formed by taking different hues together. The greater the
distance between hues on a colour wheel, the greater the contrast.
The contrast of warm and cool: The contrast is formed by the combination of hues considered
'warm' or 'cool.'

PROPORTION & INTENSITY

When colours are put next to each other, our eyes perceive a visual mix. This mix will differ
depending on the proportions of allocated areas. The colour with the largest proportional area
is the dominant colour (the ground). Smaller areas are subdominant colours. Accent colours
are those with a small relative area, but offer a contrast because of a variation in hue, intensity,
or saturation (the figure).
Placing small areas of light colour on a dark background, or a small area of dark on a light
background will create an accent. If large areas of a light hue are used, the whole area will
appear light; conversely, if large areas of dark values are used, the whole area appears dark.
Alternating colour by intensity rather than proportion will also change the perceived visual mix
of colour.

CONTRAST & DOMINANCE

When creating a composition—either something freeform, or a more text based layout, a
determination for the final impact of the whole presentation needs to be identified. Is your
intent to craft a vibrant, attention grabbing ad, or a presentation with a low, or more moderate
level of contrast? These decisions concern what is known as the dominant elements of the
design.
The dominant element may be classified as either "contrast dominant" or "value dominant."
Designs that evidence contrast dominance or value dominance are then sub-divided into low,
moderate, and high contrast, or light, medium, and dark value categories. The choice of colours
will enhance or minimize the overall impact.

SHADES & TINTS

Shade, tint and tone are terms that refer to a variation of a hue.
Shade: A hue produced by the addition of black.
Tint: A hue produced by the addition of white.
Tone: A hue produced by the addition of grey.

COLOUR GAMUT
The term colour gamut refers to the range of colours a device (such as monitor, projector,
scanner or printer) can reproduce, the larger or wider the gamut we can see richer saturated
colours. The visible spectrum consists of billions of colours, a monitor can display millions, a
high quality printer is only capable of producing thousands colours. As colour gamuts become

9
smaller it is generally these rich saturated colours that are the first to suffer, a phenomenon
technically referred to as clipping. This clipping phenomenon is most apparent when
converting from RGB to CMYK, with many of the rich saturated colours that were available
in RGB no longer being available in CMYK.

Reproducing colour can be problematic with regard to printed, digital media, because what we
see is not what is possible to get. Although a monitor may be able to display 'true colour'
(16,000,000 colours), millions of these colours are outside of the spectrum available to printers.
Since digital designs are generated using the RGB colour system, colours used in those designs
must be part of the CMYK spectrum or they will not be reproduced with proper colour
rendering.

ICC PROFILES

Colour plays a crucial role in things we use and buy, and for those who design multimedia
items like these for a living, ensuring colour is accurately applied and displayed is a key aspect
of their work. Multimedia designers are relying more heavily on their computers and monitors
to guarantee the accurate display of colours. In order to ensure the highest level of colour
accuracy, designers have to first know about ICC Profile, which plays a small yet decisive role
in the design process. The International Colour Consortium (ICC) was formed in 1993 by eight
vendors in order to create an open, vendor-neutral colour management system which would
function transparently across all operating systems and software packages. The outcome of this
co-operation was the development of the ICC profile specification.

According to the International Colour Consortium (ICC,) ICC profile tells us how a colour
will look on a particular device like laptop screen or desktop computer monitor. Simply put,
every device that displays colour has a separate colour profile and these profile define the
colour gamut (range of colours) that will be displayed by these devices.

For example, if the colour gamut of a laptop and monitor are both sRGB, then it means the
monitor will display the accurate colour. On the other hand, if a laptop’s colour gamut is sRGB
and the monitor’s colour gamut is DCI-P3, then the designer will have to implant the ICC
profile of DCI-P3 into the operating system of that laptop computer and set it up in order to
guarantee accurate colour display.

ICC profiles are used to match the colour values of your display with a particular device such
as your camera, printer, scanner, etc. An ICC profile is a Look-Up Table with certain properties
of a colour gamut where a particular colour will be displayed as the exact shade of it, not just
any random tone of that colour. When doing colour-critical work in software such as
Photoshop, it’s imperative to have a calibrated display/printer as you would, naturally, want to
see the same results on the print as they are on your monitor.

Digital images and graphics all have their own ICC profiles. In order to ensure the image that
you are about to work on is displayed accurately, designers have to match the ICC profile of
the image with the monitor and implement the corresponding ICC profile into the computer’s

10
operating system. Once these steps are completed, the colour of the image will be properly
displayed.

GAMMA CORRECTION
Each pixel in an image has brightness level, called luminance. This value is between 0 to 1,
where 0 means complete darkness (black), and 1 is brightest (white). Different camera or video
recorder devices do not correctly capture luminance. Different display devices (monitor, phone
screen, TV) do not display luminance correctly. So, one needs to correct them, therefore the
gamma correction function. Gamma correction function is used to correct image's luminance.
The reason gamma correction is used is because the input signal, or voltage, sent to a monitor
is not high enough to create a bright image. Therefore, if the gamma is not altered, the images
on your screen would be dark and difficult to see. By applying gamma correction, the
brightness and contrast of the display are enhanced, making the images appear brighter and
more natural looking. Gamma correction matters if you have any interest in displaying an
image accurately on a computer screen. Gamma correction controls the overall brightness of
an image. Images which are not properly corrected can look either bleached out, or too dark.

Additional Reading:
https://www.colorsexplained.com/meanings-of-the-colors/

11