S shawacademy

Advanced COLOUR
Graphic THEORY
Design
SUMMARY NOTES

summarynotes
Advanced Diploma in Graphic Design Toolkit For further questions visit us online at:
www.shawacademy.com
S Colour Theory

S
shawacademy
 S Colour Theory

A PORTFOLIO IS
BY FAR THE MOS T
1.01 Portfolio Creation 4
IMPORTANT DOCUMENT
YOU POSSE SS A S A
DE SIGNER , WHE THER
1.02 5 Essential Elements 6
IT BE PHYSIC AL OR
DIGITAL .
1.03 Understanding Audience 8
1.04 Conveying Personality 10
1.05 Paid v Personal Projects 12
1.06 Range 14
1.07 Depth of Experience 15
S What is Colour

What we see
as colours
are different
wavelengths
of light over a
limited range of
the entire elec-
tromagnetic
spectrum.
 S What is Colour

What we see as colours are different wavelengths

of light over a limited range of the entire electro-
magnetic spectrum.

That limited range is the visible spectrum

Colour running from about 390–;720nm

Isaac Newton was the

first to understand the
spectrum of light. He
refracted white light
through a prism in order
to see its component
colours. Our understand-
ing of colour today comes
from Newton’s work with
light.
S What is Colour

Cones are the

part of the
human eye that
detect colour.

Rods are
sensitive only to
black, white and
grey.
 S What is Colour

1.02
What is Colour

In light, all colours come

from green, red, or blue.

In paint, all colours come

from yellow, magenta
(almost red), or cyan
(almost blue).

What is the reason for

this difference? Cones are the part of the human eye that detect colour.
If you mix all the colours Rods are sensitive only to black, white and grey.
of light, what do you end
We have 3 types of cones each having a peak sensitivity over
up with? White light.
different wavelengths of light.
But if you mix all the
Short — 400–500nm — 420–440 nm
colours of paint what
colour do you end up with? Medium — 450–630nm — 530–540 nm
Black paint. Long — 500–700nm — 560–580 nm
This is the primary
difference.

With light, you are mixing There are two theories about how we see colour using our 3
wavelengths together, cones. Both theories are seen as valid and describe different
adding them up to some stages in visual physiology.
colour. Trichromatic theory — suggests the 3 cones of the retina are
With paint, you are sensitive to red, green, and blue.
removing colours. Opponent process theory — suggests we interpret colour in a
more antagonistic way; red vs. green, blue vs. yellow, black vs.
white.

3 cone cells. 3 ranges of wavelength. 3 primary colours.

Lots of things about colour seem to come in 3s.
S RGB v CMYK

The RGB colour

model is an
additive colour
model.

The CMYK colour

model (four-color
process) is a
subtractive colour
model.
 S RGB v CMYK
It is frequently suggested
that the ‘K’ in CMYK comes
from the last letter in
‘black’ and was chosen
because B already refers
to blue. However, this
explanation is incorrect.
The ‘K’ in CMYK stands for
‘key’ since in four-color
printing cyan, magenta,
and yellow printing plates
are carefully keyed or
aligned with the key of the
black key plate.
Black is used because the
combination of the three
primary colours (CMY)
doesn’t produce a fully
saturated black.
1.04
RGB v CMYK
RGB - Additive Colour Model
The RGB colour model is an additive
colour model. In this case red, green
and blue light are added together in
various combinations to reproduce a
wide spectrum of colours. The primary
purpose of the RGB colour model is for the display of images in
electronic systems, such as on television screens and computer
monitors and it’s also used in digital photography. Cathode ray
tube, LCD, plasma and LED displays all utilize the RGB model.
In order to create a colour with RGB, three coloured light beams
(one red, one green, and one blue) must be superimposed. With
no intensity, each of the three colours is perceived as black,
while full intensity leads to a perception of seeing white. Differing
intensities produce the hue of a colour, while the difference
between the most and least intense of the colours make the
resulting colour more or less saturated.
CMYK - Subtractive Colour Model
The CMYK colour model (four-color
process) is a subtractive colour model.
Primarily used in printing, CMYK works
by partially or completely masking
colours on a white background. The
printed ink reduces the light that would
otherwise be reflected. That’s why this
model is called subtractive because
inks ‘subtract’ brightness from a white background from four
colours: cyan, magenta, yellow and black.
 S Warm Colours

1.03
Warm Colours
Warm colours include Red is a very hot colour.
red, orange, and yellow, It’s associated with fire, violence, and warfare. It’s also associated with love
and variations of those and passion. In history, it’s been associated with both the Devil and Cupid.
three colours. These are Red can actually have a physical effect on people, raising blood pressure and
the colours of fire, of respiration rates. It’s been shown to enhance human metabolism, too.
autumn leaves, and of
Red can be associated with anger, but is also associated with importance
sunsets and sunrises,
(think of the red carpet at awards shows and celebrity events). Red also
and are generally
indicates danger (the reason stop lights and signs are red, and that most
energizing, passionate,
warning labels are red).
and positive.
Outside the western world, red has different associations. For example, in
China, red is the colour of prosperity and happiness. It can also be used to
Red and yellow are both attract good luck.
primary colours, with
Be aware of cultural differences!
orange falling in the
middle, which means
warm colours are all In design, red can be a powerful accent colour. It can have an overwhelm-
truly warm and aren’t ing effect if it’s used too much in designs, especially in its purest form. It’s
created by combining a a great colour to use when power or passion want to be portrayed in the
warm colour with a cool design. Red can be very versatile, though, with brighter versions being more
colour. energetic and darker shades being more powerful and elegant.

Alternate meanings: In some Eastern cultures, red symbolizes good

Use warm colours in fortune and prosperity and is the colour worn by brides on their wedding day.
your designs to reflect Worldwide, red has been associated with various political movements and
passion, happiness, has symbolized revolution.
enthusiasm, and energy. In branding: Red often communicates strength, confidence, and power and
is a highly visible colour.
 S Warm Colours

1.03
Warm Colours
Yellow is often considered the brightest and most energizing of the warm colours.
It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling
someone yellow is calling them a coward).

Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families
who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.

In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it
represents courage, and in India it’s a colour for merchants.

In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as
a gender-neutral colour for babies (rather than blue or pink) and young children. Light yellows also give a more calm
feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be
used in designs where a sense of permanence is desired.

Alternate meanings: In some Eastern and Asian cultures, yellow is associated with royalty or high rank. In parts of
Africa and Latin America, yellow is the traditional colour of mourning.

In branding: Pure/bright yellow does a great job of attracting attention, but can be visually disturbing or even hard
to see (for instance, white text against a bright yellow background or vice versa) if not used with care.

Orange is a very vibrant and energetic colour.

In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing
seasons, orange can represent change and movement in general.

Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In
designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and
inviting, and less in-your-face.

Alternate meanings: In India, saffron, a certain yellowish shade of orange, is considered sacred. In Japan, orange is
the colour that symbolizes love.

In branding: Orange often represents youthfulness and creativity. Gold, which is a type of orange or yellow
depending on its hue, is a symbol of luxury or high quality.
 S Cool Colours

1.04
Cool Colours
Cool colours include Green is a very down-to-earth colour.
green, blue, and purple, It can represent new beginnings and growth. It also signifies renewal and
are often more subdued abundance. Alternatively, green can also represent envy or jealousy, and a
than warm colours. They lack of experience.
are the colours of night,
Green has many of the same calming attributes that blue has, but it also
of water, of nature, and
incorporates some of the energy of yellow. In design, green can have a
are usually calming,
balancing and harmonizing effect, and is very stable.
relaxing, and somewhat
reserved. It’s appropriate for designs related to wealth, stability, renewal, and nature.

Blue is the only primary Brighter greens are more energizing and vibrant, while olive greens are more
colour within the cool representative of the natural world.
spectrum, which means Dark greens are the most stable and representative of affluence.
the other colours are
created by combining
blue with a warm colour Alternate meanings: Among cultures that practice Islam, green is a sacred
(yellow for green and colour. Green is also associated with Ireland and, by extension, St. Patrick’s
red for purple). Day and lucky four-leaf clovers.

In branding: Brands or product that wants to come across as “green” (in the
sense of natural, healthy, sustainable, environmentally friendly, organic, etc.)
Greens take on some of
often use nature-inspired colours like green and brown.
the attributes of yellow,
and purple takes on
some of the attributes of
red.

Use cool colours in your

designs to give a sense of
calm or professionalism.
 S Cool Colours

1.04
Cool Colours
Blue is used extensively to represent calmness and responsibility.
Blue is often associated with sadness in the English language. Light blues can be refreshing and friendly.

Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connota-
tions in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).

The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you
select will have a huge impact on how your designs are perceived.

Light blues are often relaxed and calming. Bright blues can be energizing and refreshing.

Dark blues are excellent for corporate sites or designs where strength and reliability are important.

Alternate meanings: In Middle Eastern cultures, blue has traditionally represented protection against evil. Because
of its association with the heavens, blue symbolizes immortality and/or spirituality in many cultures.

In branding: Blue is widely used and one of the most versatile colours. It’s generally used to communicate trust-
worthiness, security, and stability. Dark or navy blue is a particularly popular choice for corporate contexts, since it’s
perceived to have serious, conservative, and professional qualities.

Purple was long associated with royalty.

It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and
imagination, too.

In Thailand, purple is the colour of mourning for widows. Dark purples are traditionally associated with wealth and
royalty, while lighter purples (like lavender) are considered more romantic.

In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring
and romance.

Alternate meanings: In many cultures around the world, purple represents nobility or wealth; however, in Thailand
and parts of South America, the colour is associated with mourning.

In branding: Darker shades of purple often still symbolize luxury or opulence, while lighter/brighter shades can
come across feminine or childish.
 S Neutral Colours

1.05
Neutral Colours
Neutral colours often Black is the strongest of the neutral colours.
serve as the backdrop in On the positive side, it’s commonly associated with power, elegance, and
design. formality.

On the negative side, it can be associated with evil, death, and mystery.
They’re commonly Black is the traditional colour of mourning in many Western countries. It’s
combined with brighter also associated with rebellion in some cultures, and is associated with
accent colours. Halloween and the occult.

Black is commonly used in edgier designs, as well as in very elegant designs.

But they can also be used It can be either conservative or modern, traditional or unconventional,
on their own in designs, depending on the colours it’s combined with.
and can create very so- In design, black is commonly used for typography and other functional parts,
phisticated layouts. because of it’s neutrality. Black can make it easier to convey a sense of so-
phistication and mystery in a design.

The meanings and

impressions of neutral White is at the opposite end of the spectrum from
colours are much more black, but like black, it can work well with just
affected by the colours about any other colour.
that surround them
White is often associated with purity, cleanliness, and virtue. In the West,
than are warm and cool
white is commonly worn by brides on their wedding day. It’s also associated
colours.
with the health care industry, especially with doctors, nurses and dentists.

White is associated with goodness, and angels are often depicted in white.

In design, white is generally considered a neutral backdrop that lets other

colours in a design have a larger voice. It can help to convey cleanliness and
simplicity, though, and is popular in minimalist designs. White in designs can
also portray either winter or summer, depending on the other design motifs
and colours that surround it.
 S Neutral Colours

1.05
Neutral Colours
Grey is a neutral colour, generally considered on the cool end of the spectrum.
It can sometimes be considered moody or depressing. Light greys can be used in place of white in some designs, and
dark greys can be used in place of black. Grey is generally conservative and formal, but can also be modern.

It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated
colour.

Pure greys are shades of black, though other greys may have blue or brown hues mixed in. In design, grey
backgrounds are very common, as is grey typography.

Brown is associated with the earth, wood, and stone.

It’s a completely natural colour and a warm neutral. Brown can be associated with dependability and reliability, with
steadfastness, and with earthiness. It can also be considered dull.

In design, brown is commonly used as a background colour.

Beige is somewhat unique in the colour spectrum, as it can take on cool or

warm tones depending on the colours surrounding it.
It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull.

It’s a conservative colour in most instances, and is usually reserved for backgrounds. It can also symbolize piety.

Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will
take on the characteristics of colours around it, meaning it has little effect in itself on the final impression a design
gives when used with other colours.

Ivory and cream are sophisticated colours, with some of the warmth of
brown and a lot of the coolness of white.
They’re generally quiet, and can often evoke a sense of history.

Ivory is a calm colour, with some of the pureness associated with white, though it’s a bit warmer.

In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colours like peach or
brown, it can take on an earthy quality. It can also be used to lighten darker colours, without the stark contrast of
using white.
S Colour Terminology

A thorough
working
knowledge of
concepts like
Chroma, value
and saturation is
key to creating
your own
awesome colour
schemes.
S Colour Terminology

1.6
Colour Terminology

Hue is the most basic of colour terms and basically denotes an

object’s colour.

When we say “blue,” “green” or “red,” we’re talking about hue.

The hues you use in your designs convey important messages as

we have just looked at.

Using a lot of pure hues together can add a fun and playful look
to a design.

Combining high and low saturation in the same hue can make for
a sophisticated and elegant design.

Chroma refers to the purity of a colour.

A hue with high Chroma has no black, white or grey in it. Adding
white, black or grey reduces its Chroma. It’s similar to saturation
but not quite the same. Chroma can be thought of as the
brightness of a colour in comparison to white.

In design, avoid using hues that have a very similar Chroma.

Opt instead for hues with chromes that are the same or a few
steps away from each other.

Colours with very high Chroma are best used in moderation, as

done here.

Differences in Chroma can make for a visually pleasing gradient.

S Colour Terminology

1.6
Colour Terminology
Saturation refers to how a hue appears under particular lighting
conditions.

Think of saturation in terms of weak vs. strong or pale vs. pure

hues.

In design, colours with similar saturation levels make for more

cohesive-looking designs.

As with Chroma, colours with similar but not identical saturations

can have a jarring effect on visitors.

Value could also be called “lightness.”

It refers to how light or dark a colour is.

Lighter colours have higher values.

For example, orange has a higher value than navy blue or dark
purple.

Black has the lowest value of any hue, and white the highest.

When applying colour values to your designs, favour colours with

different values, especially ones with high Chroma.

High contrast values generally result in more aesthetically

pleasing designs.

Tones are created when grey is added to a hue.

Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs.

Tones with more grey can lend a certain vintage feel to websites.

Depending on the hues, they can also add a sophisticated or

elegant look.
S Colour Terminology

1.6
Colour Terminology
A tint is formed when white is added to a hue, lightening it.

Very light tints are sometimes called pastels, but any pure hue
with white added to it is a tint.

Tints are often used to create feminine or lighter designs.

Pastel tints are especially used to make designs more feminine.

They also work well in vintage designs and are popular on

websites targeted at parents of babies and toddlers.

SUMMARY
Hue is colour (blue, green, red, etc.).

Chroma is the purity of a colour (a high Chroma has no added

black, white or grey).

Saturation refers to how strong or weak a colour is (high

saturation being strong).

Value refers to how light or dark a colour is (light having a high

value).

Tones are created by adding grey to a colour, making it duller

than the original.

Shades are created by adding black to a colour, making it darker

than the original.

Tints are created by adding white to a colour, making it lighter

than the original.
S Munsell Colour System

Albert Henry Munsell

was a 19th century
American artist
and professor of art.
Munsell wanted to
find a way to organize
colour in a meaningful
and practical way. He
invented tools to take
the measurements he
wanted and developed a
guide for choosing com-
plementary colours in
artistic work.
 S Munsell Colour System
Munsell’s system
forms the basis of the
familiar HSL and HSB
colour spaces we find in
graphics editors.
There are 3 primary ways
to describe a colour.
Temperature could be a 4th.
Hue — another word for
colour
Saturation (Chroma) — the
intensity or purity of a hue
Lightness (value) — the
relative degree of black or
white mixed with a given
hue
Temperature — the
perceived warmth or
coolness of a colour
1.07
Munsell Colour System
Munsell’s system divides colour into three dimensions, which
you can see in the image.
Hue — is measured by degrees around a horizontal circle.
Chroma — is measured radially from the centre of the circle. The
further from the centre the more pure the hue.
Value / Lightness — runs perpendicular through the centre of
the circle. The lowest point is black and the highest point is white
with shades of grey at all points between.
You might recognize the system as hue, saturation, and lightness
or hue, saturation, and brightness. The values in Munsell’s system
are different, though. Munsell’s hue circle is divided into 10 equal
divisions, Chroma is measured from 1–15, and value is on a scale
from 1–11. The basic dimensions are in place and the system is in-
ternationally accepted and used by the U.S. Bureau of Standards.
In Munsell’s system there are 5 primary colours, red, yellow,
green, blue, and purple. There are also 5 intermediary colours
between the primaries, red-yellow, yellow-green, and so on.
Colours of equal Chroma and value and at opposite ends of a hue
circle are complementary. Adding them creates a neutral grey
(the centre of the circle) of the same value.
S HSB (HSV)

HSB (also HSV) is a way

to define colour based
on how we describe it
This is the one that uses
a colour wheel - not the
same as the artists’ colour
wheel, by the way.
It came in when we got
on-screen colour, as a
way to try to describe
colour more intuitively
than with RGB numbers.
 S HSB (HSV)

1.08
HSB (HSV)
HSV stands for hue, saturation, and value, and is also often called HSB (B for brightness).

Based on the human perception of colour, the HSB model describes three fundamental character-
istics of colour:

Hue The colour reflected from or transmitted through an object. It is measured as a

location on the standard colour wheel, expressed as a degree between 0 and 360. In common
use, hue is identified by the name of the colour, such as red, orange, or green.

First there is the red colour (0 or 360 degrees) and then there are all other colours (for example
yellow at 120 degrees, green at 180 degrees and blue at 240 degrees), up to the violet colour. All
the rainbow’s colours are represented here.

Saturation The strength or purity of the colour. Saturation, which is sometimes called chroma,
represents the amount of grey in proportion to the hue, measured as a percentage from 0 (grey)
to 100 (fully saturated). On the standard colour wheel, saturation increases from the centre to the
edge.

The second number is the saturation. It represents the amount of colour or, more exactly, its
percentage. Its value ranges from 0 to 100, where 0 represents no colour, while 100 represents the
full colour.

Brightness The relative lightness or darkness of the colour, usually measured as a percentage
from 0 (black) to 100 (white).

You can enhance the colour brightness adding the white color, or you can reduce it adding the
black colour. In this case 0 represents the white colour and 100 represents the black colour. The
more this value tends to 0, the brighter the colour is. The more this value tends to 100 the darker
the colour is.

Although you can use the HSB model in Photoshop to define a color in the Color Picker dialog
box, you cannot use the HSB mode to create or edit images.
S LAB

LAB stands for

Luminance (or lightness)
and A and B (which are
chromatic components).
According to this model
A ranges from green to
red, and B ranges from
blue to yellow.
 S LAB

1.09
LAB
LAB stands for Luminance (or lightness) and A and B (which are chromatic components).

According to this model A ranges from green to red, and B ranges from blue to yellow.

This model was designed to be device independent. In other words by means of this model you
can handle colors regardless of specific devices (such as monitors, printers, or computers). The
Luminance ranges from 0 to 100, the A component ranges from -120 to +120 (from green to red)
and the B component ranges from -120 to +120 (from blue to yellow).

The Lab color model is based on the human perception of color.

The numeric values in Lab describe all the colors that a person with normal vision sees.

Because Lab describes how a color looks rather than how much of a particular colorant is needed
for a device (such as a monitor, desktop printer, or digital camera) to produce colors, Lab is
considered to be a device-independent color model.

Color management systems use Lab as a color reference to predictably transform a color from
one color space to another color space.

The Lab Color mode has a lightness component (L) that can range from 0 to 100. In the Adobe
Color Picker and Color panel, the a component (green-red axis) and the b component (blue-yellow
axis) can range from +127 to –128.

Lab images can be saved in Photoshop, Photoshop EPS, Large Document Format (PSB), Photoshop
PDF, Photoshop Raw, TIFF, Photoshop DCS 1.0, or Photoshop DCS 2.0 formats. You can save 48‑bit
(16‑bits-per-channel) Lab images in Photoshop, Large Document Format (PSB), Photoshop PDF,
Photoshop Raw, or TIFF formats.

Lab has the advantage of a colour gamut that encompasses all the colours the human eye can
see.

It’s disadvantage is that that gamut is larger than most output devices can reproduce.
 S Colour Schemes

2.0
Colour Schemes
Colour context refers to Monochromatic colour schemes are made up
how we perceive colours of different tones, shades and tints within a
as they contrast with specific hue.
another colour. These are the simplest colour schemes to create, as
they’re all taken from the same hue, making it harder
to create a jarring or ugly scheme (though both are
The way in which we
still possible!).
use two colours together
changes how we perceive Although it lacks colour contrast, it often ends up looking very clean and
it. polished. It also allows you to easily change the darkness and lightness of
your colours.

So when you’re choosing

colours for your graphic Complementary schemes are created by
designs, think about how combining colours from opposite sides of the
much contrast you want colour wheel.
throughout the design. In their most basic form, these schemes consist of
only two colours, but can easily be expanded using
tones, tints, and shades.
For instance, if you
were creating a simple The complementary colour scheme provides the greatest amount of colour
bar chart, you’d most contrast. Because of this, you should be careful about how you use the com-
likely want to create a plementary colours in a scheme. It’s best to use one colour predominantly
contrast between your and use the second colour as accents in your design.
bars and the background
itself since you want
Analogous schemes are created by using three
your viewers to focus
colours that are next to each other on the
on the bars, not the
12-spoke colour wheel.
background.
Generally, analogous colour schemes all have the
same Chroma level, but by using tones, shades and
tints we can add interest to these schemes and
adapt them to our needs for designing websites.

Analogous structures do not create themes with high contrasting colours, so

they’re typically used to create a softer, less contrasting design.
S Colour Schemes

2.0
Colour Schemes
Triadic schemes are made up of hues equally spaced around the
12-spoke colour wheel.

This is one of the more diverse colour schemes.

Triadic colour schemes offer high contrasting colour schemes while retaining
the same tone, but they can also seem overpowering if all of your colours are
chosen on the same point in a line around the colour wheel.

To subdue some of your colours in a triadic scheme, you can choose one
dominant color and use the others sparingly, or simply subdue the other two
colours by choosing a softer tint.

Split complementary, instead of using colours that are opposites, you

use colours on either side of the hue opposite your base hue.

A split complementary scheme includes one dominant colour and the

two colours directly adjacent to the dominant colour’s complement. This
created more nuanced colour palette than complementary colour scheme
while still retaining the benefits of contrasting colours.

The split complementary colour scheme can be difficult to balance well

because unlike analogous or monochromatic colour schemes, the colours
used all provide contrast (similar to the complementary scheme).

The positive and negative aspect of the split complementary colour model is
that you can use any two colours in the scheme and get great contrast ... but
that also means it can also be tricky to find the right balance between the
colours. As a result, you may end up playing around with this one a bit more
to find the right combination of contrast.
S