4.1Si23_03

SI23Introduction to Computer

Graphics

SI23Introduction to Computer

Graphics

Lecture 4 – Colour Models

4.2Si23_03

Colour ModelsColour Models

In order to help us specify colour, a number of attempts have been made to define colour spaces– A formal method of representing

the visual sensations of colour A colour will be defined by its

position in this space

4.3Si23_03

RGB Colour ModelRGB Colour Model

0,0,0Black

1,0,0Red

0,1,0Green

0,0,1Blue

1,1,1White

1,0,1Magenta

0,1,1Cyan

1,1,0Yellow

3D cube withRGB device signalsaligned with axesof cube

Black at origin;red, green, blue atend of axes;grey values alonglong diagonal

4.4Si23_03

RGB CubeRGB Cube

4.5Si23_03

RGB Colour ModelRGB Colour Model

Advantages– relates easily to CRT operation– easy to implement

Disadvantages– RGB values generally not transferable

between devices (no standard `red’ phosphor)

– not perceptually uniform (colours close together near white are distinguishable, but not true near black)

– not intuitive - eg where is skin colour?

4.6Si23_03

Hue, Lightness, Saturation Model

Hue, Lightness, Saturation Model

The Hue, Lightness, Saturation (HLS) colour model is more intuitive

RedCyan

YellowGreen

MagentaBlue

Hues are placedon a hexagon,with red at 0,green at 120, andblue at 240 degrees

4.7Si23_03

Hue, Lightness, Saturation Model

Hue, Lightness, Saturation Model

RedCyan

YellowGreen

MagentaBlue

Lightness

1.0White

Black0.0

Lightness axis goesfrom 0.0 to 1.0

4.8Si23_03

Hue, Lightness, Saturation Model

Hue, Lightness, Saturation Model

RedCyan

YellowGreen

MagentaBlue

Lightness

1.0White

Black0.0

Saturation is givenby the distancefrom the central axis

4.9Si23_03

Hue, Lightness, Saturation Model

Hue, Lightness, Saturation Model

RedCyan

YellowGreen

MagentaBlue

Lightness

1.0White

Black0.0

L

S

H

The final modelis a double hexagonalcone

4.10Si23_03

Hue, Lightness, Saturation Model

Hue, Lightness, Saturation Model

This model is commonly used in computer graphics

Advantages– intuitive: choose hue, vary

lightness, vary saturation Disadvantages

– directly related to RGB (cube stood on end) so different on different monitors

– not perceptually uniform

4.11Si23_03

Hue, Saturation and Value (HSV)

Hue, Saturation and Value (HSV)

Alternative method is known as HSV

Both HLS and HSV widely used in computer graphics

RedCyan

YellowGreen

MagentaBlue

Black

White

V

S

H

4.12Si23_03

CIE Colour SystemCIE Colour System

Commission Internationale de L’Eclairage (CIE) have developed the most accurate colour specification system

Recall (lecture 3, slide 11/12) the colour matching experiments where observers matched test lights of each wavelength against combinations of R (700nm), G (546nm), B (436nm) - and averaged to give the `CIE standard observer’

4.13Si23_03

Colour MatchingColour Matching

This gives set of three curves showing relative amounts of each primary required at each wavelength

400 500 600 700

B G R

relativeintensity

Note curves (esp red) go negative! This means thatthe primary light had to be repositioned so as to addto the test light. Cyan at 500nm for example cannot bematched by blue and green, but must be diluted with red.

4.14Si23_03

Tristimulus functions Fx, Fy, Fz produced as a combination of the R,G,B matching functions

Colour of any wavelengthis now matched by positiveamounts of Fx, Fy, Fz

Fy matches the combinedresponse of cones - iethe luminance efficiency ofthe eye

400 700

CIEt-fun

Fx() = 0.49R() + 0.31G() + 0.20B()Fy () = 0.18R() + 0.81 G() + 0.01B()Fz () = 0.00R() + 0.01G() + 0.99B()

Fz

CIE Tristimulus FunctionsCIE Tristimulus Functions

FyFx

4.15Si23_03

Tristimulus ValuesTristimulus Values

Colour of light in CIE is measured by tristimulus values X,Y,Z

FxFy

Fz

400 700

CIEt-fun

400 700

Lightsource

X = 25.3Y =19.6Z =13.3

For each , take light source power, multiply by CIE Fx-value and addover all wavelengths to get X; similarly for Y and Z.

Tristimulus values

4.16Si23_03

CIE Colour SpaceCIE Colour Space

Thus any colour can be uniquely defined in terms of co-ordinates (X,Y,Z)

The set of all visible colours forms a cone shape

For convenience, it is common to take a slice through the cone to get a 2D colour diagram - slicing so that X+Y+Z=1

x = X / ( X+Y+Z )

y = Y / ( X+Y+Z)

4.17Si23_03

4.18Si23_03

CIE Colour DiagramCIE Colour Diagram

700

600500

400

520

red

green

cyan

purple

y1.0

x1.0

0

pure colourslie on perimeter

white at centre dot

colours becomemore saturated onmoving from whiteto boundary

axes are outsidethe horseshoe

4.19Si23_03

CIE Colour DiagramCIE Colour Diagram

700

600500

400

520

red

green

cyan

purple

y1.0

x1.0

0

Combinations of twocolours, A and B, represented as straightline between A and Bin diagram.

A

B

4.20Si23_03

Colour GamutsColour Gamuts

700

600500

400

520

red

green

cyan

purple

y1.0

x1.0

0

indicates colourof RGB phosphors

indicates thecolour gamut -set of coloursthat can be produced by thatmonitor

G

R

B

4.21Si23_03

CIE Colour DiagramCIE Colour Diagram

700

600500

400

520

red

green

cyan

purple

y1.0

x1.0

0

W

pure colourLine from purecolour to whitegives effect ofdesaturating thecolour

4.22Si23_03

CIELUV SpaceCIELUV Space

The CIE 1931 space is not wholly satisfactory– X, Y, Z primaries

are imaginary sources

– Space is non-uniform

Led to publication in 1976 of the CIELUV uniform colour spacee

Cross section throughCIELUV model

4.23Si23_03

Colour Naming SystemColour Naming System

4.24Si23_03

Web ColoursWeb Colours

For Web pages, colour specified as R,G,B values in range 0-255– Specified in the form

#RRGGBB where RR GG BB are hexadecimal values

– Thus (255,0,0) = #ff0000

– Also with names

Netscape defined set of 216 (6x6x6) web safe colours