Colour
Representing Colour in Computers
Using Colour in CSS
Colour
1.
Colour Theory
1.
2.
3.
2.
Origin of Colours
Colour Perception
Primary colours and Colour Composition
Choosing Colours
1.
2.
3.
Specifying colour in CSS
Web safe
Choosing colour schemes
Origin of colours
People perceive colours because our
primitive ancestors ate fruits and berries
•
•
•
•
discriminate berries from foliage
discriminate edible from non-edible fruits
evolutionary advantage
bears and birds also have colour vision
In contrast, carnivores tend to have limited
colour vision
•
•
e.g., cats, dogs can't see what you see on TV
but they have more sensitive noses to follow
prey
Origin of colours
People have 3 kinds of colour-sensitive cone
cells in their retinas (red, green, blue)
•
colour-blind people have:
•
•
•
defective cones with shifted sensitivities, or
reduced numbers or sensitivities of cones
8% of males, < 1% of females
see the Wikipedia link on the web site
dogs have 2 kinds of colour-sensitive cells
•
•
Colour is based on light frequency
•
any combination of frequencies that stimulates
cells in the same way will seem to be the same
colour
Colour Perception
Colour perception is based on different wave
lengths of light, which stimulates receptors
(cones) in the eye.
Specific frequencies or wave lengths of light
correspond to certain colours.
Colour Perception
People perceive colour through 3 kinds of cone cells
(receptors) in the retina, which respond to red, green, and
blue (we are tri-chromatic):
Cone type
Name
Range
Peak sensitivity
S
β (Blue)
400..500 nm
440 nm
M
γ (Green)
450..630 nm
544 nm
L
ρ (Red)
500..700 nm
580 nm
Cone cells in the human eye
A combination of light frequencies that stimulates cells in the
same way is perceived as the same colour.
Spectral response of cone cells
This
means, e.g. the blue receptor cones may also respond to
red or green.
Colour Blindness
Colour-blindness - difference in receptors:
•
•
•
•
•
defective cones with shifted sensitivities,
reduced number of cones or sensitivity of cones,
more types of cones: women can be tetrachromatic, i.e. sense 4 primary colours (really!)
men are often red-green blind, i.e. they cannot
properly distinguish certain red and green tones
Dogs have only 2 kinds of colour-sensitive cells
(but they can watch TV!).
Primary Colours and
Colour Composition
Primary Colours
Primary colours are colours, from which all
others can be obtained by mixing.
The choice of primaries is not unique.
We use 3 primaries because we have 3 kinds of
cones for colour vision.
Colour Composition
We distinguish subtractive and additive
composition of colours:
•
•
subtractive means, light is taken away (darker), e.g.
printing process (light reflected or absorbed).
additive means, more light is produced (brighter),
e.g. TV (light generated and emitted).
Subtractive Primary Colours
Subtractive Primaries (reflected light)
•
Artists paints etc.
•
•
red, blue and yellow
Printers (3 or 4 colour cartridges)
•
•
cyan, yellow, magenta (CYM)
cyan, yellow, magenta, black (CYMK) for
darker blacks
Subtractive Composition of Primary colours
Green
Blue
Yellow
Black
Orange
Purple
White
Red
Subtractive Composition of Primary colours
Green
Cyan
Yellow
Black
Red
Blue
White
Magenta
Additive Primary Colours
Additive Primaries (originating light)
• TVs, Computers, CRTs
•
red, green, blue (RGB)
Additive Composition of Primary colours
Cyan
Blue
Green
White
Yellow
Magenta
Black
Red
Specifying colours in CSS
Basic colours can be referred to by
name in CSS
•
There are 17 valid names in CSS 2.1
•
aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal,
white, yellow and orange (just added)
We can also specify colours in terms of
their primary colour intensities
Red, Green, Blue
Specifying colours in CSS
Any colour can be represented as a mixture of
red, blue, and green
Colours are specified as a triple RGB, where
• R specifies the intensity of the red component
• G specifies the intensity of the green component
• B specifies the intensity of the blue component
Specifying RGB in CSS
Each primary colour has 256 intensity
levels that can be specified in 3 ways
•
Decimal RGB values (0…255)
•
•
Percentage RGB values (0%…100%)
•
•
e.g. color: rgb(128, 128, 128)
e.g. color: rgb(50%, 100%, 30%)
Hexadecimal RGB values (00…FF)
•
e.g. color: #00FFCC
Hexadecimal
It’s a number in base 16
Why base 16? A shorthand way of writing
binary numbers
•
It’s the way Computer Scientists see the world…
In binary, we only have 0 and 1 to count on, so
our counting sequence goes 0, 1, 10, 11,
100,101,110,111,1000 and so on
1000 is only 8, and takes 4 digits (actually bits
or binary digits) to state, so these get long
One hexadecimal digit = 4 binary digits; 8 in
hex is shorter than 8 in binary
Hexadecimal
In hex, there are 16 digits—0…15 (just like in
decimal there are 10—0...9)
We have no “digits” for 10 and up,
because…well…we usually don’t count that
way!
So we use the letters A … F (or a … f) to
denote the digits 10 … 15
So the hex value FF0000 represents the binary
number
1111 1111 0000 0000 0000 0000
2 hex digits can represent numbers from 0 to
255
Hexadecimal colour specification
There are only a few obvious ones - pure red, green,
blue (FF in the respective component, 00 in others),
white, black
•
•
•
•
•
red
green
blue
white
black
#FF0000
#00FF00
#0000FF
#FFFFFF
#000000
Secondary colours are also easy
•
Mixing two primaries
•
•
•
red and green
green and blue
red and blue
yellow
cyan
magenta
#FFFF00
#00FFFF
#FF00FF
Hexadecimal shorthand
If the digits for all three primary colours are in
matched pairs, we can use a shorthand notation
•
•
•
We can list just one digit of the pair
Works for CSS property values, but NOT for HTML attribute
values
e.g.
• red
#FF0000 becomes #F00
• green #00FF00 becomes #0F0
• blue #0000FF becomes #00F
• white #FFFFFF becomes #FFF
• black #000000 becomes #000
Basic colour Specifications
Aqua
(0,255,255)
(#00FFFF)
Black
(0,0,0)
(#000000)
Blue
(0,0,255)
(#0000FF)
Fuchsia
(255,0,255)
(#FF00FF)
Gray
(128,128,128)
(#808080)
Green
(0,128,0)
(#008000)
Lime
(0,255,0)
(#00FF00)
Maroon
(128,0,0)
(#800000)
Navy
(0,0,128)
(#000080)
Olive
(128,128,0)
(#808000)
Purple
(128,0,128)
(#800080)
Red
(255,0,0)
(#FF0000)
Silver
(192,192,192)
(#C0C0C0)
Teal
(0,128,128)
(#008080)
White
(255,255,255)
(#FFFFFF)
Yellow
(255,255,0)
(#FFFF00)
3. Choosing colours for a web site
Specifying colours in ‘hex’ can be difficult
•
•
Lots of resources on the web to help
See the Links page
A palette of 216 web safe colours is the
best option
•
See the link on web safe colours on the Course
web site
Colour depth
A computer graphics term
•
•
•
It refers to the number of bits used to represent a
distinct colour
Older hardware (e.g. VGA monitors) supports 8-bit
colour depth (256 colours)
Modern computer hardware supports 24-bit colour
depth (16,777,216 colours)
•
•
•
You may see the term "32-bit colour"
This means 24-bit colour depth with 8 unused bits (why?)
Modern hardware works most efficiently with 32 bits
Web safe colours
Web safe colours won’t dither
•
Dithering: if the display can't represent a colour
(because of limited colour depth), it is approximated
by combining two colours it does support
•
•
2 different coloured pixels are placed side-by-side to fool
the eye into seeing another colour
some computers display only 256 colours
216 web safe colours
•
•
Because the operating system reserves about 40
colours, there are only 216=6x6x6 colours available.
Each component is either 00, 33, 66, 99, CC or FF
Choosing colours
Colour is the first thing that will make an
impression with viewers of your site
Some things to consider when choosing a
colour scheme:
•
Simple schemes are generally better
•
•
People associate colours with emotions
•
•
Choose no more than 3 colours
Your colour scheme should convey an appropriate
emotion
Schemes for text should provide easy readability
•
•
good contrast without causing reader fatigue
consideration for colour-blindness
Complementary colours
Colour pairs that are (in some way) opposites
•
In art and design, opposites on a colour wheel
•
•
In computer graphics, colours that when mixed
produce white
•
•
•
When placed next to each other, complements make each
other appear brighter
#00FFFF and #FF0000
#9933FF and #66CC00
Complementary colours that also have very high (or
low) RGB intensities provide high contrast
Complementary Colours (print)
Complementaries of primary colours
The complementary colour of a primary colour (red, blue, or
yellow) is the colour you get by mixing the other two primary
colours. So the complementary colour of red is green, of blue is
orange, and of yellow is purple.
What about secondary colours?
The complementary of a secondary colour is the primary colour
that wasn't used to make it. So the complementary colour of
green is red, of orange is blue, and of purple is yellow.
What happens if you mix complementary colours?
You get a tertiary colour, particularly browns.
The Colour Triangle (print)
The colour triangle
The three primary colours are in the corners. The
colour you get by mixing two primaries is between them
(red and yellow make orange; red and blue make
purple; yellow and blue make green). The
complementary colour of a primary colour is the colour
opposite it (green is the complementary of red, orange
for blue, and purple for yellow).
Analog and Triad Colours
Analog colours are adjacent on the colour
wheel
•
Analog colours can create a harmonious feel
Triad colours are equally spaced on the
colour wheel
•
Triad colours create a scheme that is
colourful but balanced
Colour schemes for text
Some examples of good and
bad colour schemes for text
•
•
•
The top 3 have good contrast
and do not tire the reader's eyes
Using Red and Green will make
your page unreadable for colourblind readers
Using Red and Blue can create
a 'shimmer' effect that causes
reader fatigue
Black on White
Yellow on Blue
Yellow on Black
Red on Green
Green on Red
Red on Blue
Blue on Red
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Here is
some text!
Colour Pickers
Want to know the RGB spec of a colour on
your screen?
•
Microsoft Paint has an Edit Colors command that
will show the RGB spec of a colour
Or, try a freeware colour picker utility
•
•
•
•
go to versiontracker.com
Search for color picker
Picks from existing colour on your desktop
Find closest web-safe colour