Computer Graphics

Chapter 12
Color Models and Color
Applications

Somsak Walairacht, Computer Engineering, KMITL

 Outline
 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
 What is light?
 “light” = narrow frequency band of electromagnetic spectrum
 The Electromagnetic Spectrum
 Red: 3.8x1014 hertz
 Violet: 7.9x1014 hertz

01074410 / 13016218 Computer Graphics 3

 Spectrum of Light
 Monochrome light can be described by frequency f a
nd wavelength λ
 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

 Psychological Characteristics o
f Color
 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

Purity = ED − EW

ED = dominant energy density

EW = white light energy density
 Chromaticity, used to refer collectively to the two properties des
cribing color characteristics: purity and dominant frequency

01074410 / 13016218 Computer Graphics 6

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

01074410 / 13016218 Computer Graphics 7

 Colorimetry (CM)
 CM is the branch of color science concerned
with numerically specifying the color of a phy
sically defined visual stimulus
 Stimuli with the same specification look alike unde
r 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
 CM only considers the visual discriminability o
f physical beams of radiation
 Colors are an equivalence class of mutually in
discriminable beams
 Colors in this sense cannot be said to be “red
”, “green” or any other “color name”
 Discriminability is decided before the brain co
mes into action - CM is not psychology

01074410 / 13016218 Computer Graphics 9

 Color Matching Experiments
 Observers had to
match a test light
by combining thre
e fixed primaries
 Goal: find the uniq
ue RGB coordinate
s for each stimulus

01074410 / 13016218 Computer Graphics 10

 Tristimulus Values
 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

 R = 700.0 nm
 G = 546.1 nm
 B = 435.8 nm

01074410 / 13016218 Computer Graphics 11

 Negative Light in a CME
 if a match using only positive RGB values pro
ved impossible, observers could simulate a su
btraction of red from the match side by addin
g it to the test side

01074410 / 13016218 Computer Graphics 12

 Color Models
 Method for explaining the properties or behavior of color within some particular
context
 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
 Primary 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
 Red and Cyan, Green and Magenta, Blue and Yellow

01074410 / 13016218 Computer Graphics 13

 Color-Matching
 Colors in the vicinity of 500 nm can be matched by subtracting
an amount of red light from a combination of blue and green lig
hts
 Thus, an RGB color monitor cannot display colors in the neighbo
rhood of 500 nm

01074410 / 13016218 Computer Graphics 14

 CIE XYZ
 Problem solution: XYZ color system
 Tristimulus system derived from RGB
 Based on 3 imaginary primaries
 All 3 primaries are outside the human vi
sual gamut
 Only positive XYZ values can occur
 1931 by CIE (Commission International
e de l’Eclairage)
01074410 / 13016218 Computer Graphics 15
 Transformation CIE RGB->XYZ
 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.723R + 0.273G + 0.166B

Y = 0.265R + 0.717G + 0.008B
Z = 0.000R + 0.008G + 0.824B

01074410 / 13016218 Computer Graphics 16

 The XYZ Model
 CIE primitives is referred to as the XYZ model
 In XYZ color space, color C (λ) represented as
C (λ) = (X, Y, Z)
where X Y Z are calculated from the color-matching functions

X  k fx (  ) I (  ) d 
visible 

Y  k fy (  ) I (  ) d 
visible 

Z  k fz (  ) I (  ) d 
visible 

k = 683 lumens/watt
I(λ) = spectral radiance
f = color-matching function

C ( )  XX  YY  ZZ

01074410 / 13016218 Computer Graphics 17

 The XYZ Model
 Normalized XYZ values
 Normalize the amounts of each primary against the s
um X+Y+Z, which represent the total light energy

x z
X Y, Z Y
X y y
x
X Y  Z
where z = 1 - x - y, color can be represented with just x and y
Y
y x and y called chromaticity value,
X Y  Z it depend only on hue and purify

Y is luminance

01074410 / 13016218 Computer Graphics 18

 RGB vs. XYZ

01074410 / 13016218 Computer Graphics 19

 The CIE Chromaticity Diagram
 A tongue-shape curve formed by plotting the normalized amoun
ts x and y for colors in the visible spectrum
 Points along the curve are spectral color (pure color) Spectral
 Purple line, the line joining the red and violet spectral points Colors
 Illuminant C, plotted for a white light source and used as a standar
d approximation for average daylight

Illuminant Purple
Line

01074410 / 13016218 Computer Graphics 20

 The CIE Chromaticity Diagram
 Luminance values are not available because of norma
lization
 Colors with different luminance but same chromaticit
y map to the same point
 Usage of CIE chromaticity diagram
 Comparing color gamuts for different set of primaries
 Identifying complementary colors
 Determining purity and dominate wavelength for a given col
or
 Color gamuts
 Identify color gamuts on diagram as straight-line segments
or polygon regions

01074410 / 13016218 Computer Graphics 21

 The CIE Chromaticity Diagram
 Color gamuts
 All color along the straight lin
e joining C1 and C2 can be o
btained by mixing colors C1
and C2
 Greater proportion of C1 is u
sed, the resultant color is clo
ser to C1 than C2
 Color gamut for C3, C4, C5 g
enerate colors inside or on e
dges
 No set of three primaries ca
n be combined to generate
all colors

01074410 / 13016218 Computer Graphics 22

 The CIE Chromaticity Diagram
 Complementary colors
 Represented on the diagram as two points on opposite sides
of C and collinear with C
 The distance of the two colors C1 and C2 to C determine the
amount of each needed to produce white light

01074410 / 13016218 Computer Graphics 23

 The CIE Chromaticity Diagram
 Dominant wavelength
 Draw a straight from C through
color point to a spectral color on
the curve, the spectral color is th
e dominant wavelength
 Special case: a point between C
and a point on the purple line Cp
, take the compliment Csp as do
minant
 Purity
 For a point C1, the purity determ
ined as the relative distance of C
1 from C along the straight line j
oining C to Cs

Purity ratio = dC1 / dCs

01074410 / 13016218 Computer Graphics 24

 subYM

Complementary Colors subCR

 Additive  Subtractive
 Blue is one-third  Orange (between red a
 Yellow (red+green) is two-thir
ds
nd yellow)<>cyan-blue
 When blue and yellow light are
 green-cyan<>magenta-
added together, they produce red color
white light
 Pair of complementary colors
 blue and yellow
 green and magenta
 red and cyan
addRG

01074410 / 13016218 Computer Graphics 25

 The RGB Color Model
 Basic theory of RGB color model
 The tristimulus theory of vision
 It states that human eyes perceive color through the stimulation of three vis
ual pigment of the cones of the retina
 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
 An additive model, as with the XYZ color system
 Each color point within the unit cube can be represented as a w
eighted vector sum of the primary colors, using vectors R, G an
dB
 C(λ)=(R, G, B)=RR+GG+BB

 Chromaticity coordinates for the National Television System Co

C ( )  ( R,(NTSC)
mmittee G, B)  Rstandard
R  GG  RGB
BB primaries

01074410 / 13016218 Computer Graphics 27

 Subtractive RGB Colors

Cyan

Yellow Green

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 Mod
els
 Color models for hard-copy devices, such as printers
 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
 A subtractive color model can be formed with the primary colors cyan, mag
enta and yellow
 Unit cube representation for the CMY model with white at origin

01074410 / 13016218 Computer Graphics 29

 The CMY and CMYK Color Mod
els
 Transformation between RGB
and CMY color spaces
 Transformation matrix of conve
rsion from RGB to CMY
 C  1  R 
 M   1  G 
    
 Y  1  B 

 R  1  C 
 Transformation matrix of conve G   1   M 
    
rsion from CMY to RGB  B  1  Y 

01074410 / 13016218 Computer Graphics 30

 The YIQ and Related Color Mo
dels
 YIQ, NTSC color encoding for forming the composite
video signal
 YIQ parameters
 Y, same as the Y complement in CIE XYZ color space, luminance
 Calculated Y from the RGB equations
 Y = 0.299 R + 0.587 G + 0.114 B
 Chromaticity information (hue and purity) is incorporated with I
and Q parameters, respectively
 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 Mo
dels (2)
 Transformation between RGB and YIQ color s
paces
 Transformation matrix of conversion from RGB to
YIQ
Y   0.299 0.587 0.114   R 
 I    0.701  0.587  0.114   G 
     
Q   0.299  0.587 0.886   B 

 Transformation matrix of conversion from YIQ to

RGB
 Obtain from the Rinverse
 1 matrix
 
1
of 0  Y 
the RGB
 
to YIQ conver
sion G   1  0.509  0.194   I 
 B  1 0 1  Q 
01074410 / 13016218 Computer Graphics 32
 The HSV Color Model
 Interface for selecting colors often use a color model based on i
ntuitive concepts rather than a set of primary colors
 The HSV parameters
 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 diagona
l from the white vertex to the origin

01074410 / 13016218 Computer Graphics 33

 The HSV Color Model
 The HSV hexcone
 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
 Color components:
 Hue (H) ∈ [0°, 360°]
 Saturation (S) ∈ [0, 1]
 Value (V) ∈ [0, 1]

01074410 / 13016218 Computer Graphics 35

 HSV Color Definition
 Color definition
 Select hue, S=1, V=1
 Add black pigments, i.e., d
ecrease V
 Add white pigments, i.e., d
ecrease S
 Cross section of the HSV
hexcone showing regions
for shades, tints, and ton
es
01074410 / 13016218 Computer Graphics 36
 HSV
 Hue is the most obvious characteristic of a color
 Chroma is the purity of a color
 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
 Sometimes light colors are called tints, and
 Dark colors are called shades

01074410 / 13016218 Computer Graphics 37

 Transformation
 To move from RGB space to HSV space:
 Can we use a matrix? No, it’s non-linear.
min  the minimum R, G, or B value
max  the maximum R, G, or B value
 0 if max  min
 60 g  b  0 0 if max  0
 if max  r and g  b s   max min
max  min  max
otherwise
  g b
60  360 if max  r and g  b
h max  min v  max
  br
60 max  min  120 if max  g


  rg
 60  240 if max  b
 max  min

01074410 / 13016218 Computer Graphics 38

 The HSV Color Model
 Transformation between HSV and RGB color spaces
 Procedure for mapping RGB into HSV
class rgbSpace {public: float r, g, b;};
class hlsSpace {public: float h, l, s;};
void hsvT0rgb (hlsSpace& hls, rgbSpace& 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; switch (k) {
k = floor (h); case 0: r = v; g = cc; b = aa; break;
f = h - k; case 1: r = bb; g = v; b = aa; break;
aa = v * (1.0 - s); case 2: r = aa; g = v; b = cc; break;
bb = v * (1.0 - (s * f)); case 3: r = aa; g = bb; b = v; break;
cc = v * (1.0 - (s * (1.0 - f))); case 4: r = cc; g = aa; b = v; break;
case 5: r = v; g = aa; b = bb; break;
}
}
}

01074410 / 13016218 Computer Graphics 39

 The HSV Color Model
 Transformation between HSV and RGB color spaces
 Procedure for mapping HSV into RGB
class rgbSpace {public: float r, g, b;};
class hlsSpace {public: float h, l, s;};

const float noHue = -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 rgbTOhsv (rgbSpace rgb, hlsSpace hls) {

float minRGB = min (r, min (g, b)), maxRGB = max (r, max (g,
b));
float deltaRGB = maxRGB - minRGB;
v = maxRGB; if (s <= 0.0) h = noHue;
if (maxRGB != 0.0) s = deltaRGB / maxRGB; else {
else s = 0.0; if (r == maxRGB) h = (g - b) / deltaRGB;
else
if (g == maxRGB)
h = 2.0 + (b - r) / deltaRGB;
else
if (b == maxRGB)
h = 4.0 + (r - g) / deltaRGB;
h *= 60.0;
if (h < 0.0) h += 360.0;
h /= 360.0;
}
01074410 / 13016218 Computer Graphics } 40
 The HLS Color Model
 HLS color model
 Another model based on
intuitive color parameter
 Used by the Tektronix Co
rporation
 The color space has the
double-cone representati
on
 Used hue (H), lightness
(L) and saturation (S) as
parameters

01074410 / 13016218 Computer Graphics 41

 Color Model Summary
 Colorimetry:
 CIE XYZ: contains all visible colors
 Device Color Systems:
 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:
 HSV, HLS: for user interfaces

01074410 / 13016218 Computer Graphics 42

Comparison

RGB CMY YIQ HSV HSL

CMYK 43
 Color Selection and Applicatio
ns
 Graphical package provide color capabilities in a way
that aid users in making color selections
 For example, contain sliders and color wheels for RGB comp
onents instead of numerical values
 Color applications guidelines
 Displaying blue pattern next to a red pattern can cause eye f
atigue
 Prevent by separating these color or by using colors from one-h
alf 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 usuall
y best for background

01074410 / 13016218 Computer Graphics 44

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

They are
the same!

Don’t
believe me?

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

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

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

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

49
Humans Only Perceive Relativ
e Brightness

50
 Cornsweet Illusion

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

52
 What happens when chickens
see red?
 A company* that markets red contact lenses for chickens (at 20 cents
a pair), points to medical studies showing that chickens wearing red-tin
ted contact lenses behave differently from birds that don't.
 They eat less, produce more and don't fight as much. This decreases a
ggressive tendencies and birds are less likely to peck at each other cau
sing 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, wattl
es, or blood.
Or ...perhaps the chickens are happier because they're viewing the wor
ld 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