Chapter 8

Colors and Images

The Eye: Four types of receptors (sensors):
R/G/B cones + rods, each has unique
SRF(sub-retinal fluid)
Seeing Red, Green and Blue

A cone cell in the retina measures amount of red,
green, or blue wavelength energy (3 SRF’s).
Responds only in bright light.

SRF of a rod cell covers all wavelength (measures
“gray level” or intensity) Responds in low light, but not
in bright light.

Integral of R, G, or B cone response produces a
single value
Note: SRF’s really L, M, S wave responses (long,
medium, short), not R, G, B.
Note: low response of short (blue) is scaled up by
vision system (after retina).
COLOR SPACES
Color Coordinate Space
Defines 3 SRFs (color matching functions) for
some sensing system
„ One dimension for each SRF (→ tristimulus
color space)
… Each dimension represents a primary color P
Coordinate value = resulting SDF(signed
distance field-create procedural textures)
integral normalized to (0, 1)
„ Color triple is 3D point defined by chromaticity
values (c0, c1, c2)
„ Example: RGB color space

Primaries:
Red, Green, Blue with basis vectors
R = (0,0,1)
G = (1,0,0)
B = (0,1,0)


Chromaticity values:
(r,g,b) = r (R) + g (G) + b (B)
 Color Models

Used to describe color as accurately as possible.
• Uses the fact that colors can be described by combinations of
three basic colors, called primary colors.
CIE (Commission International de l'Eclairage - International
Color Commision) organisation produced two models for
defining color:
• The CIE 1931 model is the most commonly used
• It defines three primary “colors” X, Y and Z that can be used to
describe all visible colors, as well as a standard white, called C.
• The range of colors that can be described by combinations of
other colors is called a color gamut.

Since it is impossible to find three colors with a gamut
containing all visible colors, the CIE’s three primary colors are
imaginary. They cannot be seen, but they can be used to define
other visible colors
CIE Space for Color Matching


Defined X, Y, and Z primaries to replace red,
green and blue primaries
 xλ, yλ, and zλ, color matching functions for these
primaries
 Y chosen so that yλ matches luminous(relating to
light as perceived by the eye) efficiency function
 xλ, yλ, and zλ are linear combinations of rλ, gλ and
bλ
CIE XYZ Color Space (1931)

To define a color in CIE model, provide weights for the X, Y and
Z primaries, just as you would for an RGB display (e.g. color = xX
+ yY + zZ)

X, Y and Z form a three dimensional color volume.

We can ignore the dimension of luminance by normalizing with
total light intensity, x+y+z = 1. This gives chromaticity values:
x’ = x/(x+y+z)
y’ = y/(x+y+z)
z’ = 1 - x’ - y

Plotting x’ and y’ gives the
CIE chromaticity diagram.

Color gamuts are found by taking
the convex hull of the primary colors.

Complements are found by inscribing
a line from the color through C to the edge of the diagram.
CIE 1931 Model

Hue of a color: found by inscribing a line from C (white)
through the color to the edge of the diagram.

The hue is the wavelength of the color at the intersection of the
edge and the line.

Saturation of a color: found by taking the ratio of the
distance of the color from C on the above line and the length of
the whole line.

Complementary colors can be mixed to produce white light

White

can be produced by (approx) constant spectral distribution as
well as by only two complementary colors, e.g., greenish-blue, D,
and reddish-orange, E.

Some nonspectral colors (colors not on spectral locus, like G)
cannot be defined by dominant wavelength; defined by
complementary dominant wavelength
 Color Gamut
Subset of colors that can be represented on a device
CIE color space can be used to describe color gamut
1. Measure maximum intensity of each device primary in
CIE
2. Convert to (x,y) chromaticity
3. 2D triangle defines possible
device colors (→ color gamut)
Different devices have
different gamuts
(problem of color conversion)
Color Models for Raster
Graphics
Hardware-oriented models:
do not
relate to concepts of hue, saturation,
brightness

RGB, used with color CRT monitors

YIQ, broadcast TV color system

CMY (cyan, magenta, yellow) color printing

CMYK (cyan, magenta, yellow, black) color
printing
User-oriented models
• HSV (hue, saturation, value) also called
HSB (B for brightness)
• HLS
(hue, lightness, saturation)
Additive Color Systems

Colors are mixed by adding up appropriate amounts of
primaries
(adding SDF spikes to black)

Widely used in screens with subpixels
that emit R,G,B

Cones in retina respond to light
emitted by each subpixel

Brain adds the individual cone
responses to produce perception
of hue, luminance, and saturation
The RGB Color Model
RGB primaries are additive:
• Main diagonal => gray
levels
black is (0, 0, 0)
white is (1, 1, 1)
• Hue is defined by the one or
two largest parameters
• Saturation can be controlled
by varying the collective
minimum value of R, G and B

Luminance can be controlled by varying magnitudes

while keeping ratios constant
Subtractive Color Systems


Colors are mixed by subtracting appropriate amounts of
colors from white

White light is reflected or transmitted, and some wavelengths
are absorbed (subtracted), e.g. colored glass, printed images

The colors to substract are the complements of the primaries,
e.g. cyan, magenta, yellow (CMY)
(r,g,b) = (1,1,1) −(c,m, y)

Cyan absorbs red

Magenta absorbs green

Yellow absorbs blue

CMYK (K = black) often used for 4 colour printers
The CMY(K) Color Model

Used in electrostatic/ink-jet plotters that deposit
pigment on paper

Cyan, magenta, and yellow are complements
of red, green, and blue

Subtractive primaries: colors are specified by
what is subtracted from white light, rather than
by what is added to blackness

Cartesian coordinate system

Subset is unit cube

white is at origin, black at (1, 1, 1):

Color printing presses, some color printers use CMYK
(K=black)

K used instead of equal amounts of CMY

called undercolor removal

richer black

less ink deposited on paper – dries more quickly

First approximation – non-linearities must be accommodated:
K = min(C, M, Y)
C’ = C – K
M’ = M – K
Y’ = Y – K
The YIQ Color Model

Recoded RGB for transmission efficiency, compatibility with B/W broadcast
TV;

used for NTSC (National Television Standards Committee (cynically, “Never
The Same Color”))

Y = CIE’s Y (luminance); I and Q encode chromaticity

Only Y = 0.3R + 0.59G + 0.11B shown on B/W monitors:


Weights: relative brightness of each primary

Preparing color material which may be seen on B/W broadcast TV, adjacent
colors should have different Y values

NTSC encoding of YIQ:
4 MHz Y (eye most sensitive to " luminance)
1.5 MHz I (small images need 1 color dimension)
0.6 MHz Q
HLS Color Space

Hue, Lightness, Saturation

Models how colors appear under light.

Based on transformation of RGB cube
→ double “hexcone”→ double cone
HLS Color Space
 HSV Color Space

Hue, Saturation, Value (similar to Lightness)

Saturation describes how pure/intense/strong
the hue is.

Value: the lightness or darkness

Only single cone: at the top all colors are
brightest

Hexcone subset of cylindrical (polar)
coordinate system

Single hexcone HSV color model. (The V = 1
plane contains the RGB model’s R = 1, G = 1,
B = 1, in the regions shown):

The eye can see

about 128 different hues, and

about 130 different saturations.

The number of values varies between 16
(blue) and 23 (yellow)

Has intuitive appeal of the artist’s tint, shade,
and tone model

pure red = H = 0, S = 1, V = 1; pure pigments are
(I, 1, 1)

tints: adding white pigment ! decreasing S at
constant V

shades: adding black pigment ! decreasing V at
constant S

tones: decreasing S and V
Image File Formats

Choosing the right file format to save your images in is of vital
importance.

There are three image formats in constant use on the net — GIF,
JPG and PNG.

Each is suited to a specific type of image, and matching your image
to the correct format should result in a small, fast-loading graphic.

Saving and exporting into these formats will require a decent image
editor.

When choosing the format for your image, you should always be
conscious of both the image’s quality and filesize.
GIF — Graphics Interchange Format


The most popular on the Internet, mainly because of
its small size.

It is ideal for small navigational icons and simple
diagrams and illustrations where accuracy is required,
or graphics with large blocks of a single colour.

The format is loss-less, meaning it does not get blurry
or messy.

GIFs use a simple technique called compression to
reduce the filesizes of images by finding repeated
patterns of pixels, but this compression never
degrades the image quality.

GIF files can be saved with a maximum of 256 colours. This makes it a
poor format for photographic images.

Because this can sometimes be tight, GIFs have the option dither (add
white) and will mix pixels of two different available colours to create a
suggestion of another colour.

GIFs can be animated, which is another reason they became so
successful. Most animated banner ads are GIFs.

GIFs allow single-bit transparency, which means when you are creating
your image, you can specify one colour to be transparent.

This allows the background colours of the web page to show through
the image.

GIFs can also be interlaced, which is a way of saving a
graphic so that it loads progressively — first a blurry, low-
detail version is loaded, and then successive layers of detail are
added.

This usually means a larger overall file size, but it means that a
version of the image gets placed onto the viewer’s screen much
quicker, and so is beneficial in many situations, as it gives the
impression of a speedier download.
GIF Examples

This first image is indicative of the optimum properties of a

GIF image — small, low on colours, and containing large areas of
continuous colour.

This is the same graphic, but the number of available

colours has been reduced. The file size is improved,
but it doesn't look quite as smooth.

To remedy this, we can add some dithering (which does add a bit to the
filesize), to produce the image on the right.

The loss of colours becomes less obvious,
and the filesize overall is about half as big.
This is the same image again, but with the red
background colour set to transparent. As you can see,
the background of the page shows through, but
the edges are jagged, as this image was not
designed for this background colour.
Finally we have a rather rubbish animated GIF
This single GIF file simply contains many frames of
animation, which your browser shuffles through.
JPEG — Joint Photographic Experts Group


It was designed with photographs in mind.

It is capable of displaying millions of colours at once,
without the need for dithering, allowing for the complex blend
of hues that occur in photographic images.

use a complex compression algorithm, which can be applied
on a sliding scale.

Compression is achieved by ‘forgetting’ certain details about
the image

You can save a JPG with 0% compression for a perfect
image with a large filesize; or with 80% compression for a
small but noticeably degraded image.

In practical use, a compression setting of about 60% will
result in the optimum balance of quality and filesize,
without letting the lossy compression do too much damage.
 
JPGs can be interlaced, they lack many of the other special
abilities of GIFs, like animation and transparency;

They are only for photos.

Simple graphics with large blocks of colour should not be
saved as JPGs because the edges get all smudgy.

0% compression
60% compression 80% compression 99% compression
PNG — Portable Network Graphics

PNG is a format designed specifically for the web in
response to a licensing scheme introduced.

One version of the format, PNG-8, is similar to the GIF
format.

It can be saved with a maximum of 256 colours and
supports 1-bit transparency.

Filesizes when saved in a capable image editor like
FireWorks will be noticeably smaller than the GIF
counterpart, as PNGs save their colour data more
efficiently.

PNG-24 is another flavour of PNG, with 24-bit colour support,
allowing ranges of colour akin to a high colour JPG.

PNG-24 is in no way a replacement format for JPG, however,
because it is a loss-less compression format. This means that
Bitmap (.bmp)

BMP or Bitmap Image File is a format developed by Microsoft for
Windows.


There is no compression or information loss with BMP files which
allow images to have very high quality, but also very large file sizes.


Due to BMP being a proprietary format, it is generally recommended
to use TIFF files


compression: None

Best for: high quality scans, archival copies


TIFF (.tif, .tiff)

TIFF or Tagged Image File Format are lossless images files
meaning that they do not need to compress or lose any image quality
or information (although there are options for compression),


allowing for very high-quality images but also larger file sizes.


Compression: lossless- no compression. Very high quality images


best for : high quality prints, professional publications, archival
copies special


attributes: can save transparencies
EPS (.eps) Encapsulated
PortScript

An EPS or Encapsulated PostScript file is a common
vector file type.


EPS files can be opened in many illustration
applications such as Adobe Illustrator or CorelDRAW


Compression: None - uses vector information


Best For: Vector artwork, illustrations


Special Attributes: Saves vector information
RAW Image Files (.raw, .cr2, .nef, .orf, .sr2, and more)

RAW images are images that are unprocessed that
have been created by a camera or scanner.

Many digital SLR cameras can shoot in RAW,
whether it be a .raw, .cr2, or .nef.

These RAW images are the equivalent of a digital
negative, meaning that they hold a lot of image
information, but still need to be processed in an
editor such as Adobe Photoshop or Lightroom.

Compression: None

Best For: Photography

Special Attributes: Saves metadata, unprocessed,
lots of information