Introduction to Color Spaces

1. Introduction to Color Spaces Author: Chik-Yau Foo E-mail: r89922082@ms89.ntu.edu.tw Mobile phone: 0920-767-580 v030305 Presenter: Wei-Cheng Lin E-mail: r97944028@ntu.edu.tw Mobile Phone: 0912-808-362

2. 106 103 Long-wave radio Short-wave radio 100 109 Microwave 10-3 1012 TV Infrared 10-6 1015 Visible spectrum Ultraviolet 10-9 1018 X-rays 10-12 1021 Gamma rays Cosmic rays The EM Spectrum • Only a small part of the EM* spectrum is visible to us. • This part is known as the visible spectrum. • Wavelength in the region of 380 nm to 750 nm. Frequency (Hz) Wavelength (m) *Electro-Magnetic

3. Light and the Human Eye • When we focus on an image, light from the image enters the eye through the cornea and the pupil. • The light is focused by the lens onto the retina. Fovea Lens Retina Pupil Optic nerve Cornea Iris

4. Rods and Cones • When light reaches the retina, one of two kinds of light sensitive cells are activated. • These cells, called rods and cones, translate the image into electrical signals. • The electrical signals are transmitted through the optical nerve, and to the brain, where we will perceive the image. Rod Cone Retina light

5. Relative neural response of rods as a function of light wavelength. 1.00 0.75 0.50 Relative response 0.25 0.00 400 500 600 700 Wavelength (nm) Rods: Twilight Vision • 130 million rod cells per eye. • 1000 times more sensitive to light than cone cells. • Most to green light (about 550-555 nm), but with a broad range of response throughout the visible spectrum. • Produces relatively blurred images, and in shades of gray. • Pure rod vision is also called twilight vision.

6. Spectral absorption of light by the three cone types 1.00 M S L 0.75 0.50 Relative absorbtion 0.25 0.00 400 500 600 700 Wavelength (nm) Cones: Color Vision • 7 million cone cells per eye. • Three types of cones* (S, M, L), each "tuned" to different maximum responses at:- • S : 430 nm (blue) (2%) • M: 535 nm (green) (33%) • L : 590 nm (red) (65%) • Produces sharp, color images. • Pure cone vision is called photopic or color vision. *S = Short wavelength cone M = Medium wavelength cone L = Long wavelength cone

7. Rod vision Cone vision • This is because rods are distributed all over the retina, while cones are concentrated in the fovea. Rod vision Cone vision 130 million rods 7 million cones Photopic vs Twilight Vision • There are about 20x more rods than cones in the eyes, but rod vision is poorer than cone vision.

8. Spectral absorption of light by the three cone types Effective sensitivity of cones (log plot) 1.00 M S L 0.75 0.50 Relative absorbtion 0.25 1.00 L M 0.00 0.1 S 400 400 500 500 600 600 700 700 Wavelength (nm) Wavelength (nm) 0.01 Relative sensitivity S, M, and L cone distribution in the fovea 0.001 0.0001 Eye Color Sensitivity • Although cone response is similar for the L, M, and S cones, the number of the different types of cones vary. • L:M:S = 40:20:1 • Cone responses typically overlap for any given stimulus, especially for the M-L cones. • The human eye is most sensitive to green light.

9. r g b Tristimulus values Theory of Trichromatic Vision • The principle that the color you see depends on signals from the three types of cones (L, M, S). • The principle that visible color can be mapped in terms of the three colors (R, G, B) is called trichromacy. • The three numbers used to represent the different intensities of red, green, and blue needed are called tristimulus values. =

10. Illumination source x • Illumination source Object reflectance factor • Object reflectance x • Observer response Observer spectral sensitivity • The product of these three factors will produce the sensation of color. = r g b Observer response Tristimulus values (Viewer response) Seeing Colors • The colors we perceive depends on:-

11. Additive Colors • Start with Black – absence of any colors. The more colors added, the brighter it gets. • Color formation by the addition of Red, Green, and Blue, the three primary colors • Examples of additive color usage:- • Human eye • Lighting • Color monitors • Color video cameras Additive color wheel

12. Subtractive Colors • Starts with a white background (usually paper). • Use Cyan, Magenta, and/or Yellow dyes to subtract from light reflected by paper, to produce all colors. • Examples of Subtractive color use:- • Color printers • Paints Subtractive color wheel

13. W M B R K Y C G Using Subtractive Colors on Film • Color absorbing pigments are layered on each other. • As white light passes through each layer, different wavelengths are absorbed. • The resulting color is produced by subtracting unwanted colors from white. White light Green Red Blue Black White Pigment layers Cyan Yellow Magenta Yellow Magenta Cyan Black Reflecting layer (white paper)

14. Primary Mixture Test Light Tristimulus values Color Matching Experiment • Observer views a split screen of pure white (100% reflectance). • On one half, a test lamp casts a pure spectral color on the screen. • On the other, three lamps emitting variable amounts of red, green, and blue light are adjusted to match the color of the test light. • The amounts of red, green and blue light used to match the pure colors were recorded when an identical match was obtained. • The RGB tristimulus values for each distinct color was obtained this way. Color matching experimental setup

15. 9 Relative power 0 380 480 580 680 780 Wavelength (nm) The dashed line represents daylight reflected from sunflower, while the solid line represents the light emitted from the color monitor adjusted to match the color of the sunflower. Metamerism • Spectrally different lights that simulate cones identically appear identical. • Such colors are called color metamers. • This phenomena is called metamerism. • Almost all the colors that we see on computer monitors are metamers.

16. 9 9 9 Relative power Relative power Relative power 0 0 0 380 380 380 480 480 480 580 580 580 680 680 680 780 780 780 Wavelength (nm) Wavelength (nm) Wavelength (nm) The Mechanics of Metamerism • Under trichromacy, any color stimulus can be matched by a mixture of three primary stimuli. • Metamers are colors having the same tristimulus values R, G, and B; they will match color stimulus C and will appear to be the same color. The two metamers look the same because they have similar tristimulusvalues.

17. Human vision gamut Photographic film gamut 0.8 0.6 y 0.4 Monitor gamut 0.2 0 0 0.2 0.4 0.6 0.8 x Gamut • A gamut is the range of colors that a device can render, or detect. • The larger the gamut, the more colors can be rendered or detected. • A large gamut implies a large color space.

18. Color Spaces • A Color Space is a method by which colors are specified, created, and visualized. • Colors are usually specified by using three attributes, or coordinates, which represent its position within a specific color space. • These coordinates do not tell us what the color looks like, only where it is located within a particular color space. • Color models are 3D coordinate systems, and a subspace within that system, where each color is represented by a single point.

19. Color Spaces • Color Spaces are often geared towards specific applications or hardware. • Several types:- • HSI (Hue, Saturation, Intensity) based • RGB (Red, Green, Blue) based • CMY(K) (Cyan, Magenta, Yellow, Black) based • CIE based • Luminance - Chrominance based CIE: International Commission on Illumination

20. Cyan (0,1,1) Blue (0,0,1) Magenta (1,0,1) White (1,1,1) Green (0,1,0) Black (0,0,0) Red (1,0,0) Yellow (1,1,0) RGB Color Space RGB* • One of the simplest color models. Cartesian coordinates for each color; an axis is each assigned to the three primary colors red (R), green (G), and blue (B). • Corresponds to the principles of additive colors. • Other colors are represented as an additive mix of R, G, and B. • Ideal for use in computers. *Red, Green, and Blue

21. Full Color Image Red Channel Green Channel Blue Channel RGB Image Data

22. White Magenta Red Blue Black Yellow Cyan Green CMY(K)* • Main color model used in the printing industry. Related to RGB. • Corresponds to the principle of subtractive colors, using the three secondary colors Cyan, Magenta, and Yellow. • Theoretically, a uniform mix of cyan, magenta, and yellow produces black (center of picture). In practice, the result is usually a dirty brown-gray tone. So black is often used as a fourth color. Producing other colors from subtractive colors. *Cyan, Magenta, Yellow, (and blacK)

23. Cyan Image (1-R) Full Color Image Magenta Image (1-G) Yellow Image (1-B) CMY Image Data

24. CMY – RBG Transformation • The following matrices will perform transformations between RGB and CMY color spaces. • Note that:- • R = Red • G = Green • B = Blue • C = Cyan • M = Magenta • Y = Yellow • All values for R, G, B and C, M, Y must first be normalized.

25. CMY – CMYK Transformations • The following matrices will perform transformations between CMY and CMYK color spaces. • Note that:- • C = Cyan • M = Magenta • Y= Yellow • K = blacK • All values for R, G, B and C, M, Y, K must first be normalized.

26. RGB – CMYK Transformations • The following matrices perform transformations between RGB and CMYK color spaces. • Note that:- • R = Red • G = Green • B = Blue • C = Cyan • M = Magenta • Y = Yellow • All values for R, G, B and C, M, Y must first be normalized.

27. RGB – Gray Scale Transformations • The luminancy component, Y, of each color is summed to create the gray scale value. • ITU-R Rec. 601-1* Gray scale: Y = 0.299R + 0.587G + 0.114B • ITU-R Rec. 709 D65 Gray scale Y = 0.2126R + 0.7152G + 0.0722B • ITU standard D65 Gray scale (Very close to Rec 709!) Y = 0.222R + 0.707G + 0.071B *601-1: Based on an old television (NTSC: National Television System Committee) standard 709 : Based on High Definition TV colorimetry (Contemporary CRT phosphors) ITU : International Telecommunication Union

28. Photographic film gamut 0.8 6 color CMY printer gamut 0.6 y 0.4 0.2 Monitor RGB gamut 0 0 0.2 0.4 0.6 0.8 x RGB and CMYK Deficiencies • RGB and CMY color models limited to brightest available primaries (R, G, and B) and secondaries (CYM). • Not intuitive. We think of light in terms of color, intensity of color, and brightness. • Colors changed by changing R, G, B ratios. • Brightness changed by changing R, G, and B, while maintaining their ratios. • Intensity changed by projecting RGB vector toward largest valued primary color (R, G, or B). Hexachrome: Cyan, Magenta, Yellow, Black, Orange, Green

29. HSI / HSL / HSV* • Very similar to the way human visions see color. • Works well for natural illumination, where hue changes with brightness. • Used in machine color vision to identify the color of different objects. • Image processing applications like histogram operations, intensity transformations, and convolutions operate on only an image's intensity and are performed much easier on an image in the HSI color space. *H=Hue, S = Saturation, I (Intensity) = B (Brightness), L = Lightness, V = Value

30. Blue 240º Red 0º Green 120º • Saturation • Degree to which hue differs from neutral gray. • 100% = Fully saturated, high contrast between other colors. • 0% = Shade of gray, low contrast. • Measured radially from intensity axis. RGB cube viewed from gray-scale axis, and rotated 30° HSI Color Wheel RGB cube viewed from gray-scale axis RGB Color Space Saturation 0% 100% HSI Color Space • Hue • What we describe as the color of the object. • Hues based on RGB color space. • The hue of a color is defined by its counterclockwise angle from Red (0°); e.g. Green = 120 °, Blue = 240 °.

31. 100% Intensity Hue 0% 100% Saturation 0% HSI Color Space • Intensity • Brightness of each Hue, defined by its height along the vertical axis. • Max saturation at 50% Intensity. • As Intensity increases or decreases from 50%, Saturation decreases. • Mimics the eye response in nature; As things become brighter they look more pastel until they become washed out. • Pure white at 100% Intensity. Hue and Saturation undefined. • Pure black at 0% Intensity. Hue and Saturation undefined.

32. Hue Channel Saturation Channel Intensity Channel Full Image HSI Image Data

33. Hue • where • Saturation • Intensity HSI - RGB • For a given RGB color of (R, G, B), the same color in the HSI Model is C(x,y) = (H, S, I), where

34. Blue (0,0,255) Green (0,255,0) Red (255,0,0) Blue 240º Red 0º Green 120º RGB to HSI Example • Consider the RGB color defined by (215, 97,198) R = 215, G = 97, B = 198 Therefore, HSI coordinates = (308.64°, 0.843, 0.67)

35. For 240º  H  360 º Blue 240º Red 0º For 120º  H  240 º Green 120º For 0º  H  120 º HSI to RBG • Dependent on which sector H lies in.

36. 100% Value Hue 0% 100% Saturation 0% HSV Color Space • Hue and Saturation similar to that of HSI color model. • V: Value; defined as the height along the central vertical axis. • Like Intensity in HSI, color intensity increases as Value increases. HSV: Hue, Saturation, and Value

37. Intensity Value Smax at V100 Smax at I50 HSV Color Space • Hue and Saturation similar to that of HSI color model. • V: Value; defined as the height along the central vertical axis. • Like Intensity in HSI, color intensity increases as Value increases. • As Value increases, hues become more saturated. Hues do not progress through the pastels to white, just as fluorescent images never change colors even though its intensity may increase. HSV is good for working with fluorescent colors. HSV: Hue, Saturation, and Value

38. Original Image Hue Saturation Intensity Intensity Operations in HSI • To change the individual color of any region in the RGB image, change the value of the corresponding region in the Hue image. • Then convert the new H image with the original S and I images to get the transformed RGB image. • Saturation and Intensity components can likewise be manipulated.

39. Disadvantages of HSI Color Model There are many disadvantages to the HS color model. For example: • Cannot perform addition of colors expressed in polar coordinates. Transformations are very difficult because Hue is expressed as an angle. • For color machine vision, the hues of low-saturation may be difficult to determine accurately. Systems which must be able to differentiate all colors, saturated and unsaturated, will have significant problems using the HSI representation. • When saturation is zero, hue is undefined. • Transforming between HSI and RGB is complicated.

40. 0.4 g r 0.3 0.2 Tristimulus values b 0.1 0.0 -0.1 380 480 580 680 780 Wavelength (nm) 1931 CIE* Standard Observer(r, g, b) • The following color matching functions were obtained. • There were problems with the r, g, b color matching functions. • Negative values meant that the color had to be added to the test light before the two halves could be balanced. Color-matching functions for 1931 Standard Observer, the average of 17 color-normal observers having matched each wavelength of the equal energy spectrum with primaries of 435.8nm, 546.1 nm, and 700 nm, on a bipartite 2° field, surrounded by darkness. *Commission Internationale de L’Éclairage

41. 2.0 z 1.5 x y Tristimulus values 1.0 0.5 1931 standard observer (2° observer). 0.0 380 480 580 680 780 Wavelength (nm) 1931 CIE Standard Observer(x, y, z) • CIE adopted another set of primary stimuli, designated as X, Y, and Z. • Special properties of X, Y, Z:- • Imaginary (non-physical) primary. • All luminance information is contributed by Y. • Linearly related to R, G, B. • Non-negative values for all tristimulus values.

42. CIE 1931 xy Chromaticity Diagram 2D projection of 3D CIE XYZ color space onto X+Y+Z=1 plane. x and y calculated as follows:- The chromaticity of a color is determined by (x,y).

43. (0.5, 0.4) CIE 1931 xy Chromaticity Diagram • For color C, where C 0.5 X + 0.4 Y + 0.1 Z • Color C is represented as (0.5, 0.4) on the Chromaticity diagram.

44. CIE 1931 xyY Chromaticity Diagram • Each point on xy corresponds to many points in the original 3D CIE XYZ space. • Color is usually described by xyY coordinates, where Y is the luminance, or lightness component of color. • Y starts at 0 from the white spot (D65) on the xy plane, and extends perpendicularly to 100. • As the Y increases, the colors become lighter, and the range of colors, or gamut, decreases.

45. CIE XYZD65 to sRGB* • The following transformations allow transformations between CIE XYZD65 and the sRGB color models. *sRGB = Standard RGB, the standard for Internet use.

46. CIE XYZRec. 609-1 - RGB • The following are the transformations needed to convert between CIE XYZRec.609-1 and RGB.

47. CIE XYZ - RGBRec. 709 • Use the following matrices to transform between CIE XYZ and Rec. 709 RGB (with its D65 white).

48. XYZD65 - XYZD50 Transformations • If the illuminant is changed from D50 to D65, the observed color will also change. • The following matrices enable transformations between XYZD65 and XYZD50.

49. Inadequacies in the 1931 xy Chromaticity Diagram • Each line in the diagram represents a color difference of equal proportion. • The lines vary in length, sometimes greatly, depending on what part of the diagram they're in. • The differences in line length indicates the amount of distortion between parts of the diagram.

50. CIE 1960 u,vChromaticity Diagram • To correct for the deformities in the 1931 xy diagram, a number of uniform chromaticity scale (UCS) diagrams were proposed. • The following formula transforms the XYZ values or x,y coordinates to a set of u,v values, which present a visually more accurate 2D model.