I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Introduction to Color

Andries van Dam October 20, 2005 Introduction to Computer Graphics 1/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S All You Need to Know About Color in CS123

Andries van Dam October 20, 2005 Introduction to Computer Graphics 2/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Achromatic and Colored Light

• Achromatic light

• Chromatic color

• Color models for raster graphics

• Reproducing color

• Using color in computer graphics

Andries van Dam October 20, 2005 Introduction to Computer Graphics 3/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Why Study Color in Computer Graphics? • Physics and measurement for realism – what does coding an RGB triple mean? • Perception and aesthetics for selecting appropriate user interface colors – why a bright red and orange striped bedroom is a bad idea – how to put on matching pants and shirt in the morning – role of culture and even age • e.g., WIRED magazine • Color models for providing users with easy color selection – systems for naming and describing colors • Color models, measurement and color gamuts for converting colors between media – why colors on your screen may not be printable, and vice-versa – managing color in systems with computers, monitors, scanners, and printers – color awareness • a highly interdisciplinary field that is often unpredictable and downright bizarre • We study it as a useful background for rendering and because it provides a good introduction to signal processing – also used for image processing and anti-aliasing • Graphics group has worked on color tools for Adobe.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 4/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Why is Color Difficult?

• 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 • Color of object depends not only on object itself but also on light source illuminating it, on color of surrounding area, and on 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 transmits only pure red also appears black

Andries van Dam October 20, 2005 Introduction to Computer Graphics 5/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Achromatic Light • Achromatic light: intensity (quantity of light) only – 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 – visual color sensations • brightness/intensity • chromaticity/color – hue/position in spectrum (red, green, yellow . . .) – saturation/vividness – generally need 64 to 256 gray levels for continuous-tone images without contouring

Andries van Dam October 20, 2005 Introduction to Computer Graphics 6/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Gamma • 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: PC monitors have a gamma of roughly 2.5, while Mac monitors have a gamma of 1.8, so Mac images appear dark on PC’s

Mac user PC user changes PC user gives generates image to make it image back; image bright it’s now too bright • 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 – proper design, use of color software like ColorBlind ®

Andries van Dam October 20, 2005 Introduction to Computer Graphics 7/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Compensating for Nonlinearities – Gamma Correction

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

• Eye sensitive to ratio: perceives intensities 0.10 and 0.11 as differing just as much as the intensities 0.50 and 0.55

Andries van Dam October 20, 2005 Introduction to Computer Graphics 8/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S ` Gamma Correction – Implementation • To achieve equal steps in brightness, space logarithmically rather than linearly, so that I I j + 1 = j = r I j I j − 1 • Use the following relations: = = = = 2 = = 3 I0 I0, I1 rI0, I2 rI1 r I0, I3 rI2 r I0,K, 255 I 255 = r I 0 = 1

• Therefore:

1/255 j j/255 (255−j)/255 r =(1/I0) , I j =r I0 =(1/I0) I0 =I0 (13.2) for0≤ j ≤255 • In general for n+1 intensities: 1/n (n−j)/n r =(1/I0) , Ij =I0 for0≤ j ≤n (13.3) • Thus for

n = 3 (4 intensities) and I0 =1/ 8, r = 2, intensity values of 1/8, 1/4, 1/2 and1

Andries van Dam October 20, 2005 Introduction to Computer Graphics 9/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Displaying Intensities (1/2) • Dynamic range: ratio of maximum to minimum

intensities, i.e., 1/I0

• Typical on CRT anywhere from 40:1 to 200:1 => I0 between .005 and .025:

for I0 = 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 I = kNγ (13.4) N = number of electronsin beam,proportional to grid voltage,which is proportional to pixel valueV k andγ areconstants γ is typicallyin the rangeof 2.2 to 2.5 • Therefore, for some other constant k:

I = KV γ , or V = ( I / K ) 1 / γ (13.5)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 10/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Displaying Intensities (2/2)

• To display intensity I, find nearest Ij from a table or:

j = ROUND(logr(I/I0))

j • Then Ij = r I0 1/γ •And Vj = ROUND((I j / K) )

–if nolook-up table, load Vj in pixel

– if look-up table, load j in pixel, Vj in entry j

• Number of intensities needed for appearance of continuous intensity depends on ratio:

– need r = 1.01 for Ij and Ij+1 to be indistinguishable: r = (1 / I ) 1 / n or 1 .01 = (1 / I ) 1 / n 0 0 –solve for n: = n log 1 .01 (1 / I 0 ); 1 / I 0 is dynamic range (13.10)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 11/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Display Media

Display Media Typical Dynamic Range No. of Intensities, n CRT 50-200 400-530 Photographic prints 100 465 Photographic slides 1000 700 Coated paper printed in B/W 100 465 Coated paper printed in 50 400 color 10 234 Newsprint printed in B/W

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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 12/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Inside the CRT

Cool pictures: http://www.pctechguide.com/06crtmon.htm Block diagram : http://www.tpub.com/neets/book18/ Andries van Dam October 20, 2005 Introduction to Computer Graphics 13/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Inside the LCD

For more information: http://www.pcworld.com (the picture above is from PCworld) Or check out http://www.howstuffworks.com

Andries van Dam October 20, 2005 Introduction to Computer Graphics 14/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S “” Chromatic Color • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 15/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Color Mixture AB

The effect of (A) passing light through several filters (subtractive mixture), and (B) throwing different lights upon the same spot (additive mixture)

(These and other scanned-in illustrations are taken from Gleitman’s Psychology, 3rd Edition, 1991.)

Color Mixing Applets Additive Mixing Applet: http://www.cs.brown.edu/exploratories/freeSoftware/r epository/edu/brown/cs/exploratories/applets/colorMi xing/additive_color_mixing_guide.html

Combined Mixing Applet: http://www.cs.brown.edu/exploratories/freeSoftware/r epository/edu/brown/cs/exploratories/applets/combin edColorMixing/combined_color_mixing_guide.html

Andries van Dam October 20, 2005 Introduction to Computer Graphics 16/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Subtractive Mixture blue green yellow red

green

• 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.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 17/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Additive 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 upon same portion of the screen, reflected upon same retinal region. Image is grey, not green (as in subtractive mixture).

Andries van Dam October 20, 2005 Introduction to Computer Graphics 18/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Additive Mixture in Pointillist Art

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.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 19/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Complementary Hues – Additive Mixture

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.

• 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 20/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Color Contrast

• 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 that on yellow looks bluish. This is color contrast: hues tend to induce their complementary colors in neighboring areas.

For a good applet on this, check out: http://www.cs.brown.edu/courses/cs092/VA10/HTML/start.html and click on any Albers Plate link

Andries van Dam October 20, 2005 Introduction to Computer Graphics 21/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Negative Afterimage

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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 22/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Specifying (Naming) Color • 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; Decrease saturation White Tints “Pure” Ostwald system is similar color Decrease Tones lightness Grays Shades

Black • Later, we’ll look at computer-based models

Andries van Dam October 20, 2005 Introduction to Computer Graphics 23/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S 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 apparently harder to be deaf than blind

Andries van Dam October 20, 2005 Introduction to Computer Graphics 24/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Response to Stimuli (1/3) • We draw a frequency response curve like this: f (λ)

λ 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: I(λ)

λ • We multiply the curves, wavelength by wavelength, to compute receptor response to each amount of stimulus across spectrum

Andries van Dam October 20, 2005 Introduction to Computer Graphics 25/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Response to Stimuli (2/3) Response Curve f (λ)

Incoming Light Distribution λ I(λ) λ Product of functions R(λ) λ • Gray area under product curve represents how much receptor “sees,” i.e., total response to incoming light • Let’s call this receptor red, then red perception = ∫R(λ)d(λ) = ∫I(λ)f(λ)dλ Response Cell Applet: http://www.cs.brown.edu/exploratories/freeSoftware/repository/edu/ brown/cs/exploratories/applets/spectrum/single_cell_response_guide .html

Andries van Dam October 20, 2005 Introduction to Computer Graphics 26/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

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 Processing unit

Andries van Dam October 20, 2005 Introduction to Computer Graphics 27/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Metamers (1/4) Different light distributions that produce the same response • Imagine a creature with one receptor type (“red”) with response curve like this: f (λ)

λ • How would it respond to each of these two light sources?

f (λ)

λ • Both signals will generate same amount of “red” perception. They are metamers – one receptor type cannot give more than one color sensation (albeit with varying brightness)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 28/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Metamers (2/4) • Consider a creature with two receptors (R1, R2)

I1 I2 I1

• Note that in principle an infinite number of frequency distributions can simulate the effect of I2, e.g., I1 – in practice, for In near base of response curves, amount of light required becomes impractically large

Andries van Dam October 20, 2005 Introduction to Computer Graphics 29/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

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 http://www.cs.brown.edu/exploratories/freeSoftware/reposit ory/edu/brown/cs/exploratories/applets/spectrum/metamers _guide.html

Andries van Dam October 20, 2005 Introduction to Computer Graphics 30/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Metamers (4/4) • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 31/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Energy Distribution and Metamers • 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

White light spectrum where height of curve is spectral energy distribution • Metamers are spectral energy distributions that are perceived as same “color” – each color sensation can be produced by an arbitrarily large number of metamers

Cannot predict average observer’s color sensation from a distribution

Andries van Dam October 20, 2005 Introduction to Computer Graphics 32/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Colorimetry Terms • Can characterize visual effect of any spectral distribution by triple (dominant wavelength, excitation purity, luminance):

e2 Dominant Energy Wavelength Density e1 Idealized uniform distribution except

for e2

400 wavelength, nm 700

• Dominant wavelength → hue we see; spike of energy e2 • Excitation purity = ratio of monochromatic light of dominant wavelength, white light to produce color

e1 = e2, excitation purity is 0% (unsaturated) e1 = 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 e1 and e2 • Note: – dominant wavelength of real distribution may not be one with largest amplitude! – some colors (purple) have no dominant wavelength

Andries van Dam October 20, 2005 Introduction to Computer Graphics 33/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Three Layers of Human Color Perception – Overview

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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 34/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Receptors in Retina • Receptors contain photopigments that produce electro-chemical response; our dynamic range of light is 1011 => 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 theory1: 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

1Thomas Young proposed idea of three receptors in 1801. Hermann von Helmholtz looked at theory from a quantitative basis in 1866. Although they did not work together, theory is called Young-Helmholtz theory since they arrived at same conclusions.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 35/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Tristimulus Theory

λ

Luminous Efficiency Function Spectral-response functions of f each of the three types λ ≈ ∑fλ (peak sensitivity at of cones on the human yellow-green (550nm)) retina • 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/edu/ brown/cs/exploratories/applets/spectrum/triple_cell_response_guide. html

Andries van Dam October 20, 2005 Introduction to Computer Graphics 36/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Hering’s Chromatic Opponent Channels

• 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

Light of 450 nm S IL

-+ + + - + + + + Y-B R-G BK-W

Each channel is a weighted sum of receptor outputs – linear Hue: Blue + Red = Violet mapping

Andries van Dam October 20, 2005 Introduction to Computer Graphics 37/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Spatially Opponent Cells • 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)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 38/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Mach Bands and Lateral Inhibition

A ulus intensity B Stim Position on stimulus

Nature provides for contrast enhancement at boundaries between regions: edge detection. This is caused by lateral inhibition.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 39/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Lateral Inhibition and Contrast

•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 cj=I(cj) is function of cj’s excitation e(cj) inhibited by its neighbors with attenuation coefficients αk that decrease with distance. Thus, excite

I(c j ) = e(c j ) - ∑α k e(ck ) k ≠ j

•At boundary more excited cells inhibit their less excited neighbors even more and inhibit vice versa. Thus, at boundary dark areas even darker than interior dark ones, light areas are lighter than interior light ones. •Nature’s edge detection

Andries van Dam October 20, 2005 Introduction to Computer Graphics 40/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Color Matching • Tristimulus theory leads to notion of matching all visible colors with combinations of “red,” “green,” and “blue” mono- spectral “primaries;” it almost works

rλ bλ

gλ

rλ λ Wavelength λ (nm) 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.

• Note: these are NOT response functions!

• Negative value of r λ => 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!

Andries van Dam October 20, 2005 Introduction to Computer Graphics 41/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S 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λ

=> RGBi Q XYZi via a matrix

z

y x

x λ

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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 42/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S CIE Space Showing an RGB Gamut

Color gamut for typical color monitor with XYZ color space • 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 than all colors visible in XYZ space.

Andries van Dam October 20, 2005 Introduction to Computer Graphics 43/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S CIE Space Projection to Chromaticity Diagram

Several views of X + Y + Z = 1 plane of CIE space • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 44/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

CIE Chromaticity Diagram (1/4) • Amounts of X, Y, and Z primaries needed to match a color with spectral energy distribution P(λ): = λ λ X k∫ P( )xλd = λ λ Y k∫ P( )yλ d = λ λ Z k∫ P( )zλ d

– in practice use Σ’s • For given color C, C = XX + YY + ZZ • 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) X x = x + y + z = 1; (x,y,z) lies on X + Y + Z = 1 X + Y + Z plane Y y = (x, y) determines z but cannot recover X, Y, Z X + Y + Z from only x and y. Need one more piece of Z z = data, Y, which carries luminance data X + Y + Z x 1− x − y (x, y,Y), X = Y, Y = Y, Z = Y y y

Andries van Dam October 20, 2005 Introduction to Computer Graphics 45/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

CIE Chromaticity Diagram (2/4)

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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 46/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

CIE Chromaticity Diagram (3/4) • CIE chromaticity diagram is projection onto (X, Y) plane of (X + Y + Z ) = 1 plane

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.

• 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! – illuminant C: near (but not at) x = y = z = 1/3; close to daylight

Andries van Dam October 20, 2005 Introduction to Computer Graphics 47/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

CIE Chromaticity Diagram (4/4) • Uses of CIE Chromaticity Diagram:

• Name colors • Define color mixing • Define and compare color gamuts

Andries van Dam October 20, 2005 Introduction to Computer Graphics 48/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Today • Recap of CIE color space—how did we get to it? Why is it important? • Other color spaces (RGB, HSV, etc.) • How color spaces influence color picking • How to use color: some Dos and Don’ts

Andries van Dam October 20, 2005 Introduction to Computer Graphics 49/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S CIE and Chromaticity Diagram Review • 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)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 50/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Doing the Experiment • People sit in a dark room matching colors • 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”.

http://www.maelabs.ucsd.edu/mae152/handouts/ColorInComputerGraphics.ppt

Andries van Dam October 20, 2005 Introduction to Computer Graphics 51/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Make Nice Curves • Fit curves to three functions that describe the matching– f(r), f(g), and f(b)

G

R • Transform f(r,g,b) functions B above to represent three new primaries (not actually visible light colors) X, Y, and Z. Why?

Andries van Dam October 20, 2005 Introduction to Computer Graphics 52/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Voila! 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 CHARACTERIST ICS OF FUTURE TELEVISION AND IMAGING SYSTEMS – International Telecommunication Union (2000) ITU-R BT.709-4 PARAMETER VALUES FOR THE HDTV STANDARDS FOR PRODUCTION AND INTERNATIONAL PROGRAMME EXCHANGE

Andries van Dam October 20, 2005 Introduction to Computer Graphics 53/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using the CIE Chromaticity Diagram (1/2) • Measure dominant wavelength, excitation purity of color by matching with mix of CIE primaries: – colorimeters measure tristimulus X, Y, and Z values from which chromaticity coordinates are computed – spectroradiometers measure wavelengths of spectral energy distribution and tristimulus values • Suppose matched color is at point A in figure below:

– when two colors added, new color lies on line connecting two colors => A = tC + (1– t)B; B is spectral color, C is illuminant – ratio AC/BC = excitation purity of A

Andries van Dam October 20, 2005 Introduction to Computer Graphics 54/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using the CIE Chromaticity Diagram (2/2)

• Complementary colors can be mixed to produce white light (a non-spectral color!) • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 55/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Color Gamuts (1/2) • 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.

• No finite number of primaries can include all visible colors

Andries van Dam October 20, 2005 Introduction to Computer Graphics 56/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Color Gamuts (2/2) • Smallness of print gamut with respect to color monitor gamut => faithful reproduction by printing must use reduced gamut of colors on monitor

Left: gamut of printer Right: gamut of monitor

Andries van Dam October 20, 2005 Introduction to Computer Graphics 57/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Why the Chromaticity Diagram is Not Triangular • No gamut described by a linear combination of n physical (real) primaries (yielding a convex hull) can simulate the eye’s responses to all visible colors •Review of CIE – shape of CIE space determined by Matching Experiment: subject shown color and asked to create metameric match from colored monochromatic primaries, R, G and B – most colors can be matched, some can’t because of way response curves overlap – would need “negative amounts” of some primary to match all visible color samples; not physically possible, but can be simulated by adding that color to sample to be matched. – to simplify, CIE primaries X, Y, and Z used to get all positive color matching functions • Let’s see in another way why 3 (indeed n) physical primaries aren’t sufficient to match an arbitrary color by looking at response function

Andries van Dam October 20, 2005 Introduction to Computer Graphics 58/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Chromatic Opponent Channels on Chromaticity Diagram

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

Why would red-green and blue-yellow be useful axes to specify color with?

Andries van Dam October 20, 2005 Introduction to Computer Graphics 59/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Color Models for Raster Graphics (1/2) • Purpose: specify colors in some gamut

• Gamut is a subset of all visible chromaticities so model does not contain all visible colors

• 3D color coordinate system subset containing all colors within a gamut

• Means to convert to other model(s)

• Example color model: RGB

– 3D Cartesian coordinate system

– unit cube subset

– Use CIE XYZ space to convert to and from all other models

Andries van Dam October 20, 2005 Introduction to Computer Graphics 60/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Color Models for Raster Graphics (2/2)

• Hardware-oriented models: not intuitive – do not relate to concepts

of hue, saturation, brightness Green Yellow – RGB, used with color CRT

monitors Cyan Black Red – YIQ, broadcast TV color system – CMY (cyan, magenta, yellow) Blue Magenta color printing – CMYK (cyan, magenta, yellow, black) color printing – IRODORI, six-primary-color projection system

• User-oriented models – HSV (hue, saturation, value) – also called HSB (B for brightness) – HLS (hue, lightness, saturation) – The Munsell system –CIE Lab

Andries van Dam October 20, 2005 Introduction to Computer Graphics 61/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The RGB Color Model (1/3) • RGB primaries are additive:

The RGB cube (Grays on dotted main diagonal)

• Main diagonal => gray levels – black is (0, 0, 0) – white is (1, 1, 1) • RGB color gamut defined by display device chromaticities – differs form one display device to another

Andries van Dam October 20, 2005 Introduction to Computer Graphics 62/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The RGB Color Model (2/3) • Conversion from one RGB gamut to another – convert one to XYZ, then convert from XYZ to another – check out http://www.color3d.com/examples.htm for good examples • Form of each transformation: ⎡X ⎤ ⎡X X X ⎤ ⎡R⎤ ⎢ r g b ⎥ ⎢ ⎥ = ⎢ ⎥ ⎢Y ⎥ ⎢ Yr Yg Yb ⎥ ⎢G⎥ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎣Z ⎦ ⎣Zr Z g Zb ⎦ ⎣B⎦ • Where Xr, Xg, and Xb are weights applied to monitor’s RGB colors to find X, etc. • M is 3 x 3 matrix of color-matching coefficients ⎡X ⎤ ⎡R⎤ ⎢ ⎥ ⎢ ⎥ ⎢Y ⎥ = M ⎢G⎥ ⎣⎢Z ⎦⎥ ⎣⎢B⎦⎥ •Let M1 and M2 be matrices to convert from two monitor’s gamuts to CIE -1 •M2 M1 converts from RGB of monitor 1 to RGB of monitor 2

Andries van Dam October 20, 2005 Introduction to Computer Graphics 63/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The RGB Color Model (3/3) •But what if…

–C1 in gamut of monitor 1 but not in gamut of -1 monitor 2, i.e., C2 = M2 M1C1 outside unit cube and hence 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 64/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The CMY(K) Color Model (1/2) • 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): ⎡ C ⎤ ⎡1⎤ ⎡R⎤ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢M ⎥ = ⎢1⎥ − ⎢G⎥ ⎣⎢ Y ⎦⎥ ⎣⎢1⎦⎥ ⎣⎢B⎦⎥

Green Yellow (minus blue)

(minus red) Cyan Black Red

Blue Magenta (minus green)

subtractive primaries (cyan, magenta, yellow) and their mixtures

Andries van Dam October 20, 2005 Introduction to Computer Graphics 65/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The CMY(K) Color Model (2/2) • 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 – nonlinearities must be accommodated:

K = min(C, M, Y) C’ = C – K M’ = M – K (one of C’, Y’, M’ will be 0)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 66/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S 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, Q encode chromaticity • Only Y = 0.3R + 0.59G + 0.11B shown on B/W monitors:

⎡Y ⎤ ⎡0.30 0.59 0.11 ⎤ ⎡R⎤ ⎢ ⎥ ⎢ ⎥ ⎢ ⎥ ⎢ I ⎥ = ⎢0.60 − 0.28 − 0.32⎥ ⎢G⎥ ⎣⎢Q⎦⎥ ⎣⎢0.21 − 0.52 0.31 ⎦⎥ ⎣⎢B⎦⎥ – Weights: relative brightness of each primary – assumes white point is illuminant C:

xw = 0.31, yw = 0.316, and Yw = 100.0 • 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 U luminance) 1.5 MHz I (small images need 1 color dimension) 0.6 MHz Q

Andries van Dam October 20, 2005 Introduction to Computer Graphics 67/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

The HSV Color Model (1/2) • Hue, saturation, value (brightness) • 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)

• 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 Q decreasing S at constant V – shades: adding black pigment Q decreasing V at constant S – tones: decreasing S and V

Andries van Dam October 20, 2005 Introduction to Computer Graphics 68/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

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 color cube viewed along the principal diagonal

• RGB subcubes are plane of constant V • Code for RGB Q HSV on page 592, 593 • Note: linear path RGB < ≠> linear path in HSV!

Andries van Dam October 20, 2005 Introduction to Computer Graphics 69/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S The HLS color Model • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 70/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Problems with Standard Color Systems • They are perceptually non-uniform

– move through color space from color C1 to a new color C1΄ through a distance ∆C C1΄ = C1 + ∆C – move through the same distance ∆C, starting from a

different color C2 C2΄ = C2 + ∆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 • Historically, the first perceptually-uniform color space was the Munsell system

Andries van Dam October 20, 2005 Introduction to Computer Graphics 71/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S The Munsell System (1/2)

• Created from perceptual data, not as 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 • Basis for Graphics Group research during 1999-2001 into new color pickers (was led by ams and funded by Adobe)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 72/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S The Munsell System (2/2)

• Hues 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 73/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S CIE Lab

• 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 = (Xn, Yn, Zn)

* 1/3 L =116(Y /Yn ) −16, when Y /Yn > 0.008856 * L = 903.292(Y /Yn ) when Y /Yn ≤ 0.008856 ∗ a = 500( f (X / X n ) − f (Z / Zn )) * b = 200( f (X / X n ) − f (Z / Zn ))

1/3 where f (t) = t when Y /Yn > 0.008856 else f (t) = 7.787t +16/116 • These transformations cause regions of colors perceived as identical to be of the same size

Andries van Dam October 20, 2005 Introduction to Computer Graphics 74/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Color Model Pros and Cons (1/2) •RGB + Cartesian coordinate system + linear + 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 •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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 75/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Color Model Pros and Cons (2/2) • (CIE cont.) Example: Photoshop Lab color model is based on CIE Lab space + 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 * picks colors which are out of the print gamut - primarily used as an internal space to convert between RGB and CMYK

•HSV + easy to convert to RGB + easy to specify colors - nonlinear - doesn’t cover gamut of perceivable colors - nonuniform

Andries van Dam October 20, 2005 Introduction to Computer Graphics 76/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Interactive Specification of Color (1/2) • English-language names – ambiguous and subjective • Numeric coordinates in color space with slide dials:

Left: Lab color picker from Adobe Photoshop for Windows Below: RGB color picker from Adobe Photoshop for Mac OS

Andries van Dam October 20, 2005 Introduction to Computer Graphics 77/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Interactive Specification of Color (2/2) • Interact with visual representation of the color space

HSB color picker from Adobe Photoshop

• Important for user to see actual display with new color

HSV color picker from Mac OS X’s Finder

• Beware of surround effect!

Andries van Dam October 20, 2005 Introduction to Computer Graphics 78/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Interpolating in Color Space (1/2) • 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:

red = (1, 0, 0), green = (0, 1, 0) midpoint = (0.5, 0.5, 0)

– interpolating in HSV:

red = (0º, 1, 1); green = (120º, 1, 1) midpoint = (60º, 1, 1)

RGB_to_HSV = (60º, 1, 0.5)

midpoint values in RGB differ by 0.5 from same interpolation in HSV: (60º, 1, 0.5) ≠ (60º, 1, 1)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 79/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S

Interpolating in Color Space (2/2) • 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!

Andries van Dam October 20, 2005 Introduction to Computer Graphics 80/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using Color in Computer Graphics

• Aesthetic uses: – establish a tone or mood (e.g. Doom) – promote realism • Highlight • 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)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 81/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using Color in Computer Graphics: Functionality

• Careless use of color is perilous – in experiments, poor color choices reduced user performance by one-third – Check out some of the colors in this “Worst Website”: • http://www.angelfire.com/super/badwebs/main.htm • Decorative use of color subservient to functional use: – test with real users – provide “best judgment” defaults – allow user to override defaults – design first for a monochrome display (color use is redundant in monochrome displays and for color-blind users)

Andries van Dam October 20, 2005 Introduction to Computer Graphics 82/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using Color in Computer Graphics Approach

• Color harmony: – select colors according to some method, typically by traversing a smooth path in a color model – restrict colors to planes or hexcones in a color space – space colors at equal perceptual distances – light-dark contrast more important than hue contrast • Specifics: – if a chart contains just a few colors, the complement of one of the colors should be used as the background – use neutral (gray) background for an image with many colors – separate non-harmonious colors by thin black border • Coding: – be redundant (“dual coding”) – show reference scale – color can carry unintended meanings: • bright, saturated colors stand out (may give unintended emphasis) • display elements of same color may incorrectly be associated by user

Andries van Dam October 20, 2005 Introduction to Computer Graphics 83/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using Color in Computer Graphics: Physiological Rules (1/2)

• Eye is more sensitive to spatial variation – fine detail should vary from the background not just in chromaticity, but in brightness • Blue and black, yellow and white are particularly bad combinations – don’t use blue for text • For color-blind users, avoid reds and greens with low saturation and luminance • Color of small objects less than 20-40 minutes of arc is not distinguishable

This is hard to read.

So is this.

And this, too! Yikes!

Andries van Dam October 20, 2005 Introduction to Computer Graphics 84/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Using Color in Computer Graphics: Physiological Rules (2/2)

• Difficult to perceive color when used with small objects => don’t use color coding for them • Perceived color of object is affected by color of surrounding area • Strongly saturated colors produce after images • Color affects perceived size – red seen as larger than green – colors refract differently through our lens: appear at different depths, e.g., red (closer) vs. blue (farther) strongest effect • Apply color conservatively, not gratuitously – “color- itis” as bad as “font-itis”

Andries van Dam October 20, 2005 Introduction to Computer Graphics 85/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S Take Away Ideas • To describe the character of light (ignoring phase) requires an infinity of amplitude – wavelength data – light spectra lie in an infinite-dimensional space • Human perception, below certain intensity levels, is not at all linear • At reasonable levels light perception is log-linear; displays also not linear, influences color-table design • “Less is More” in judicious use of color – use some simple guidelines based on aesthetics and psychophysics

• If you are interested in learning more about color, check out Anne Morgan Spalter’s book, The Computer in the Visual Arts, available on Amazon.com

Andries van Dam October 20, 2005 Introduction to Computer Graphics 86/88 I N T R O D U C T I O N T O C O M P U T E R G R A P H I C S For More Information 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 Frequently Asked Questions – http://www.poynton.com/notes/colour_and_gamma/Col orFAQ.html • Comprehensive List of Color Models – http://www.colorsystem.com/ • 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

Andries van Dam October 20, 2005 Introduction to Computer Graphics 87/88