Topics

● Colors
● CIE Color Model
● RGB Color Model
● CMY Color Model
● YIQ Color Model
● Intuitive Color Concepts
● HSV Color Model
● HLS Color Model
1
 Colors
● Colors
● A narrow frequency band within the
electromagnetic spectrum

2
 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
3
 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 λ

4
 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
5
 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
6
 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 7
CIE Chromaticity Diagram

8
CIE Chromaticity Diagram

9
Uses of CIE Chromaticity Diagram

10
 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
11
 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

12
 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

13
 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” 14
Gamut Example

15
 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)
16
RGB Color Model

17
 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)

18
Color Cube

19
 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

20
CMY Color Model

21
 CMY Color Model
● W = (0, 0, 0) B = (1, 1, 1)
● Conversion from RGB to CMY

● Conversion from CMY to RGB

22
 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
23
 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

24
 YIQ Color Model

● YIQ
● Y: luminance
● I, Q: chromaticity
● Only Y shown in black-and-white TV
● RGB 🡺 YIQ

25
 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
26
 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

27
 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)
28
 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
29
 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

30
 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
31
 HSV Color Model

Color Cube Hexcone

32
 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↓
33
 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

34
 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), …
35
 HLS Color Model

● Double cones
white

pure h
color

black

36