Computer Graphics Chapter 12 Color Models and Color

  • Slides: 54
Download presentation
Computer Graphics Chapter 12 Color Models and Color Applications Somsak Walairacht, Computer Engineering, KMITL

Computer Graphics Chapter 12 Color Models and Color Applications Somsak Walairacht, Computer Engineering, KMITL

Outline n n n n n Properties of Light Color Models Standard Primaries and

Outline n n n n n Properties of Light Color Models Standard Primaries and the Chromaticity Diagram The RGB Color Model The YIQ and Related Color Models The CMY and CMYK Color Models The HSV Color Model The HLS Color Model Color Selection and Applications 01074410 / 13016218 Computer Graphics 2

Properties of Light n What is light? n n “light” = narrow frequency band

Properties of Light n What is light? n n “light” = narrow frequency band of electromagnetic spectrum The Electromagnetic Spectrum n n Red: 3. 8 x 1014 hertz Violet: 7. 9 x 1014 hertz 01074410 / 13016218 Computer Graphics 3

Spectrum of Light n Monochrome light can be described by frequency f and wavelength

Spectrum of Light n Monochrome light can be described by frequency f and wavelength λ n n n c = λ f (c = speed of light) Normally, a ray of light contains many different waves with individual frequencies The associated distribution of wavelength intensities per wavelength is referred to as the spectrum of a given ray or light source 01074410 / 13016218 Computer Graphics 4

The Human Eye 01074410 / 13016218 Computer Graphics 5

The Human Eye 01074410 / 13016218 Computer Graphics 5

Psychological Characteristics of Color n n n Dominant frequency (hue, color) Brightness (area under

Psychological Characteristics of Color n n n Dominant frequency (hue, color) Brightness (area under the curve), total light energy Purity (saturation), how close a light appear to be a pure spectral color, such as red n Purity = ED − EW n n n ED = dominant energy density EW = white light energy density Chromaticity, used to refer collectively to the two properties describing color characteristics: purity and dominant frequency 01074410 / 13016218 Computer Graphics 6

Intuitive Color Concepts n n n Color mixing created by an artist Shades, tints

Intuitive Color Concepts n n n Color mixing created by an artist Shades, tints and tones in scene can be produced by mixing color pigments (hues) with white and black pigments Shades n n n Tints n n n Add black pigment to pure color The more black pigment, the darker the shade Add white pigment to the original color Making it lighter as more white is added Tones n Produced by adding both black and white pigments 01074410 / 13016218 Computer Graphics 7

Colorimetry (CM) n CM is the branch of color science concerned with numerically specifying

Colorimetry (CM) n CM is the branch of color science concerned with numerically specifying the color of a physically defined visual stimulus n n n Stimuli with the same specification look alike under the same viewing conditions Stimuli that look alike have the same specification The numbers used are continuous functions of the physical parameters Colorimetry n. measuring of the intensity of color 01074410 / 13016218 Computer Graphics 8

CM Properties n n CM only considers the visual discriminability of physical beams of

CM Properties n n CM only considers the visual discriminability of physical beams of radiation Colors are an equivalence class of mutually indiscriminable beams Colors in this sense cannot be said to be “red”, “green” or any other “color name” Discriminability is decided before the brain comes into action - CM is not psychology 01074410 / 13016218 Computer Graphics 9

Color Matching Experiments n n Observers had to match a test light by combining

Color Matching Experiments n n Observers had to match a test light by combining three fixed primaries Goal: find the unique RGB coordinates for each stimulus 01074410 / 13016218 Computer Graphics 10

Tristimulus Values n The values RQ, GQ and BQ for a stimulus Q that

Tristimulus Values n The values RQ, GQ and BQ for a stimulus Q that fulfill Q = RQ*R + GQ*G + BQ*B are called the tristimulus values of Q n n n R = 700. 0 nm G = 546. 1 nm B = 435. 8 nm 01074410 / 13016218 Computer Graphics 11

Negative Light in a CME n if a match using only positive RGB values

Negative Light in a CME n if a match using only positive RGB values proved impossible, observers could simulate a subtraction of red from the match side by adding it to the test side 01074410 / 13016218 Computer Graphics 12

Color Models n Method for explaining the properties or behavior of color within some

Color Models n Method for explaining the properties or behavior of color within some particular context n n Primary Colors n n Combine the light from two or more sources with different dominant frequencies and vary the intensity of light to generate a range of additional colors 3 primaries are sufficient for most purposes Hues that we choose for the sources Color gamut is the set of all colors that we can produce from the primary colors Complementary color is two primary colors that produce white n Red and Cyan, Green and Magenta, Blue and Yellow 01074410 / 13016218 Computer Graphics 13

Color-Matching n n Colors in the vicinity of 500 nm can be matched by

Color-Matching n n Colors in the vicinity of 500 nm can be matched by subtracting an amount of red light from a combination of blue and green lights Thus, an RGB color monitor cannot display colors in the neighborhood of 500 nm 01074410 / 13016218 Computer Graphics 14

CIE XYZ n n n Problem solution: XYZ color system Tristimulus system derived from

CIE XYZ n n n Problem solution: XYZ color system Tristimulus system derived from RGB Based on 3 imaginary primaries All 3 primaries are outside the human visual gamut Only positive XYZ values can occur 1931 by CIE (Commission Internationale de l’Eclairage) 01074410 / 13016218 Computer Graphics 15

Transformation CIE RGB->XYZ n n n Projective transformation specifically designed so that Y =

Transformation CIE RGB->XYZ n n n Projective transformation specifically designed so that Y = V (luminous efficiency function) XYZ CIE RGB uses inverse matrix XYZ any RGB matrix is device dependent X = 0. 723 R + 0. 273 G + 0. 166 B Y = 0. 265 R + 0. 717 G + 0. 008 B Z = 0. 000 R + 0. 008 G + 0. 824 B 01074410 / 13016218 Computer Graphics 16

The XYZ Model n CIE primitives is referred to as the XYZ model n

The XYZ Model n CIE primitives is referred to as the XYZ model n In XYZ color space, color C (λ) represented as C (λ) = (X, Y, Z) where X Y Z are calculated from the color-matching functions k = 683 lumens/watt I(λ) = spectral radiance f = color-matching function 01074410 / 13016218 Computer Graphics 17

The XYZ Model n Normalized XYZ values n Normalize the amounts of each primary

The XYZ Model n Normalized XYZ values n Normalize the amounts of each primary against the sum X+Y+Z, which represent the total light energy where z = 1 - x - y, color can be represented with just x and y called chromaticity value, it depend only on hue and purify Y is luminance 01074410 / 13016218 Computer Graphics 18

RGB vs. XYZ 01074410 / 13016218 Computer Graphics 19

RGB vs. XYZ 01074410 / 13016218 Computer Graphics 19

The CIE Chromaticity Diagram n A tongue-shape curve formed by plotting the normalized amounts

The CIE Chromaticity Diagram n A tongue-shape curve formed by plotting the normalized amounts x and y for colors in the visible spectrum n n n Points along the curve are spectral color (pure color) Purple line, the line joining the red and violet spectral points Illuminant C, plotted for a white light source and used as a standard approximation for average daylight Spectral Colors C Illuminant 01074410 / 13016218 Computer Graphics Purple Line 20

The CIE Chromaticity Diagram n n n Luminance values are not available because of

The CIE Chromaticity Diagram n n n Luminance values are not available because of normalization Colors with different luminance but same chromaticity map to the same point Usage of CIE chromaticity diagram n n Comparing color gamuts for different set of primaries Identifying complementary colors Determining purity and dominate wavelength for a given color Color gamuts n Identify color gamuts on diagram as straight-line segments or polygon regions 01074410 / 13016218 Computer Graphics 21

The CIE Chromaticity Diagram n Color gamuts n n n All color along the

The CIE Chromaticity Diagram n Color gamuts n n n All color along the straight line joining C 1 and C 2 can be obtained by mixing colors C 1 and C 2 Greater proportion of C 1 is used, the resultant color is closer to C 1 than C 2 Color gamut for C 3, C 4, C 5 generate colors inside or on edges n No set of three primaries can be combined to generate all colors 01074410 / 13016218 Computer Graphics 22

The CIE Chromaticity Diagram n Complementary colors n n Represented on the diagram as

The CIE Chromaticity Diagram n Complementary colors n n Represented on the diagram as two points on opposite sides of C and collinear with C The distance of the two colors C 1 and C 2 to C determine the amount of each needed to produce white light 01074410 / 13016218 Computer Graphics 23

The CIE Chromaticity Diagram n Dominant wavelength n n n Draw a straight from

The CIE Chromaticity Diagram n Dominant wavelength n n n Draw a straight from C through color point to a spectral color on the curve, the spectral color is the dominant wavelength Special case: a point between C and a point on the purple line Cp, take the compliment Csp as dominant Purity n n For a point C 1, the purity determined as the relative distance of C 1 from C along the straight line joining C to Cs Purity ratio = d. C 1 / d. Cs 01074410 / 13016218 Computer Graphics 24

sub. YM Complementary Colors n Additive n n Blue is one-third Yellow (red+green) is

sub. YM Complementary Colors n Additive n n Blue is one-third Yellow (red+green) is twothirds When blue and yellow light are added together, they produce white light Subtractive n n Orange (between red and yellow)<>cyan-blue green-cyan<>magentared color Pair of complementary colors n n add. RG n sub. CR n blue and yellow green and magenta red and cyan 01074410 / 13016218 Computer Graphics 25

The RGB Color Model n Basic theory of RGB color model n n The

The RGB Color Model n Basic theory of RGB color model n n The tristimulus theory of vision It states that human eyes perceive color through the stimulation of three visual pigment of the cones of the retina n n Red, Green and Blue Model can be represented by the unit cube defined on R, G and B axes 01074410 / 13016218 Computer Graphics 26

The RGB Color Model n n An additive model, as with the XYZ color

The RGB Color Model n n An additive model, as with the XYZ color system Each color point within the unit cube can be represented as a weighted vector sum of the primary colors, using vectors R, G and B C(λ)=(R, G, B)=RR+GG+BB Chromaticity coordinates for the National Television System Committee (NTSC) standard RGB primaries 01074410 / 13016218 Computer Graphics 27

Subtractive RGB Colors Cyan Green Yellow Black Red Blue Yellow absorbs Blue Magenta absorbs

Subtractive RGB Colors Cyan Green Yellow Black Red Blue Yellow absorbs Blue Magenta absorbs Green Cyan absorbs Red Magenta White minus Blue minus Green = Red 01074410 / 13016218 Computer Graphics 28

The CMY and CMYK Color Models n Color models for hard-copy devices, such as

The CMY and CMYK Color Models n Color models for hard-copy devices, such as printers n n n Produce a color picture by coating a paper with color pigments Obtain color patterns on the paper by reflected light, which is a subtractive process The CMY parameters n n A subtractive color model can be formed with the primary colors cyan, magenta and yellow Unit cube representation for the CMY model with white at origin 01074410 / 13016218 Computer Graphics 29

The CMY and CMYK Color Models n Transformation between RGB and CMY color spaces

The CMY and CMYK Color Models n Transformation between RGB and CMY color spaces n n Transformation matrix of conversion from RGB to CMY Transformation matrix of conversion from CMY to RGB 01074410 / 13016218 Computer Graphics 30

The YIQ and Related Color Models n n YIQ, NTSC color encoding forming the

The YIQ and Related Color Models n n YIQ, NTSC color encoding forming the composite video signal YIQ parameters n n Calculated Y from the RGB equations n n Y = 0. 299 R + 0. 587 G + 0. 114 B Chromaticity information (hue and purity) is incorporated with I and Q parameters, respectively n n Y, same as the Y complement in CIE XYZ color space, luminance Calculated by subtracting the luminance from the red and blue components of color I =R–Y Q=B–Y Separate luminance or brightness from color, because we perceive brightness ranges better than color 01074410 / 13016218 Computer Graphics 31

The YIQ and Related Color Models (2) n Transformation between RGB and YIQ color

The YIQ and Related Color Models (2) n Transformation between RGB and YIQ color spaces n Transformation matrix of conversion from RGB to YIQ n Transformation matrix of conversion from YIQ to RGB n Obtain from the inverse matrix of the RGB to YIQ conversion 01074410 / 13016218 Computer Graphics 32

The HSV Color Model n n Interface for selecting colors often use a color

The HSV Color Model n n Interface for selecting colors often use a color model based on intuitive concepts rather than a set of primary colors The HSV parameters n n n Color parameters are hue (H), saturation (S) and value (V) Derived by relating the HSV parameters to the direction in the RGB cube Obtain a color hexagon by viewing the RGB cube along the diagonal from the white vertex to the origin 01074410 / 13016218 Computer Graphics 33

The HSV Color Model n The HSV hexcone n n n Hue is represented

The HSV Color Model n The HSV hexcone n n n Hue is represented as an angle about the vertical axis ranging from 0 degree at red to 360 degree Saturation parameter is used to designate the purity of a color Value is measured along a vertical axis through center of hexcone 01074410 / 13016218 Computer Graphics 34

HSV Color Model Hexcone n Color components: n n n 01074410 / 13016218 Computer

HSV Color Model Hexcone n Color components: n n n 01074410 / 13016218 Computer Graphics Hue (H) ∈ [0°, 360°] Saturation (S) ∈ [0, 1] Value (V) ∈ [0, 1] 35

HSV Color Definition n Color definition n n 01074410 / 13016218 Computer Graphics Select

HSV Color Definition n Color definition n n 01074410 / 13016218 Computer Graphics Select hue, S=1, V=1 Add black pigments, i. e. , decrease V Add white pigments, i. e. , decrease S Cross section of the HSV hexcone showing regions for shades, tints, and tones 36

HSV n n Hue is the most obvious characteristic of a color Chroma is

HSV n n Hue is the most obvious characteristic of a color Chroma is the purity of a color n n High chroma colors look rich and full Low chroma colors look dull and grayish Sometimes chroma is called saturation Value is the lightness or darkness of a color n n Sometimes light colors are called tints, and Dark colors are called shades 01074410 / 13016218 Computer Graphics 37

Transformation n To move from RGB space to HSV space: n Can we use

Transformation n To move from RGB space to HSV space: n Can we use a matrix? No, it’s non-linear. 01074410 / 13016218 Computer Graphics 38

The HSV Color Model n Transformation between HSV and RGB color spaces n Procedure

The HSV Color Model n Transformation between HSV and RGB color spaces n Procedure for mapping RGB into HSV class rgb. Space {public: float r, g, b; }; class hls. Space {public: float h, l, s; }; void hsv. T 0 rgb (hls. Space& hls, rgb. Space& rgb) { /* HLS and RGB values are in the range from 0 to 1. 0 */ int k float aa, bb, cc, f; if ( s <= 0. 0) r = g = b = v; /* Have gray scale if s = 0 */ else { if (h == 1. 0) h = 0. 0; h *= 6. 0; k = floor (h); f = h - k; aa = v * (1. 0 - s); bb = v * (1. 0 - (s * f)); cc = v * (1. 0 - (s * (1. 0 - f))); switch case case } (k) 0: 1: 2: 3: 4: 5: { r r r = = = v; bb; aa; cc; v; g g g = = = cc; v; v; bb; aa; b b b = = = aa; cc; v; v; bb; break; break; } } 01074410 / 13016218 Computer Graphics 39

The HSV Color Model n Transformation between HSV and RGB color spaces n Procedure

The HSV Color Model n Transformation between HSV and RGB color spaces n Procedure for mapping HSV into RGB class rgb. Space {public: float r, g, b; }; class hls. Space {public: float h, l, s; }; const float no. Hue = -1. 0; inline float min(float a, float b) {return (a < b)? a : b; } inline float mab(float a, float b) {return (a > b)? a : b; } void rgb. TOhsv (rgb. Space rgb, hls. Space hls) { float min. RGB = min (r, min (g, b)), max. RGB = max (r, max (g, b)); float delta. RGB = max. RGB - min. RGB; if (s <= 0. 0) h = no. Hue; v = max. RGB; else { if (max. RGB != 0. 0) s = delta. RGB / max. RGB; if (r == max. RGB) h = (g - b) / delta. RGB; else s = 0. 0; else if (g == max. RGB) h = 2. 0 + (b - r) / delta. RGB; else if (b == max. RGB) h = 4. 0 + (r - g) / delta. RGB; h *= 60. 0; if (h < 0. 0) h += 360. 0; h /= 360. 0; } } 01074410 / 13016218 Computer Graphics 40

The HLS Color Model n HLS color model n n n Another model based

The HLS Color Model n HLS color model n n n Another model based on intuitive color parameter Used by the Tektronix Corporation The color space has the double-cone representation n Used hue (H), lightness (L) and saturation (S) as parameters 01074410 / 13016218 Computer Graphics 41

Color Model Summary n Colorimetry: n n Device Color Systems: n n CIE XYZ:

Color Model Summary n Colorimetry: n n Device Color Systems: n n CIE XYZ: contains all visible colors RGB: additive device color space (monitors) CMYK: subtractive device color space (printers) YIQ: NTSC television (Y=luminance, I=R-Y, Q=B-Y) Color Ordering Systems: n HSV, HLS: for user interfaces 01074410 / 13016218 Computer Graphics 42

Comparison RGB CMY YIQ CMYK HSV HSL 43

Comparison RGB CMY YIQ CMYK HSV HSL 43

Color Selection and Applications n Graphical package provide color capabilities in a way that

Color Selection and Applications n Graphical package provide color capabilities in a way that aid users in making color selections n n For example, contain sliders and color wheels for RGB components instead of numerical values Color applications guidelines n Displaying blue pattern next to a red pattern cause eye fatigue n n Prevent by separating these color or by using colors from onehalf or less of the color hexagon in the HSV model Smaller number of colors produces a better looking display Tints and shades tend to blend better than pure hues Gray or complement of one of the foreground color is usually best for background 01074410 / 13016218 Computer Graphics 44

How different are the colors of square A and square B? They are the

How different are the colors of square A and square B? They are the same! Don’t believe me? 45

What color is this blue cube? How about this yellow cube? 46

What color is this blue cube? How about this yellow cube? 46

Want to see it slower? What color is this blue cube? How about this

Want to see it slower? What color is this blue cube? How about this yellow cube? 47

Even slower? What color is this blue cube? How about this yellow cube? 48

Even slower? What color is this blue cube? How about this yellow cube? 48

So what color is it? What color is this blue cube? It’s gray! How

So what color is it? What color is this blue cube? It’s gray! How about this yellow cube? 49

Humans Only Perceive Relative Brightness 50

Humans Only Perceive Relative Brightness 50

Cornsweet Illusion Cornsweet illusion. Left part of the picture seems to be darker than

Cornsweet Illusion Cornsweet illusion. Left part of the picture seems to be darker than the right one. In fact they have the same brightness. The same image, but the edge in the middle is hidden. Left and right part of the image appear as the same color now. 51

Self-Animated Images 52

Self-Animated Images 52

What happens when chickens see red? n n n A company *that markets red

What happens when chickens see red? n n n A company *that markets red contact lenses for chickens )at 20 cents a pair(, points to medical studies showing that chickens wearing redtinted contact lenses behave differently from birds that don't. They eat less, produce more and don't fight as much. This decreases aggressive tendencies and birds are less likely to peck at each other causing injury. A spokesman said the lenses will improve world egg-laying productivity by $600 million a year. )Perhaps everything looks red and they cannot distinguish combs, wattles, or blood. Or. . . perhaps the chickens are happier because they're viewing the world through rose colored glasses(. Animalens Inc. of Wellesley, Mass If you don't believe this, read the facts! http//: www. inc. com/magazine/19890501/5636. html 01074410 / 13016218 Computer Graphics 53

End of Chapter 12 01074410 / 13016218 Computer Graphics 54

End of Chapter 12 01074410 / 13016218 Computer Graphics 54