P03_10Color.pdf Official Site of Prof. Dr. I Wayan Simri WICAKSANA, S.Si, M.Eng Gunadarma University P03 10Color

Visible EM Radiation

• Color is a perception (light waves are not

colored)

• The wavelengths we see are in a small part

of the EM spectrum

– some creatures see in other parts of the

spectrum, e.g., bees can sense UV

Color in Nature

Attraction

: e.g.,

mating plumage

Warning

: e.g.,

poisonous berries

Color and Culture

Materials

analysis

: e.g.,

spectrometer

readings

Symbolic

Coding

: e.g., the

“red, white and

blue”

Signalling

: e.g.,

traffic signals

Fashion

Who “Does Color”?

Color Professionals

• Master programs (e.g., RIT’s Masters in

Color Science—job placement 100%)

• Conferences:

– marketing

– technical

– psychological

(color perception,

color and

consciousness)

– CIC: Color Imaging

Conference in AZ (13

th

_year)

– and more…

• Design (of course) and art…

Why Study Color?

• As a User

– awareness of influence of color (and good

and bad use by others)

– able to specify colors using appropriate

systems

• As a Designer

– graphic design (make a Web page that

doesn’t cause headaches)

– UI (create UIs that are effective, fun to use)

• As a programmer and software designer

– make better tools for others (e.g., color

pickers, graphics software)

– translate between different “color spaces”

(e.g., RGB to HSV, CIE)

– manage color fidelity between input, display

and output devices (color management)

– control interpolation between colors

(gradients)

– also, provides an introduction to some

• Color is an immensely complex subject,

drawing on physics, physiology, psychology,

art, and graphic design

• Many theories, measurement techniques, and

standards for colors, yet no one theory of

human color perception is universally accepted

• Perceived color of object depends not only on

object material but also on light source, color

of surrounding area, and human visual system

(the eye/brain mechanism)

• Some objects

reflect

light (wall, desk, paper),

while others also

transmit

light (cellophane,

glass)

– surface that reflects only pure blue light

illuminated with pure red light appears black

– pure green light viewed through glass that

• Achromatic light

• Chromatic light

• Color models for raster graphics

• Reproducing color

• Using color in computer graphics

• Achromatic light: intensity (quantity of light)

only (grayscale)

– called intensity or luminance if measure of

light’s energy or brightness

• the psychophysical sense of perceived

intensity

– gray levels (e.g., from 0.0 to 1.0)

– seen on black and white TV or display

monitors

Chromatic Light

– Produces visual color sensations

• brightness/intensity

• chromaticity/color

– hue/position in spectrum

(red, green, yellow . . .)

– saturation/vividness

– generally need 64 to 256 gray levels for

• Gamma (γ) is a measure of the nonlinearities

of a display

–

Nonlinearity

: the response (output) is not

directly proportional to the input

• Term often used incorrectly to refer to

nonlinearity of image data

• Example: PCs have a gamma of roughly 2.5,

while Macs have a gamma of 1.8, so Mac

images appear dark on PC’s

• Problems in graphics

– need to maintain color consistency across

different platforms and hardware devices

(monitor, printer, etc.)

– even the same type/brand of monitors

change gamma value over time

Mac user make it bright

PC user gives image back; it’s now too bright

•

Nonlinearities are pervasive

– hardware

–

human visual systems

•

How to distribute 256 different intensities?

– don’t want, for example, 128 in [0, 0.1] and [0.9, 1.0]

– would create a visible gap from 0.1 to 0.9

•

Yet want predictability

•

First, we deal with nonlinearity of the human visual

system, then with nonlinearity of CRT

– LCD is different and generally has an irregular gamma. Most LCD monitors, however, try to fix that by “faking” the gamma in the display

– LCDs problematic for precise color work because image changes with viewing angle.

•

Eye sensitive to

ratio

: perceives intensities 0.10 and

0.11 as differing just as much as the intensities

•

To achieve equal steps in brightness, space

logarithmically rather than linearly, so that

•

Use the following relations:

•

Therefore:

•

In general for

n

+1 intensities:

•

Thus for

Gamma Correction -

Implementation

intensity values of 1/8, 1/4, 1/2, and 1

•

Dynamic range

: ratio of maximum to minimum

intensities, i.e., 1/

I

₀

•

Typical on CRT anywhere from 40:1 to 200:1 =>

I

₀

between .005 and .025:

for I

0 = 0.02, EQ (13.2) yields r = 1.0154595 …

•

First few, last two of 256 intensities from EQ (13.1):

0.0200, 0.0203, 0.0206, 0.0209, 0.0213,

0.0216, …, 0.9848, 1.0000

•

Pixel values are NOT intensities: need

gamma

correction

to compensate for nonlinearities

•

Non-linearities in CRT

•

Therefore, for some other constant k:

(13.4)

I

=

kN

γ

N

= number of electrons in beam, proportional to

grid voltage, which is proportional to pixel value

V

k

and

γ

are constants

γ

is typically in the range of 2.2 to 2.5

• To display intensity

I

, find nearest

I

_j

from a

• Number of intensities needed for appearance

of continuous intensity depends on ratio:

– need

r

= 1.01

for

I

_j

and

I

_j

+1

to be

Displaying Intensities

(2/2)

Adjusting an Intensity Curve

• What happens if you keep adjusting your image?

• Like changing original music score instead of

aspects of the performance

Display Media

•

ink bleeding and random noise considerably

decreases

n

in practice

•

Note: a medium’s dynamic range (number of

intensities) not same as gamut (number of visible

colors it can display)

Display Media CRT

Photographic prints Photographic slides

Coated paper printed in B/W Coated paper printed in color Newsprint printed in B/W

Dynamic Range

•

Backlight provides (whitish) lighting

•

Polarizer filters light, allows only certain light with

desired direction to pass

•

TFT are tiny transistors and capacitors to change the

voltage that bends the liquid crystals

•

Light Crystal controls direction of light, allow between

0 and 100% through second polarizer

•

Color Filter gives each subpixel in (R,G,B) triad its color.

Subpixel addressing used in anti-aliasing

Polarizer

Color Filter

Color Filter

Glass

Inside the LCD

Color Quiz, Part I

1.

New-Age color healers say that wearing

red pajamas at night will help you recover

faster from a cold. What is inherently

wrong with this “theory”?

2.

You email your parents a great-looking

digital picture of you winning an Ultimate

Frisbee tournament. They call you

•

Hue

distinguishes among colors such as red, green,

purple, and yellow

•

Saturation

refers to how pure the color is, how

much white/gray is mixed with it

– red saturated; pink unsaturated

– royal blue saturated; sky blue unsaturated

– pastels are less vivid, less intense

•

Lightness:

perceived achromatic intensity of

reflecting object

•

Brightness:

perceived intensity of a self-luminous

object, such as a light bulb, the sun, or a CRT

•

Can distinguish ~7 million colors when samples

placed side-by-side (JNDs – Just Noticeable Diffs.)

– with differences only in hue, λ difference of

JND colors are 2nm in central part of visible

spectrum, 10 nm at extremes –

non-uniformity!

– about 128 fully saturated hues are distinct

– eye less discriminating for less saturated

light (from 16 to 23 saturation steps for

fixed hue and lightness), and less sensitive

for less bright light

•

Subtractive mixture

occurs with inks for

print medium, paints that absorb light.

• In subtractive mixture, light passed by two

filters (or reflected by two mixed pigments) is

wavelengths passed by first

minus

that which

is subtracted by second.

• First filter passes 420 - 520 nanometers

(broad-band blue filter), while second passes

480 - 660 nanometers (broad-band yellow

filter). Light that can pass through both is in

480 - 520 nanometers, which appears green.

Subtractive Mixture

•

Additive mixture

used to mix R, G, B guns of

CRT.

• Light passed by two filters (or reflected by two

pigments) impinges upon same region of retina.

• Pure blue and yellow filtered light on same

portion of the screen, reflected upon same

retinal region. Image is gray, not green (as in

subtractive mixture).

The effect of (A) passing light through several filters

(subtractive mixture), and (B) throwing different

lights upon the same spot (additive mixture)

Color Mixing Applets

Additive Mixing Applet:

http://www.cs.brown.edu/exploratories/freeSoftware/repository/

Combined Mixing Applet:

http://www.cs.brown.edu/exploratories/freeSoftware/repository/

Color Applets

The Channel at Gravelines (1890) by Georges Seurat

•

Color daubs (left detail) mix additively at a distance.

– pointillist technique

– creates bright colors where mixing pigments

darkens (subtractive)

•

Sondheim’s “Sunday in the Park with George” with

Mandy Patkins and Bernadette Peters: fantastic

modern musical exploring Seurat’s color use and

theories about light.

•

These complementary “unique” hues play a role in

opponent color perception discussed later

•

Note that only for perfect red and green do you get gray –

CRT red and green both have yellow components and

therefore sum to yellowish gray

Complementary hues:

Any hue will yield gray if

additively mixed (in correct proportion) with

opposite hue on color circle. Such hue pairs are

complementaries. Of particular importance are

the pairs that contain four unique hues:

red-green, blue-yellow.

• Gray patches on blue and yellow

backgrounds are physically identical, look

different

• Difference in perceived brightness: patch

on blue looks brighter than on yellow,

result of brightness contrast.

• Also a difference in perceived hue. Patch

on blue looks yellowish, while patch on

yellow looks bluish. This is color contrast:

hues tend to induce their complementary

colors in neighboring areas.

•

Stare at center of figure for about a minute or two,

then look at a blank white screen or a white piece

of paper

•

Blink once or twice; negative afterimage will appear

within a few seconds showing the rose in its

“correct” colors (red petals and green leaves)

•

Measurement/specification (M/S): how to refer to/name a

particular color

•

Compare unknown and sample from a collection

– colors must be viewed under a standard light source

– depends on human judgment

•

PANTONE

®

_{Matching System}

in printing industry

•

Munsell color-order system

– set of samples in 3D space

– hue, value/lightness, chroma

(saturation)

– equal perceived distances

between neighbors

•

Artists specify color as

tint, shade, tone

using pure, white, and black pigments;

•

Ostwald system is similar

•

Later, we’ll look at computer-based models

Black Grays

White _Tints “Pure” color

Psychophysics

•

Tint, shade, and tone: subjective. Depend on observer’s

judgment, lighting, sample size, context…

•

Colorimetry: quantitative; measurement via

spectroradiometer (measures reflected/radiated light),

colorimeter (measures primary colors), etc.

Perceptual term

Colorimetry term

Hue

Dominant wavelength

Saturation

Excitation purity

Lightness (reflecting objects)

Luminance

Brightness (self-luminous objects)

Luminance

•

Physiology of vision, theories of perception still active

research areas

•

Note

: our auditory and visual processing are very

different!

– both are forms of signal processing

– visual processing integrates/much more affected

by context

– more than half of our cortex devoted to vision

– vision probably dominant sense, though it is

• We draw a frequency response curve like this:

to indicate how much a receptor responds to light

of uniform intensity for each wavelength

• To compute response to incoming band

(frequency distribution) of light, like this:

• We multiply the curves, wavelength by wavelength,

to compute receptor response to each amount of

stimulus across spectrum

Response to Stimuli

(1/3)

ƒ(

λ

)

λ

Ι

(

λ

)

•

Gray area under product curve represents how

much receptor “sees,” i.e., total response to

incoming light

•

Let’s call this receptor red, then

Response Cell Applet:

Response to Stimuli

(2/3)

Response Curve

Incoming Light

Distribution

Response to Stimuli

(3/3)

• Response curve also called filter

because it determines amplitude of

response (i.e., perceived intensity) of

each wavelength

• Where filter’s amplitude is large, lets

through most of incoming signal →

strong response

• Where filter’s amplitude is low,

filters out much/most/all of signal

→ weak response

• This is much like impulse response

and filtering you’ll see in Image

•

Imagine a creature with one receptor type (“red”)

with response curve like this:

•

How would it respond to each of these two light

sources?

•

Both signals will generate same amount of “red”

perception. They are metamers

– one receptor type cannot give more than

Different light distributions that produce the same response

Metamers

(1/4)

ƒ(

λ

)

λ

ƒ(

λ

)

• Consider a creature with two receptors (R1,

R2)

• Note that in principle an infinite number of

frequency distributions can simulate the

effect of I2, e.g., I1

– in practice, for I

n

near base of

response curves, amount of light

required becomes impractically

large

Metamers

(2/4)

Metamers

(3/4)

• For three types of receptors, potentially infinite

color distributions (metamers) that will generate

identical sensations

– you can test this out with the metamer applet

• Conversely, no two monochromatic lights can

generate identical receptor responses and

therefore all look unique

• Thomas Young in 1801 postulated that we need

3 receptor types to distinguish gamut of colors

represented by triples H, S, V (hue, saturation,

value)

Metamer Applet

• For two light sources to be metamers,

amounts of red, green, and blue response

generated by two sources must be identical

• This amounts to three constraints on lights

• But light sources are infinitely variable – one

can adjust amount of light at any possible

wavelength…

• So there are infinitely many metamers

• Observations:

– if two people have different response

curves, metamers for one person will be

different from those for other

– metamers are purely perceptual: scientific

instruments can detect difference between

two metameric lights

•

Spectral color: single wavelength (e.g., from laser);

“ROY G. BIV” spectrum

•

Non-spectral color: combination of spectral colors;

can be shown as continuous spectral distribution or

as discrete sum of

n

primaries (e.g., R, G, B); most

colors are non-spectral mixtures

•

Metamers

are spectral energy distributions that are

perceived as same “color”

– each color sensation can be produced by an

arbitrarily large number of metamers

White light spectrum where height of curve is spectral energy

distribution

Cannot predict average observer’s color

•

Can characterize visual effect of any spectral

distribution by triple (dominant wavelength, excitation

purity, luminance):

•

_{Dominant wavelength}

_→

_{hue we see; spike of energy}

e

₂

•

Excitation purity = ratio of monochromatic light of

dominant wavelength, white light to produce color

e

₁

=

e

₂

, excitation purity is 0% (unsaturated)

e

₁

= 0, excitation purity is 100% (fully saturated)

•

Luminance relates to total energy, proportional to

integral of (distribution * eye’s response curve

(“luminous efficiency function”)) – depends on both

e

₁

and

e

₂

•

Note:

– dominant wavelength of real distribution may not be one with largest amplitude!

– some colors (purple) have no dominant wavelength

400 wavelength, nm 700

Idealized uniform distribution except for e₂

• Receptors in retina (for color matching)

– rods, three types of cones (tristimulus

theory)

– primary colors (only three used for screen

images: approx. red, green, blue (RGB))

– Note: receptors each respond to wide range

of frequencies, not just spectral primaries

• Opponent channels (for perception)

– other cells in retina and neural connections

in visual cortex

– blue-yellow, red-green, black-white

– 4 psychological color primaries*: red, green,

blue, and yellow

• Opponent cells (also for perception)

– spatial (context) effects, e.g., simultaneous

contrast, lateral inhibition

* These colors are called “psychological primaries”

because each contains no perceived element of

others regardless of intensity. (

www.garys-gallery.com/colorprimaries.html)

• Receptors contain photopigments that

produce electro-chemical response; our

dynamic range of light is 10

11

_{=> division of}

labor among receptors

• Rods (scotopic): only see grays, work in

low-light/night conditions, mostly in periphery

• Cones (photopic): respond to different

wavelengths to produce color sensations,

work in bright light, densely packed near

center of retina (fovea), fewer in periphery

• Young-Helmholtz tristimulus theory

1

_{: 3 cone}

types, sensitive to all visible wavelengths of

light, maximally responsive in different

ranges

• Three receptor types can produce a 3-space

of hue, saturation and value

(lightness/brightness)

• To avoid misinterpretations, S (short), I

(intermediate), L (long) often used instead

Receptors in Retina

1_{Thomas Young proposed idea of three receptors in 1801.}

• Tristimulus theory does not explain color

perception, e.g., not many colors look

like mixtures of RGB (violet looks like red

and blue, but what about yellow?)

Triple Cell Response Applet:

http://www.cs.brown.edu/exploratories/freeSoftware/repository/

Tristimulus Theory

Spectral-response functions of

f

_λ each of the three types of cones on the human

retina

λ

Luminous Efficiency Function ≈ ∑f_λ (peak sensitivity at

•

Additional neural processing

– three receptor elements have excitatory and

inhibitory connections with neurons higher up

that correspond to opponent processes

– one pole activated by excitation, other by

inhibition

•

All colors can be described in terms of 4

“psychological color primaries” R, G, B, and Y

•

However, a color is never reddish-greenish or

bluish-yellowish: idea of two “antagonistic” opponent color

channels, red-green and yellow-blue

Hue: Blue + Red = Violet

Each channel is a weighted sum of receptor outputs – linear mapping

Light of 450 nm

Y-B

R-G

BK-W

S

I

L

- + + + - + + + +

• Some cells in opponent channels are also

spatially opponent, a type of lateral inhibition

(called

double-opponent cells)

• Responsible for effects of simultaneous

contrast and after images

– green stimulus in cell surround causes some

red excitement in cell center, making gray

square in field of green appear reddish

• Plus…

– color perception strongly influenced by

context, training, etc., abnormalities such as

color blindness (affects about 8% of males,

0.4% of females)

Nature provides for contrast enhancement at

boundaries between regions: edge detection. This

is caused by lateral inhibition.

A

B

•Receptor cells, A and B, stimulated by neighboring regions of stimulus.

•A receives moderate light. A’s

excitation stimulates next neuron on visual chain, cell D, which transmits message toward brain.

•Transmission impeded by cell B, whose intense excitation inhibits cell D. Cell D fires at reduced rate.

•Intensity of cell

c

_j

=I(c

_j

)

is function of

c

_j’s excitation

e(c

_j

)

inhibited by its

neighbors with attenuation coefficients

α

k that decrease with distance. Thus,

•At boundary more excited cells inhibit their less excited neighbors even more and vice versa. Thus, at boundary dark areas even darker than interior dark

ones, light areas are lighter than interior light ones.

•

Tristimulus theory leads to notion of matching all visible

colors with combinations of “red,” “green,” and “blue”

mono-spectral “primaries;” it almost works

•

Note: these are NOT response functions!

•

Negative value of => cannot match, must “subtract,”

i.e., add that amount to unknown

•

Mixing positive amounts of arbitrary R, G, B primaries

provides large color gamut, e.g., display devices, but no

device based on a finite number of primaries can show all

colors!

Color-matching functions, showing amounts of three primaries needed by average observer to match a color of constant luminance, for all values of dominant

wavelength in visible spectrum.

The Experiment

• Need way to describe colors precisely for

industry and science

• Want to describe all visible colors in terms of

three variables (to get 3D coordinate space)

vs. infinite number of spectral wavelengths or

special reference swatches…

• Choose three well-defined light colors to be

the three variables (an R, G and B)

The Experiment, cont.

• But any three R, G and B can’t match

all colors... (for reasons we’ll be

exploring soon)

• Sometimes need to add some R to the

sample you are trying to match.

Expressed mathematically as “-R”.

Make Nice Curves

• Fit curves to three functions that

describe the matching– f(r), f(g), and

f(b)

• Transform f(r,g,b) functions above to

represent three new primaries (not

actually visible light colors) X, Y, and

Z.

R

CIE Space for Color Matching

•

Commission Internationale de l´Éclairage (CIE)

•

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 efficiency function

•

x

_λ

, y

_λ

, and z

_λ

are linear combinations of r

_λ

, g

_λ

, and b

_λ

=>

RGB

_i

XYZ

_i

via a matrix

The mathematical color matching functions x_λ y_λ, and z_λ for the 1931 CIE X, Y, and Z primaries. They are

defined tabularly at 1 nm intervals for color samples that subtend 2° field of view on retina

z



x



x



y

CIE Space Showing an

RGB Gamut

• Note irregular shape of visible gamut in CIE

space; due to eye's response as measured

by response curves

• Range of displayable colors clearly smaller

• Left: plane embedded in CIE space. • Top right: view perpendicular to plane.

• Bottom right: projection onto (X, Y) plane (Z = 0 plane). This is called the chromaticity diagram

• Chromaticity – Everything that deals with color (H, S), not luminance/brightness

• For an interactive chromaticity diagram, check out applet:

http://www.cs.rit.edu/~ncs/color/a_chroma.html

– Make a fairly big gamut and move the sliders to roughly the white center (C)

   -note very unequal mixtures of R,G, B    -why is that?

Several views of X + Y + Z = 1 plane of CIE space

•

Amounts of

X

,

Y

, and

Z

primaries needed to match a

color with spectral energy distribution P(λ):

– in practice use

Σ

’s

•

For given color C, C =

X

X

+

Y

Y

+

Z

Z

•

Get chromaticity values that depend only on dominant

wavelength (hue) and saturation (purity), independent of

luminous energy, for a given color, by normalizing for

total amount of luminous energy =

(

X

+

Y

+

Z

)

which carries luminance data

CIE 1976 UCS chromaticity diagram from Electronic Color: The Art of Color Applied to Graphic Computing by Richard B. Norman, 1990

Inset: CIE 1931 chromaticity diagram

•

CIE chromaticity diagram is projection onto (

X

,

Y)

plane of (

X + Y + Z

) = 1 plane

•

Plots

x, y

for all visible chromaticity values

– colors with same chromaticity map into

same point regardless of luminance

– Spectrally pure, monochromatic colors on

curve

– colors that are luminance-related are not

shown,

e.g., brown = orange-red chromaticity at

low luminance

– infinite number of planes which project onto

(

X

+

Y

+

Z

= 1) plane and all of whose

colors differ; thus it is

NOT

a full color

palette!

Spectral locus made up of chromaticity coordinates of monochromatic light.

Outside locus bounds = not a physical color.

Spectral locus closed by line spanning blue and red.

• Uses of CIE Chromaticity Diagram:

– Name colors

– Define color mixing

– Define and compare

color gamuts

CIE Space: International Technical

Specification of Color

• Now we have a way (specifying a color’s CIE

X, Y, and Z values) to precisely characterize

any color using only three variables!

• Very convenient! Colorimeters,

spectroradiometers measure X, Y, Z values.

• Used in many areas of industry and academia

—from paint to lighting to physics and

chemistry.

• International Telecommunication Union uses

1931 CIE color matching functions in their

recommendations for worldwide unified

colorimetry

– International Telecommunication Union (1998) ITU-R  BT.1361 WORLDWIDE  UNIFIED  COLORIMETRY  AND  RELATED  CHARACTERISTICS OF  FUTURE  TELEVISION  AND  IMAGING  SYSTEMS

– International Telecommunication Union (2000) ITU-R BT.709-4 PARAMETER VALUES FOR THE HDTV STANDARDS FOR PRODUCTION AND

•

Measure dominant wavelength and excitation purity

of any color:

– Especially useful because color can be specified even when it can’t be accurately displayed on RGB monitor or printed, etc.

– For non-spectral colors (mixtures of red and blue) complement’s dominant wavelength used

•

Matched color is at point

A

in figure below :

– Mixture of two colors always on line between them => A = tC + (1– t)B where B is a spectral color

– ratio AC/BC is excitation purity of A

• Colors add linearly in CIE: All mixture of

I

and

J

lie on the line connecting them.

• Thus, all possible mixtures of

I

,

J

and any third

color,

K

, (or additional colors) lie within their

convex hull. Called the color

gamut

.

• Also, no finite number of primaries can include

all visible colors

• DEMO:

http://www.cs.rit.edu/~ncs/color/a_chroma.html

•

Smallness of print gamut with respect to color

monitor gamut => faithful reproduction by printing

must use reduced gamut of colors on monitor

Color Mixing/Color Gamuts

(2/2)

Left: gamut of printer

Chromatic Opponent Channels

from Falk’s Seeing the Light, Harper and Row, 1986

Can describe all colors in terms of red-green

and yellow-blue—called psychological

• Anatomical evidence for 3 types of receptors in our cones; response functions measure sensitivity.

– NB: each cone type reacts to all wavelengths in the visible spectrum, but peaks at a different wavelength!

• Leads to tri-stimulus theory

• Infinite number of spectral distributions can yield the same color sensation (metamers)

• Color matching experiment leads to noticing that you can’t match all visible colors with any 3 (actually any finite number of) primaries

• Such experiments show you need “negative” values of red to match some samples, i.e. amounts of red added to sample being matched

• Led CIE to define CIE space based on 3 mathematical (non-visible, XYZ) primaries derived from actual ones, which

require only positive values of the primaries to match visible colors

• Colors in visible spectrum (all combinations of hue,

saturation and value/brightness) form an irregularly-shaped solid within CIE space (due to overlapping response curves and differential sensitivity of the three types of cones)

• Mathematical RGB cube and any actual gamut for a display device are a subset of the visible solid

• Chromaticity diagram is a projection of the X+Y+Z = 1 plane, which shows chromaticity (i.e., hue/saturation) of visible colors at constant luminance, onto XY plane; spectral colors lie on the outer locus, purples and magentas lie on the straight line boundary, and mixtures of colors lie inside;

each gamut is a convex hull of its components (primaries) and lies within the spectral locus

• Color spaces used to name/specify colors have various properties to various degrees (ease of use, linearity, perceptual uniformity,…)

Color Quiz IV

• Your supercoder friend says she’s made a

monitor that can show all visible colors: she

has accomplished this by using

out-of-visual range phosphors—

– One UV, one IR and one in the bright

green (visible) range.

– She claims the space created by mixing

these values covers all visible

wavelengths.

Color Spaces

• A

color space

is a

way of ordering

colors in one, two,

three (or more)

geometric

dimensions

• From 600BC to

1600AD colors

usually ordered by

brightness.

• Newton

demonstrated

familiar “rainbow”

ordering of white

light through a

prism

• Newton also first to

arrange colors in a

circle

• Key aspect of color

science

• Different situations suggest different

ways of talking about colors

• Absolutely unambiguous industry

standards—requires something like CIE

space.

• Programming for CRT monitors easier in

space defined by monitor phosphors:

RGB space

• Broadcast TV uses some phosphors, but

has different constraints: YIQ space

• Printers use CMY (cyan, magenta, yellow)

inks for color printing :CMY(K) space

• Six-primary-color projection system:

6-color IRODORI space

• User-friendliness: Hue, Saturation, Value

is easier than RGB

• Need perceptual constancy in the space?

Munsell or CIELab

• Etc. You can make up your own color

spaces too…

• RGB primaries are

additive:

The RGB cube (Grays are on the dotted main diagonal)

• Main diagonal => gray levels

– black is (0, 0, 0)

– white is (1, 1, 1)

• RGB color gamut defined by CRT phosphor

chromaticities

– differs from one CRT to another

– And by company too: Adobe RGB (larger space)

vs. sRGB (HP/Microsoft) (fewer colors, but

allocated bit depth better and more than

enough for most on-screen and Web uses

http://www.cambridgeincolour.com/tutorials/sRGB-AdobeRGB1998.htm

• Conversion from one RGB gamut to another (e.g., between two ICC device profiles)

– convert one to XYZ, then convert from XYZ to another

• Form of each transformation:

• Where X_r, X_g, and X_b are the weights applied to the monitor’s RGB colors to find X, and so on

• M is the 3 x 3 matrix of color-matching coefficients

• Let M₁ and M₂ be matrices to convert from each of the two monitor’s gamuts to CIE

The RGB Color Model (2/3)

•

But what if

– C₁ is in the gamut of monitor 1 but is not in the gamut of monitor 2, i.e., C₂ = M₂-1 _M

1C1 is

outside the unit cube and hence is not displayable?

•

Solution 1

: clamp RGB at 0 and 1

– simple, but distorts color relations

•

Solution 2

: compress gamut on monitor 1 by

scaling all colors from monitor 1 toward center of

gamut 1

– ensure that all displayed colors on monitor 1 map onto monitor 2

•

Used in electrostatic and in 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 removed or 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):

The CMY(K) Color Model

(1/2)

•

Color printing presses, most 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

– Wherever there are CMY equal amounts of CMY, replace them with black.

– Let K be min(C, M, Y), and ignore that min (C here) since it will be covered by K; the other two are the original values – K (M’ and Y’ here) since the first increment equal to K has been covered by K

The CMY(K) Color Model

(2/2)

•

Recoding for RGB for transmission efficiency and downward

compatibility with B/W broadcast TV; used for NTSC (National

Television Standards Committee (cynically, “never the same

color”))

•

Y is luminance – same as CIE Y primary

•

I and Q encode chromaticity

• DEMO: http://www.cs.rit.edu/~ncs/color/a_spaces.html

•

Only

Y (= 0.3R + 0.59G + 0.11B)

shown on B/W monitors:

– weights indicate relative brightness of each primary – assumes white point is illuminant C:

x_w = 0.31, y_w = 0.316, and Y_w = 100.0

•

Preparing color material which may be seen on B/W

broadcast TV, adjacent colors should have different

Y

values

•

Hue, saturation, value (brightness)

•

HSB-space invented by Alvy Ray Smith—described in his

1978 SIGGRAPH paper,

Color Gamut Transformation

Pairs

.

•

Hexcone subset of cylindrical (polar) coordinate system

• DEMO: http://www.cs.rit.edu/~ncs/color/a_spaces.html

•

Has intuitive appeal of the artist’s tint, shade, and tone

model. Based on perceptual variables vs. monitor

phosphor colors

– 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

The HSV Color Model (1/2)

Single hexcone HSV

color model.

(The V = 1 plane contains

the RGB model’s R = 1,

G = 1, B = 1, in the

The HSV Color Model

(2/2)

•

Colors on V = 1 plane are not equally bright

•

Complementary colors 180° opposite

•

Saturation measured relative to color gamut

represented by model which is subset of

chromaticity diagram:

– therefore, 100% S 100% excitation purity

•

Top of HSV hexcone is projection seen by looking

along principal diagonal of RGB color

•

RGB subcubes are plane of constant V

•

Code for RGB HSV on page 592, 593

¿

•

Hue, lightness, saturation

•

Double-hexcone subset

•

Maximally saturated hues are at S = 1, L = 0.5

•

Less attractive for sliders or dials

•

Neither V nor L correspond to Y in YIQ!

•

Conceptually easier for some people to view white

as a point

Perceptual Uniformity

(or lack thereof)

•

RGB, HSV, HSL all

perceptually non-uniform

– move through color space from color C₁ to a new color C₁΄ through a distance ΔC C₁΄ = C₁ + ΔC

– move through the same distance ΔC, starting from a different color C₂ C₂΄ = C₂ + ΔC

– the change in color in both cases is

mathematically equal, but is not perceived as equal

•

Moving a slider almost always causes a perceptual

change in the other two parameters, which is not

reflected by changes in those sliders; thus,

changing hue frequently will affect saturation and

value, even in Photoshop!

•

Ideally want a perceptually uniform space:

two colors that are equally distant are

perceived as equally distant, and changing one

parameter does not perceptually alter the other

two

• Created from perceptual data, is not a

transformation of or approximation to CIE

• Uniform perceptually based 3D space

– accounts for the fact that a bright yellow is

much lighter than a bright blue, and that

many more levels of saturation of blue can

be distinguished than of yellow

• Magnitude of change in one parameter

always maps to the same effect on

perception

The Munsell System

(2/2)

• Hues (called

chroma

in Munsell) arranged on a

circle

– a 20 degree rotation through this circle always

causes the same perceptual change, no matter

where on the circle you start from

– does not cause changes in saturation or value

• Saturation as distance from center of circle

– moving away from the center a certain distance

always causes the same perceptual change

– does not cause changes in hue or value

• Value as height in space

– moving vertically always causes the same

perceptual change

– does not cause changes in hue or saturation

•

CIE Lab was introduced in 1976

– popular for use in measuring reflective and transmissive objects

•

Three components:

– L* _{is luminosity}

– a* _{is red/green axis}

– b* _{is yellow/blue axis}

•

Mathematically described space and a

perceptually uniform color space

•

Given white = (

X

_n

, Y

_n

, Z

_n

)

•

These transformations cause regions of colors

perceived as identical to be of the same size

Bonus Color Space:

CIECAM02 Color

Appearance Model

•

http://scanline.ca/ciecam02/

• Even perceptually developed spaces

(like Munsell) don’t take into account

color interactions

If you really like this space…

• RGB

+ Cartesian coordinate system

+ hardware-based (easy to transform

to video)

+ tristimulus-based

- hard to use to pick and name colors

- doesn’t cover gamut of perceivable

colors

- non-uniform: equal geometric

distance => unequal perceptual

distance

• HSV

+ easy to convert to RGB

+ easy to specify colors/intuitive

- doesn’t cover gamut of perceivable

colors

- non-uniform

•

CIE

+ covers gamut of perceived colors

+ based on human perception (matching

experiments)

+

linear

+ contains all other spaces

- non-uniform (but variations such as CIE Lab are

closer to Munsell, which is uniform)

- xy-plot of chromaticity horseshoe diagram

doesn’t show luminance

•

CIE Lab space

+ perceptually uniform

+ based on psychological colors (y-b, r-g, w-b)

- terrible interface in Photoshop

- no visualization of the color space

- very difficult to determine what values mean if you

are unfamiliar with the space

- primarily used as an internal space to convert

between RGB and CMYK

CIELab in Photoshop

Lab slides

HSB color space

slice—constant

value (B)

Interactive Specification of Color, 1/3

Sliders

• English-language

names are

ambiguous and

subjective

• Most programs

use numeric

coordinates in

color space with

slide dials:

RGB color picker from Adobe Photoshop for Mac OS

• Interact with visual representation of the color space

• Important for user to see actual display with new color

Interactive Specification of Color, 2/3

Geometric Views

HSB color picker from Adobe Photoshop

HSV color picker from Mac OS X’s Finder

Interactive Specification of Color, 3/3

Geometric Views, cont.

3D Color Pickers

• 3D spaces applet

Some Commercial

Alternative Pickers

• From the Behr paint company: great for

interior decoration (related to rendering

spaces!)

http://

www.behr.com/behrx/workbook/index.jsp

Interactive Palette Tools

Color Grouper

Gradient Mixer

Palette Browser

Dial-a-Color

•

Interpolation needed for:

– Gouraud shading – antialiasing

– blending images together in a fade-in, fade-out sequence

•

Results depend on the color model used:

– RGB, CMY, YIQ, CIE are related by affine transformations, hence straight line (i.e., interpolation paths) are maintained during mapping

– not so for HSV, HLS; for example, interpolation between red and green in RGB:

– interpolating in HSV:

midpoint values in RGB differ by 0.5 from same

Interpolating in Color Space (1/2)

red = (0

º

, 1, 1); green = (120

º

, 1, 1)

midpoint = (60

º

, 1, 1)

RGB_to_HSV = (60

º

, 1, 0.5)

•

RGB, red is (1, 0, 0) and cyan is (0, 1, 1) which

interpolate to (0.5, 0.5, 0.5), gray

– in HSV, that is (UNDEFINED, 0, 0.5)

•

In HSV, red is (0º, 1, 1) and cyan is (180º, 1, 1) which

interpolates to (90º, 1, 1)

– new hue at maximum value and saturation, whereas the “right” result of combining equal amounts of complementary colors is a gray value

•

Thus, (interpolating, transforming)

(transforming, interpolating)

•

For Gouraud shading (see Rendering unit), use any

of the models because interpolants are generally so

close together that interpolation paths are close

together

•

For blending two images, as in fade-in fade-out

sequence or for antialiasing, colors may be quite

distant

– use additive model, such as RGB

•

If interpolating between two colors of fixed hue (or

saturation), maintain fixed hue (saturation) for all

interpolated colors by HSV or HLS

– note fixed-saturation interpolation in HSV or HLS is not seen as having exactly fixed saturation by

viewer!

Interpolating in Color Space (2/2)

Color Management

• How to deal with gamma, different

color spaced by display (RGB) vs.

printer (CMYK) and more?

• International Color Consortium (ICC)

developed protocol for “profiles”

that characterize the gamma and

other qualities of

– Input devices (e.g., scanners)

– Displays (e.g., monitors)

– Output devices (e.g., printers)

• Define characteristics in terms of

CIE-type space

In and Out of CIE Space

See ICC Web site at

How to Smush or Expand Data

aka “Rendering Intents”

• Colorimetric intents

– Good for keeping corporate logo right

color or matching white points

• Saturation

– Saturation preserved, perhaps at

expense of hue and lightness

• Perceptual

– Full gamut of image compressed or

expanded to full gamut of destination

device.

Using Color in Computer Graphics

Ask, “Why?”

• Aesthetic uses?

– establish a tone or mood

– promote realism

• Highlight features?

• Code numeric quantities?

– temperature across the U.S.

– vegetation and mineral

concentrations on Earth, moon, and

planets (LandSat, Mars missions)

– speed of fluids in computational

fluid dynamics (streamlines)

(Color use points culled from

Barb Meier’s 1987 Brown CS

Master’s Thesis, and

Choose Palette or Scheme

• Color harmony:

– choose a theme color

– choose a complementary color for objects that

should have a dynamic relationship with the

theme-colored objects

– choose some colors close together (analogous

colors) to model light (shading) and for

coloring objects that are close to each other

– choose contrasting colors (especially value

contrast) for text and background

– color circles can help with these choices

Assign Colors for Ease of

Use/Reading/Viewing

• Don’t use more colors than

necessary (when in doubt use less

color)

• Ensure contrast of color between

text and background (especially of

value)

• All else being equal, areas of

saturated color will draw attention

– don’t use highly saturated colors

of background

– large areas of intense color can

lead to eye strain

• Use colors that have greatest

contrast with the background for

most important items

• If using several colors of foreground

object, a neutral color often best for

background

Color Coding 1/2

• Do

– Use families of color to code related items

– Use a progression of values to code an ordered

set (but don’t use more than 5 steps if values

need to be remembered)

– Color code for accepted use in specific

industry: red means often means stop, but in

power industry means go (electricity flowing),

In finance means money being lost…

– Supply a legend, but also use “dual coding”

wherever possible

• i.e. not just color for temperatures across

US, but add actual values (see slide 98)

Color Coding 2/2

• Don’t

– Use red and green for important color

coding. Many people (10% men)

red-green colorblind.

– Use similar shades of green and blue

for key differentiation. Often confused

by viewers

– Use adjacent small patches of different

colors – they will just blend into each

other

Too Much Diversity?

Saturation—Not Best Choice

for a Background…

• Was

http://www.baem.org.uk

(not working)

• Also http://

No Comment Needed

• http://

Color Quiz, V

1.

You are making a Web page for your band,

The

Chromatones

. Your drummer uses dark red text

on black because “it looks like blood, man.” Why

is this not a good design choice?

2.

You are designing a piece of software to

automatically color B&W GIS map data. You

receive a map image of Rhode Island and census

data on pets and average yearly temperatures.

•

The pet data has 10 categories, including cats,

dogs, fish and minx. Your client want to

immediately see which neighborhoods have the

most minx. How would you categorize this type

of data and what type of colors would work well

to distinguish the different pets?

•

Your temperature data ranges from -10-degrees

•

Our eyes sensitive to infinite variety of spectral

hues but need to describe colors

with < infinite number of parameters

•

Physiology of eye, psychology of vision, and

mathematics all come together to make 3D color

spaces very useful

•

Also led to development of CIE space—containing

all visible colors. Convenient for many reasons

– including as a “connection” space for other color spaces, a boon to color management

•

No fixed rules for color use, but

– respect perceptual effects – think about role of color

• Aesthetic • Coding data

• Culturally accepted function (red=stop), etc.

– when in doubt use less color, not more

For more on color, check out the following web sites:

•

Color Matters

– http://www.colormatters.com

•

Educational Color Applets

– http://www.cs.rit.edu/~ncs/color/

– Color glossary:

http://www.cs.rit.edu/~ncs/color/glossary.htm

•

Color Vision and Design Principles

– http://www.handprint.com/HP/WCL/color4.html

•

Online book on color

– http://www.colorvoodoo.com/cvoodoo4.html

•

Map Coloring

– http://www.personal.psu.edu/faculty/c/a/cab38/

•

Get your own color cube!!!

– http://www.colorcube.com/intro.htm