http://www.faqs.org/photo-dict/phrase/3962629/sunflower.jpg
Colour & Images
COMPSCI 345 / SOFTENG 350
Jim Warren
Adapted from slides by Safurah Abdul Jalil and Beryl Plimmer
Based on Heim Chapter 9
Learning outcomes

Describe colour properties
 Value
 Hue
 Saturation

Describe and identify colour schemes
 Monochromatic
 Analogous & Complimentary
 Ready made colour schemes

Explain how colour is used for branding

Explain how images contribute to the colour scheme of a UI

Apply colour principles to a UI design
Colour


Colour has three distinct properties:
1.
Value* - lightness or darkness (luminance)
2.
Hue - spectral colour name (blue, red..)
3.
Saturation - brightness or dullness
Colours with the same brightness levels can
appear lighter or darker than each other
Light and dark colours
Light and dark colours grayscale
*‘Value’ = lightness, almost same as luminance – see http://en.wikipedia.org/wiki/HSL_and_HSV
3
Colour: Value

‘Value’ is defined as the
perceived lightness or
darkness of a colour.

Value can be used to
increase/decrease
Contrast; consider these
examples:





* From the ‘key
light’ in film
making, see
http://en.wikipedia.
org/wiki/Highkey_lighting
Low contrast, ‘low key’
Low contrast, ‘high key’*
High contrast
High contrast (inversed)
Note: greater contrast
makes the darker object
more dominant.
 Hence, inverse is harder
to read – should only be
used for titles or
emphasis
4
Value

Create Movement


Objects of the same value create a static design with all objects
equal in visual importance.
varying values gives a more dynamic appearance and creates a
'pecking order'. Some stand out while others recede.


Highest contrast is most important
Mix elements of different values to add visual movement to
your design or to create a hierarchy of importance.
5
Colour: Hue
http://www.wou.edu/las/physci/ch462/tmcolours.htm

Colours at the lower (i.e. shorter
wavelength) end of the spectrum
(e.g. blues) are more comfortable
to look at

Based on vector value moving from
0 to 360 degrees on a colour wheel
Monday, April 13, 2015
http://realcolourwheel.co
Colour wheel

The 12 part colour wheel (Johannes Itten) is based
on the three primary colours:
 Red
 Yellow
 Blue

Between the three primaries are the secondary
colours:

Green

Orange

Violet
(They are mixtures of the two primaries they sit between).

The tertiary colours fall between each primary
and secondary. For example:



between yellow and orange is yellow orange
between blue and violet is blue violet
http://inventoropinion.blogspot.com/2009/05/iwant-to-invent-something-step-9.html
http://www.johnlovett.com/colour.htm
…and so on.
7
Colour: Saturation

All the colours at the top of the images below are called
saturated colours. They contain no black, no white and none
of their complimentary or opposite colour.

Intensity of colour in percentage scale: 100 percent is pure
colour, 0 percent is black, white or gray
http://www.xaraxone.com/webxealot/work
book40/page_5.htm
Colour: Saturation

Highly saturated, or pure, colours
 E.g. brilliant yellows, reds, and greens, …

Advantages:
 Evoke energy, vividness, brightness, and warmth.
 They are daring; they have character.

Disadvantages:
 When overused, they can tire the eyes.

Most UI designers use them sparingly.

Muted colours make up the bulk of most colour palettes
 Tints: adding white
 Shades: adding black
 Tones: adding some of both (i.e. adding grey – most ‘real’
colours!)
(see http://www.color-wheel-artist.com/hue.html)
9
+
Making it work with saturation
The green-and-blue Zen Garden design
above gets away with two saturated colours by
using white borders to separate the green and
blue (and by using the white and dark text) .
Even so, you probably wouldn't want to stare at
that green all day long in a desktop
application.
Pure Blue with black font…. Not so good!
Computer colour pickers

Windows colour picker
 As you move the cursor around watch the rgb values
changing
 White 255,255,255
 Black 0,0,0
 Red 255,0,0

Note the transparency

White background  adding white

Black background  adding black
Colour Schemes: Monochromatic

Monochromatic


This colour scheme involves the use of only one hue. The hue can vary in value, and black or
white may be added to create various shades or tints.
Monochromatic + White

Many interfaces are white background and monochromatic elements
12
Colour Schemes: Monochromatic

Primary colour: blue monochrome

Secondary colour: green monochrome
13
+
Monochrome and White

Many interfaces are white background and monochromatic elements
•
14
And now it is Blue
15
Colour Schemes: Analogous & Complimentary

Analogous

Colours that are adjacent on the colour wheel.

The hues may vary in value.

Analogous colour schemes look harmonious
http://www.richardancheta.com/html/deco
ration/STAIR-FAUX-FINISH-PAINTINGDECORATION/stair-faux-finish-paintingdecoration.htm
http://www.cristinacolli.com/27-examples-of-successful-colour-schemes/
16
Analogous and Complimentary (contd.)

Complimentary

Colours that are located opposite on the colour wheel
such as red and green, yellow and purple, or orange
and blue

Complementary colours produce an exciting, dynamic
pattern.
http://www.cristinacolli.com/27-examples-of-successful-colour-schemes/
http://www.digitalscrapbooking.co.za
/modules.php?name=News&file=artic
le&sid=11
Colour Discord

Monochromatic, analogous, complementary or triadic (120degree separation) colour schemes are ‘harmonious’

some colour schemes are dissonant (or ‘discordant’).

Discordant colours are visually disturbing - we say they
clash.
 Colours that are widely separated on the colour wheel (but
not complementary or triadic) are discordant.

Discordant colours can be eye-catching and are often used
as attention-getting devices in advertising.
BUY ME!
18
Making a Colour scheme

Quite a number of tools have
predefined colour schemes
 Go to the ‘Design’ tab in
Powerpoint

Companies often have an existing
colour scheme (look at logos,
stationary, brochures)
Colour scheme: Branding



Colour is a crucial element of a brand identity.
‘The National Bank’ brand (and colour scheme)
was dropped in 2012
Another – look at WestPac… a bit like Cocacola!
Colour Scheme & Images:

Images are made up of colours

the colours of images you
choose can reflect upon the
colour scheme of your interface.

Basing colour schemes around
photos is a also great technique.
http://vltoday.blogspot.com/
colour Scheme & Images:
colour Scheme & Images:
Colour contrast

Contrast sensitivity decreases significantly with age

Contrast

Because black and white have the highest contrast , luminance
(black and white) contrast is more significant than colour contrast

One way easy to check your contrast to save an image as grayscale
Colour as code

Sometimes the colours are used as a code to communicate
information.

Most well-known is ‘traffic light’ model
 Not friendly to colour-blind individuals, but conventional

http://ilign.com/screenshot/executive-dashboard
Outside of ‘digital
dashboards’ try not to
base you scheme on
(presumed)
understanding of codes
Summary

Colour is a fundamental element of aesthetics

High contrast is important for readability

Monotone colour schemes are the easiest to ‘get right’

More complex colour schemes can be ‘borrowed’ from
colour palettes or company branding

Images are a part of the colour scheme

Use colour as a code sparingly
Learning outcomes

The colour properties
 V..
 H..
 S…

Colour schemes
 M…
 A… & C…

Colour and branding

Images and the colour scheme of a UI

Design a UI colour scheme (in your assignment)
References

Heim, The Resonant Interface, chapter 9

Further reading:
 http://daphne.palomar.edu/design/Default.htm
 http://www.leonardo.info/isast/articles/behrens.html
 http://www.digitalweb.com/articles/principles_of_design/
 http://www.colormatters.com/color-andmarketing/color-and-branding
28