Winter 2020

DMET501 – Introduction to Media Engineering

Color Spaces

Seif Eldawlatly

1
Color
• Color is an essential element of multimedia, used in vector graphics,
bitmapped images, video, animation and text

• Color is a subjective sensation produced in the brain

• Color science attempts to relate the subjective sensation of color to

measurable and reproducible physical phenomena

2
Spectral Power Density
• A spectral power distribution (SPD) is a description of how the intensity
of light varies with its wavelength

3
Tristimulus Theory
• The tristimulus theory of color implies that any color can be produced
by mixing suitable amounts of three additive primary colors

• Computer and TV screens can be constructed using each pixel made

up of three dots of phosphor emitting red, green and blue

4
RGB Color Space
• In RGB color, the three primaries are standard shades of Red, Green
and Blue
Red

Blue Green

• In fact, RGB cannot represent every visible color. Only colors in the
RGB gamut can be represented in this way
All Possible
Colors
Colors that can
be produced by
RGB

5
RGB Color Space
• Any color is specified as three values (R, G, B) giving the relative
proportions of the three primaries
Examples: If proportions are expressed as percentages:
(100, 0, 0) represents pure primary red
(100, 50, 0) represents a shade of mauve
(0, 0, 0) represents black
(100, 100, 100) represents white

• When R=G=B, the resulting color is a gray level

6
RGB Color Space
• The RGB color space can be geometrically represented as a cube with
each axis representing one of the primary colors

• Any color will then be represented as a point in such 3D-space

This line corresponds

to gray

7
RGB Color Space
• Color Depth: The number of bits used to represent color

• People cannot distinguish more than 16.8 million colors (224) which can
be represented using 256 different values for each of Red, Green and
Blue

• Color can be safely represented using 24 bits (8 bits x 3)

• For each of the primary colors, it can take values from 0 up to 255

• Pure red is thus represented as (255, 0, 0) and white is represented as

(255, 255, 255)

• This is often written as a 6-digit hexadecimal number

Example: the color (255, 127, 255) is represented as #FF7FFF
8
RGB Color Space
• The use of lower color depths leads to posterization and loss of image
detail, but reduces file size

9
Indexed Color
• Used in GIF and PNG formats
• In indexed color, instead of storing a 24-bit color value for each pixel,
we use an 8-bit value which serves as an index into a color table
• The color table contains the palette of colors used in the image

10
Indexed Color
• Examples of images and their color table (palette)

11
Indexed Color
• Some colors from the original image may be missing from the palette

• Dithering: Simulate missing colors by grouping pixels in the area to be

colored, and coloring individual pixels within each group in a suitable
pattern
Example: To simulate pink color in a certain area, color some pixels red
and some pixels white
Different ways
to color 2x2
block with black
and white
Only black and white
pixels are used

Zoomed-in
version
12
Indexed Color
• Dithering can be used to reduce the resulting posterization

Original Image With Dithering Without Dithering

13
Other Color Models: CMYK
• CMYK stands for Cyan, Magenta, Yellow and BlacK

• Cyan, magenta and yellow are the subtractive primaries

• They are the complementary colors of red, green and blue, respectively

• Cyan is the complement of Red meaning that if the Red color is

subtracted from white, we get Cyan
C=G+B=W–R
M=R+B=W–G
Y=R+G=W–B

14
Other Color Models: CMYK
• The CMYK color space is the color model used in printing

• In the printing process, thin layers of ink absorb some components of

the incident light, so overlaying ink mixes colors subtractively

• Reflected light appears to be colored as ink reflects certain colors only

15
Other Color Models: CMYK
• Printers (that use CMYK color model) provide black ink (K) separately
due to 2 reasons:
• Combining the 3 inks (C, M and Y) to get black does not produce a
very good black
• Applying 3 different inks is not very good for the paper and leads to
longer drying times

• The CMYK color gamut, corresponding to easily printable colors, is

smaller than the RGB gamut, but some CMYK colors lie outside the
RGB gamut

16
Other Color Models: HSL and HSB
• A color can be identified by its hue (H), saturation (S) and lightness (L)

• Human understanding of the cyan color would probably be a mixture of

white and dark blue as opposed to the additive mixing of Green and
Blue

• Tones of a single hue can be arranged two-dimensionally, with lightness

increasing upwards, and saturation increasing from left to right

17
Other Color Models: HSL and HSB
• Hues can be arranged around the rim of a color wheel as used by
painters, with complementary colors opposite to each other

• A hue’s value is the angle between its position on the wheel and the
position of red

• A particular color can be identified as its hue (how far around the circle
from red it is), saturation (how far from the central axis) and lightness
(how far up the axis it is) 18
Other Color Models: HSL and HSB
• HSB is a variant of HSL, where the tones are arranged differently. B
stands for Brightness

• Pure hues are assigned a brightness of 1 as opposed to 0.5 in HSL

19
Other Color Models: HSL and HSB
• Both HSL and HSB are normally distorted
into a cylindrical shape

• Color in programs is normally represented by

numbers that the user can vary using color
picker
RGB HSB Spectrum

20
Color Channels
• The R, G and B components of each pixel can be stored as separate
values

• The three arrays of values can be treated as grayscale images, called

channels

Cherries appear
bright in the red
channel and black
in other channels

21
Color Channels
• Each channel can be manipulated independently
• Making adjustments to the channels alters the colors of the image
• The color balance, hue and saturation and color replacement
adjustments change the color of the image as a whole

Fall scene (left) turns

to spring (right)

22
Color Channels
• Channels can also be manipulated to replace one color with another

23
Color Channels
• Alpha channels can be treated as additional color channels

• Alpha channel is treated as a mask that can isolate an object from a

picture

24
Color Channels
• If a person is photographed against a blue background (ensuring that
none of their clothing is blue), an alpha channel can be created for the
blue background to isolate the person

• This Blue screen technique is commonly used in video and film-making

25