1. 4.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 4 – Colour Models

2. 4.2 Si23_03 Colour Models n 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 n A colour will be defined by its position in this space

3. 4.3 Si23_03 RGB Colour Model 0,0,0 Black 1,0,0 Red 0,1,0 Green 0,0,1 Blue 1,1,1 White 1,0,1 Magenta 0,1,1 Cyan 1,1,0 Yellow 3D cube with RGB device signals aligned with axes of cube Black at origin; red, green, blue at end of axes; grey values along long diagonal

4. 4.4 Si23_03 RGB Cube

5. 4.5 Si23_03 RGB Colour Model n Advantages – relates easily to CRT operation – easy to implement n 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?

6. 4.6 Si23_03 Hue, Lightness, Saturation Model n The Hue, Lightness, Saturation (HLS) colour model is more intuitive RedCyan Yellow Green Magenta Blue Hues are placed on a hexagon, with red at 0, green at 120, and blue at 240 degrees

7. 4.7 Si23_03 Hue, Lightness, Saturation Model RedCyan Yellow Green Magenta Blue Lightness 1.0 White Black0.0 Lightness axis goes from 0.0 to 1.0

8. 4.8 Si23_03 Hue, Lightness, Saturation Model RedCyan Yellow Green Magenta Blue Lightness 1.0 White Black0.0 Saturation is given by the distance from the central axis

9. 4.9 Si23_03 Hue, Lightness, Saturation Model RedCyan Yellow Green Magenta Blue Lightness 1.0 White Black0.0 L S H The final model is a double hexagonal cone

10. 4.10 Si23_03 Hue, Lightness, Saturation Model n This model is commonly used in computer graphics n Advantages – intuitive: choose hue, vary lightness, vary saturation n Disadvantages – directly related to RGB (cube stood on end) so different on different monitors – not perceptually uniform

11. 4.11 Si23_03 Hue, Saturation and Value (HSV) n Alternative method is known as HSV n Both HLS and HSV widely used in computer graphics RedCyan Yellow Green Magenta Blue Black White V S H

12. 4.12 Si23_03 CIE Colour System n Commission Internationale de LEclairage (CIE) have developed the most accurate colour specification system n 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

13. 4.13 Si23_03 Colour Matching This gives set of three curves showing relative amounts of each primary required at each wavelength 400500600700 BG R relative intensity Note curves (esp red) go negative! This means that the primary light had to be repositioned so as to add to the test light. Cyan at 500nm for example cannot be matched by blue and green, but must be diluted with red.

14. 4.14 Si23_03 n Tristimulus functions F x, F y, F z produced as a combination of the R,G,B matching functions Colour of any wavelength is now matched by positive amounts of F x, F y, F z F y matches the combined response of cones - ie the luminance efficiency of the eye 400700 CIE t-fun F x ( ) = 0.49R( ) + 0.31G( ) + 0.20B( ) F y ( ) = 0.18R( ) + 0.81 G( ) + 0.01B( ) F z ( ) = 0.00R( ) + 0.01G( ) + 0.99B( ) FzFz CIE Tristimulus Functions FyFy FxFx

15. 4.15 Si23_03 Tristimulus Values n Colour of light in CIE is measured by tristimulus values X,Y,Z FxFx FyFy FzFz 400700 CIE t-fun 400700 Light source X = 25.3 Y =19.6 Z =13.3 For each, take light source power, multiply by CIE F x -value and add over all wavelengths to get X; similarly for Y and Z. Tristimulus values

16. 4.16 Si23_03 CIE Colour Space n Thus any colour can be uniquely defined in terms of co-ordinates (X,Y,Z) n The set of all visible colours forms a cone shape n 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)

17. 4.17 Si23_03

18. 4.18 Si23_03 CIE Colour Diagram 700 600 500 400 520 red green cyan purple y 1.0 x 0 pure colours lie on perimeter white at centre dot colours become more saturated on moving from white to boundary axes are outside the horseshoe

19. 4.19 Si23_03 CIE Colour Diagram 700 600 500 400 520 red green cyan purple y 1.0 x 0 Combinations of two colours, A and B, represented as straight line between A and B in diagram. A B

20. 4.20 Si23_03 Colour Gamuts 700 600 500 400 520 red green cyan purple y 1.0 x 0 indicates colour of RGB phosphors indicates the colour gamut - set of colours that can be produced by that monitor G R B

21. 4.21 Si23_03 CIE Colour Diagram 700 600 500 400 520 red green cyan purple y 1.0 x 0 W pure colour Line from pure colour to white gives effect of desaturating the colour

22. 4.22 Si23_03 CIELUV Space n The CIE 1931 space is not wholly satisfactory – X, Y, Z primaries are imaginary sources – Space is non-uniform n Led to publication in 1976 of the CIELUV uniform colour spacee Cross section through CIELUV model

23. 4.23 Si23_03 Colour Naming System

24. 4.24 Si23_03 Web Colours n 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 n Netscape defined set of 216 (6x6x6) web safe colours