Colour

1
Colour

• The colour spectrum
• How we see colour
• Colour models
• Colour palettes

2
Introduction

• Previously we have covered
• representing images as bitmaps
• colour of each pixel
• Vector representation
• store information about object shape, position,
  dimensions and colour
• Today
• how is colour represented?
• start by thinking about how we see things
• objects are visible to us because they either
  emit or reflect light

3
What is light?

• part of electromagnetic spectrum
• gamma ray - x-ray - UV - visible light -
  infrared - microwave -radio
• light is characterised by
• wavelength
• intensity

4
How we see colour

• retina at back of eye has light-sensitive
  receptors
• rods
• sensitive to light intensity but not colour
• see in black and white
• sensitive to low light levels
• night vision
• at edges of retina
• peripheral vision
• cones
• concentrated at middle of retina
• three types
• sensitive to red, green and blue light

5
Perceiving colours

• each cone is sensitive to range of wavelengths
• centred on red, green or blue
• if the green and the red cones are equally
  stimulated, we see yellow
• we cannot distinguish between
• pure yellow light
• a mixture of green and red light
• they both look yellow
• if all three cones are equally stimulated, we see
  white

6
RGB colour model

• the RGB model is based on colour vision
• specify red, green and blue components of a
  colour
• often on a 0-255 scale for each
• 256 x 256 x 256 16.8 million combinations
• this is the limit of what human eye can
  distinguish
• 8 bits (1 byte) for each component
• 24-bit colour
• additive model
• add colours together to get white

7
RGB colour cube

• one axis for red, green, blue
• red (255, 0, 0)
• green (0, 255, 0)
• blue (0, 0, 255)
• origin (0,0,0) is black
• opposite corner (255, 255, 255) is white
• grey up diagonal
• dark grey (64, 64, 64)
• grey (128, 128, 128)
• light grey (192, 192, 192)

8
RGB colour cube

• other colours generated by mixing the primary
  colours
• yellow
• red and green
• (255, 255, 0)
• magenta
• red and blue
• (255, 0, 255)
• cyan
• green and blue
• (0, 255, 255)
• orange
• (255, 200, 0)
• pink
• (255, 175, 175)
• red with added white

9
Hex colours

• RGB colours are specified by a triplet of numbers
• (Red, Green, Blue)
• each 0-255
• often more convenient to specify same triplet in
  hexidecimal form
• still 0-255 scale
• hexidecimal digits 0 to F
• 0 to 15 in decimal
• so hexidecimal colour range 00 to FF
• used in html tags
• ltfont color "cyan"gt
• ltfont color "00FFFF"gt

10
Subtractive colour models

• how we perceive colour in objects illuminated by
  white light
• a white objects reflects all the light incident
  on it
• looks white
• a red object absorbs predominantly lower
  wavelength light
• red light reflected back to eye
• a yellow object absorbs light at each end of
  spectrum
• reflects back light around middle (580 nm)

11
Subtractive colour models

• if we mix yellow and red together we combine both
  absorption spectra
• some light in between yellow and red gets
  reflected back
• object looks orange
• if we mix more colours together
• until all visible wavelengths are absorbed
• the object looks black

12
CMY colour

• subtractive colour model
• used for printing
• colour of ink
• inverse of RGB colour cube
• origin is white
• no ink to absorb light
• opposite corner black
• axes
• Cyan
• absorbs red light
• Magenta
• absorbs green light
• Yellow
• absorbs blue light

13
CMY colour

• other corners
• cyan magenta blue
• magenta yellow red
• yellow cyan green
• in practice, combining three colour inks gives a
  muddy grey
• use black ink as well
• CYMK
• K for blacK

14
HSL / HSB

• Hue, Saturation, Luminescence or Brightness
• imagine looking at colour cube along diagonal
• see colour hexagon
• white or grey in middle
• Hue
• the colour
• specify by angle about centre
• red 0
• yellow 60
• green 120
• cyan 180
• blue 240
• magenta 300

15
HSL / HSB

• Saturation
• intensity of hue
• 0 for greyscale
• no hue at all
• maximum for pure hue
• no grey
• specify by distance from centre
• 0 centre
• maximum around rim
• Luminescence or Brightness
• 0 for black no light
• maximum for white

grey
16
HSL

• colour hexagon / circle is base of double cone
• axis is Luminescence
• 0 bottom apex is black
• no light
• top apex is white
• maximum luminescence
• pure hues around middle where L is 50 and S is
  100

grey
17
HSL

• HSL colour chooser for Powerpoint
• all three components on 0-255 scale
• brown
• hue 21
• red near 0
• saturation 165
• about 2/3
• luminescence 51
• about 1/5 near black
• note pure hues across top of chooser
• grey at bottom
• slider for luminescence

18
RGB cube and HSV scale
19
Colour palettes

• full colour (8 bits each for Red, Green and Blue)
  uses 24 bits per pixel
• can describe 16.7 million different colours
• enormous storage space
• 200 x 200 pixel image x 3 bytes/pixel 120 kB
• can reduce storage by nearly a factor of 3 by
  using a colour palette (colour look-up table)
• the image has only 256 different colours
• store full-colour (24 bit) description of each of
  these colours
• the palette
• the colour of each pixel in image is described by
  1-byte index into palette

20
Colour look-up tables or palettes

• pixels in image CLUT

21
Colour palettes

• palette entries could be 24-bit colours
• choose best colours from 16.7 million
  possibilities
• can optimise palette for application
• picture of sea
• palette could have lots of blues
• picture of desert
• less blues, more browns
• default system palettes
• chosen to be optimal for most applications
• different for Windows and MacIntosh
• Web palette
• colours common to both systems
• browser-safe should be displayable in most
  browsers

22
System palettes
MacIntosh
Windows
23
Dithering

• if a desired colour is not on the palette
• can approximate by combining pixels of two or
  more colours that are on the palette
• dithering
• magnified view
• see pixels of different colours

24
Further work

• Tutorial
• colour models in Fireworks and Maya
• continue with 3D modelling tutorials
• Reading
• Kerlow
• Section 6.2 "Colour"
• Hearn and Baker
• Chapter 12 "Colour models and colour
  applications
• Hexidecimal colour codes
• http//www.weijers.net/guide/colours.php
• Jan's guide to HTML and more
• "A simple account of colour vision" by Barry Gray
• www.barrygray.pwp.blueyonder.co.uk/Tutoring/ColVis
  .html