CS430

Computer Graphics

Color Theory

Chi-Cheng Lin, Winona State University

 Topics

 Colors
 CIE Color Model
 RGB Color Model
 CMY Color Model
 YIQ Color Model
 Intuitive Color Concepts
 HSV Color Model
 HLS Color Model
2
 Colors
 Colors
A narrow frequency band within the
electromagnetic spectrum

3
 Colors

 Visible band
Each frequency corresponds to a distinct
color
Low-frequency end (4.3 x 1014 Hz): Red
High-frequency end (7.5 x 1014 Hz): Violet
Wavelength  = v/f, where v=300,000km/sec
Low frequency High frequency
red orange yellow green blue violet
Long wavelength Short wavelength
700nm 400nm 4
 Colors
 Colors of an object
Light source emits “white light” (all
frequencies of light)
Object reflects/absorbs some frequencies
Color = combination of frequencies reflected
 Dominant wavelength (or frequency)
Hue or color of the light
E.g., pink S(): spectrum (luminance/intensity of light)

400 620 700  5

 CIE Color Model
 Color models
Use three primary colors to produce other colors
 Primary colors
Colors used in a color model to produce all the
other colors in that model.
Cannot be made from the other (two) colors
defining the model.
 CIE color model
X, Y, and Z: nonexistent, super saturated colors
Vectors in 3-D additive color space
Any color S = AX + BY + CZ 6
 CIE Color Model

 S = AX + BY + CZ can be normalized to
x = A/(A+B+C)
y = B/(A+B+C)
z = C/(A+B+C)
 s = xX + yY + zZ, where x + y + z = 1
 s lies in the plane x + y + z = 1 in 3D
y

=670

x =400 z 7
 CIE Color Model
 CIE chromaticity diagram
s'() = (x(), y())
By viewing the 3D
curve in an
orthographic
projection, looking
along the z-axis
horseshoe shape
y

=670

x =400 z 8
CIE Chromaticity Diagram

9
CIE Chromaticity Diagram

10
Uses of CIE Chromaticity Diagram

11
 Uses of CIE Chromaticity Diagram
 Any colors on the line l between two
colors a and b
Is a convex combination of a and b
Is a legitimate color
can be generated by shining various amounts
of a and b onto a screen (like “tweening”)
 Complementary colors
Any two colors on a line passing through
white and added up to be white are
complementary e.g., e and f
redcyan greenmagenta blueyellow 12
 Uses of CIE Chromaticity Diagram
 Measure dominant wavelength and saturation
Color g: Some combination of h and white
Dominant wavelength of g = wavelength at h
Saturation (purity) of g = (g - w) / (h - w)
 Color j has no dominant wavelength because
k is not a pure color (k lies on the purple line)
Represented by dominant wavelength of k’s
complement m, with by a c suffix, e.g., 498c

13
 Uses of CIE Chromaticity Diagram

 Any color within a triangle can be

generated by the three vertices of the
triangle
Any point inside
IJK is a convex
combination of
points I, J, and K

14
 Uses of CIE Chromaticity Diagram

 Define color gamuts

Range of colors that can be produced on a
device
 CRT monitor’s gamut is different from
printer’s (See Plate 33 in the textbook)
 Any choice of three primaries can never
encompass all visible colors
 RGB are natural choices for primaries as
they can cover the largest part of the
“horseshoe” 15
Gamut Example

16
 RGB Color Model

 Used in light emitting devices

Color CRT monitors
 Additive
Result = individual contributions of each
primary color added together
C = rR + gG + bB, where r, g, b  [0, 1]
R = (1, 0, 0)
G = (0, 1, 0)
B = (0, 0, 1)
17
RGB Color Model

18
 RGB Color Model

 Color Cube
R + G = (1, 0, 0) + (0, 1, 0) = (1, 1, 0) = Y
R + B = (1, 0, 0) + (0, 0, 1) = (1, 0, 1) =
M
B + G = (0, 0, 1) + (0, 1, 0) = (0, 1, 1) = C
R + G + B = (1, 1, 1) = W
1 – W = (0, 0, 0) = BLK
Grays = (x, x, x), where x  (0, 1)

19
Color Cube

20
 CMY Color Model

 CMY: Complements of RGB

 Used in light absorbing devices
Hardcopy output devices
 Subtractive
Color specified by what is subtracted from
white light
Cyan absorbs red, magenta absorbs green,
and yellow absorbs blue

21
CMY Color Model

22
 CMY Color Model
 W = (0, 0, 0) B = (1, 1, 1)
 Conversion from RGB to CMY
C  R 
M   1  G 
   
Y  B 
 Conversion from CMY to RGB
R  C 
G   1  M 
   
B  Y 
23
 CMYK Color Model
 Motivations
Do we get black if paint cyan, magenta
and yellow on a white paper?
Which cartridge is more expensive?
 CMYK model
K = greatest gray that can be extracted
 Given C, M, and Y
K = min(C, M, Y)
C = C – K
M = M – K Try some examples…
Y = Y – K 24
 YIQ Color Model

 Used in U.S. commercial color-TV

broadcasting
Recoding of RGB for transmission efficiency
Backward compatible with black-and-white TV
Transmitted using NTSC (National Television
System Committee) standard

25
 YIQ Color Model

 YIQ
Y: luminance
I, Q: chromaticity
Only Y shown in black-and-white TV
 RGB  YIQ
Y   0.299 0.587 0.114  R 
    
 I    0.596  0.275  0.321G 
Q   0.212  0.528 0.311  B 
    
26
 YIQ Color Model
 Human’s visual properties
More sensitive to changes in luminance
than in hue or saturation
 more bits should be used to represent Y
than I and Q
Limited color sensation to objects covering
extremely small part of our field of view
 One, rather than two color dimensions
would be adequate
 I or Q can have a lower bandwidth than
the others 27
 YIQ Color Model

 NTSC encoding of YIQ into broadcast

signal
Uses human’s visual system properties to
maximize information transmitted in a fixed
bandwidth
Y: 4MHz
I: 1.5MHz
Q: 0.6MHz

28
 Intuitive Color Concepts
 Terminology
Perceptual Term Colorimetry Comments

hue dominated to distinguish

wavelength colors
saturation excitation e.g., red and
purity pink
Lightness luminance
(reflecting objects)
Brightness (self- luminance e.g., Sun, CRT
luminous objects)
29
 Intuitive Color Concepts
tints
white pure color
tones
grays shades

black
Tint: white pigment added to pure pigment
 saturation reduced
Shade: black pigment added to pure pigment
 lightness reduced
Tone: consequence of adding both white and
black pigments to pure pigments 30
 Intuitive Color Concepts

 Tints, shades, and tones  different

colors of same hue are produced
 Grays
= black pigments + white pigments
 Graphics packages that provide color
palettes to users often employ two or
more color models

31
 HSV Color Model
 HSV = Hue, Saturation, and Value
A.k.a. HSB, where B is Brightness
 RGB, CMY, and YIQ: hardware-oriented
 HSV and HLS: user-oriented
 Cylinder coordinate system
Space: hexcone
hexagon is obtained from the color cube in
isometric projection
(h, s, v), where h  [0, 360) and s, v  [0, 1]
hue: angle round the hexagon
saturation: distance from the center
value: axis through the center 32
 HSV Color Model

Color Cube Hexcone

33
 HSV Color Model
 W = (-, 0, 1)
 B = (-, 0, 0)
 R = (0, 1, 1)
Y = (60, 1, 1)
:
M = (300, 1, 1)
 Adding white pigments  S
 Adding black pigments  V
 Creating tones  S and V 34
 HSV Color Model

 True color system: 16 million colors

 Q: Do we need that many?
 Human eyes can distinguish
128 hues
130 tints (saturation levels)
23 shades of yellow colors, 16 of blue colors
 128 x 130 x 23 = 82720 colors

35
 HLS Color Model
 HLS: Hue, Lightness, and Saturation
 Cylinder coordinate system
Space: double cone
base is from the hexagon as in HSV
(h, l, s), where h  [0, 360) and s, v  [0, 1]
hue: angle round the base
lightness: axis through the center
saturation: distance from the center
 W = (-, 0, 1)
 B = (-, 0, 0)
 R = (0, 0.5, 1), Y = (60, 0.5, 1), … 36
 HLS Color Model

 Double cones
white

pure h
color

black
37