Computer Graphics

Color Models and Color

Applications
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
 Properties of Light
 What is light?
 “light” = narrow frequency band of electromagnetic spectrum
 The Electromagnetic Spectrum
 Red: 3.8x1014 hertz
 Violet: 7.9x1014 hertz
Spectrum of Light
 Monochrome light can be described by frequency f
and 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
The Human Eye
Psychological Characteristics
of 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
describing color characteristics: purity and dominant frequency
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
pigments
 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
 Colorimetry (CM)
 CM is the branch of color science concerned
with numerically specifying the color of a
physically defined visual stimulus
 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

CM Properties
 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
 Color Matching Experiments
 Observers had to
match a test light
by combining
three fixed
primaries
 Goal: find the
unique RGB
coordinates for
each stimulus
 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
Negative Light in a CME
 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
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
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
lights
 Thus, an RGB color monitor cannot display colors in the
neighborhood of 500 nm
CIE XYZ
 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)
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
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
 The XYZ Model
 Normalized XYZ values
 Normalize the amounts of each primary against the
sum X+Y+Z, which represent the total light energy

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

Y is luminance
RGB vs. XYZ
The CIE Chromaticity Diagram
 A tongue-shape curve
formed by plotting the
normalized amounts x and y Spectral
for colors in the visible Colors
spectrum
 Points along the curve are
spectral color (pure color)
 Purple line, the line joining
the red and violet spectral C
points
 Illuminant C, plotted for a
white light source and used
as a standard approximation
for average daylight
Illuminant Purple
Line
The CIE Chromaticity Diagram
 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
 Comparing color gamuts for different set of primaries
 Identifying complementary colors
 Determining purity and dominate wavelength for a given
color
 Color gamuts
 Identify color gamuts on diagram as straight-line segments
or polygon regions
The CIE Chromaticity Diagram
 Color gamuts
 All color along the straight
line joining C1 and C2 can be
obtained by mixing colors C1
and C2
 Greater proportion of C1 is
used, the resultant color is
closer to C1 than C2
 Color gamut for C3, C4, C5
generate colors inside or on
edges
 No set of three primaries
can be combined to
generate all colors
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
 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
the dominant wavelength
 Special case: a point between C
and a point on the purple line
Cp, take the compliment Csp as
dominant
 Purity
 For a point C1, the purity
determined as the relative
distance of C1 from C along the
straight line joining C to Cs
 Purity ratio = dC1 / dCs
 subYM

Complementary Colors subCR

 Additive  Subtractive
 Blue is one-third
 Yellow (red+green) is  Orange (between red
two-thirds and yellow)<>cyan-blue
 When blue and yellow  green-cyan<>magenta-
light are added together,
they produce white light red color
 Pair of complementary
colors
 blue and yellow
 green and magenta
 red and cyan
addRG
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
visual 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
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 weighted vector sum of
the primary colors, using
vectors R, G and B

 C(λ)=(R,
C ( )  ( R, G,
G, BB)=RR+GG+BB
)  RR  GG  BB

 Chromaticity coordinates for

the National Television
System Committee (NTSC)
standard RGB primaries
 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

The CMY and CMYK Color
Models
 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,
magenta and yellow
 Unit cube representation for the CMY model with white at origin
The CMY and CMYK Color
Models
 Transformation between RGB
and CMY color spaces
 Transformation matrix of
conversion from RGB to CMY
 C  1  R 
 M   1  G 
    
 Y  1  B 

 Transformation matrix of  R  1  C 

G   1   M 
conversion from CMY to RGB     
 B  1  Y 
The YIQ and Related Color
Models
 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
The YIQ and Related Color
Models (2)
 Transformation between RGB and YIQ color
spaces
 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 inverse matrix of the RGB to YIQ
conversion
 R  1 1 0  Y 
G   1  0.509  0.194   I 
     
 B  1 0 1  Q 
The HSV Color Model
 Interface for selecting colors often use a color model based on
intuitive 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
diagonal from the white vertex to the origin
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
HSV Color Model Hexcone
 Color components:
 Hue (H) ∈ [0°, 360°]
 Saturation (S) ∈ [0, 1]
 Value (V) ∈ [0, 1]
HSV Color Definition
 Color definition
 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
 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
 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  120 
if max  g
max  min
  rg
 60  240 if max  b
 max  min
 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;
}
}
}
 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;
}
}
 The HLS Color Model
 HLS color model
 Another model based on
intuitive color parameter
 Used by the Tektronix
Corporation
 The color space has the
double-cone
representation
 Used hue (H), lightness
(L) and saturation (S) as
parameters
 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
Comparison

RGB CMY YIQ HSV HSL

CMYK
Color Selection and
Applications
 Graphical package provide color capabilities in a way
that aid users in making color selections
 For example, contain sliders and color wheels for RGB
components instead of numerical values
 Color applications guidelines
 Displaying blue pattern next to a red pattern can cause eye
fatigue
 Prevent by separating these color or by using colors from one-
half 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
 How different are the colors of square A and
square B?

They are
the same!

Don’t
believe me?
What color is this How about this
blue cube? yellow cube?
 Want to see it slower?
What color is this How about this
blue cube? yellow cube?
 Even slower?
How about this
What color is this
yellow cube?
blue cube?
 So what color is it?
What color is this How about this
blue cube? yellow cube?
It’s gray!
Humans Only Perceive
Relative Brightness
 Cornsweet Illusion

Corn sweet 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.
Self-Animated Images