P03_10Color.pdf Official Site of Prof. Dr. I Wayan Simri WICAKSANA, S.Si, M.Eng Gunadarma University P03 10Color
Color in Nature
Warning: e.g., poisonous berries
Attraction: e.g., mating plumage
State shift: e.g., changing seasons
Color and Culture
Symbolic Coding: e.g., the “red, white and blue”
Signalling: e.g., traffic signals
Materials analysis: e.g., spectrometer readings
Fashion
Racial identity: (this is from Brown’s web site)
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… • Industry (e.g., color management
software for computers at place like Adobe)
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
signal processing issues that are important in rendering and image processing
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
• 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
transmits only pure red also appears black
Achromatic and Colored Light
• Achromatic light
• Chromatic light
• Color models for raster graphics
• Reproducing color
• Using color in computer graphics
Achromatic Light
• 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
Example of an HSV color picker
– 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 continuous-tone images without contouring
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: PCs have a gamma of roughly 2.5,
while Macs have a gamma of 1.8, so Mac images appear dark on PC’s
PC user gives Mac user
PC user
image back; it’s generates
changes
now too bright image
image to make it 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
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 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
0.50 and 0.55
Gamma Correction -
Implementation
• To achieve equal steps in brightness, space logarithmically rather than linearly, so that
• Use the following relations:
0 = I 0 , I 1 = rI 0 , I 2 = rI 1 = r I 0 , I 3 = rI 2 = r I 0 , ,
I 255
255 = r I 0 = 1
• Therefore:
r = (1 / I (255-j)/255
j/255
0 ) , I j =r I 0 = (1 / I 0 ) I 0 =I 0
≤ j ≤ 255
for 0 (13.2
) • In general for n+1 intensities:
= ( 1 / I 0 ) , I j = I 0 for 0 ≤ j ≤ n
r (13.3)
• Thus for
n=3 (4 intensities) and I 0 =1/8, r=2,
intensity values of 1/8, 1/4, 1/2, and 1
Displaying Intensities (1/2)
• Dynamic range: ratio of maximum to minimum
intensities, i.e., 1/I 0
• Typical on CRT anywhere from 40:1 to 200:1 => I 0 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
I=kN γ (13.4) 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
• Therefore, for some other constant k:
I = KV , or V = (I / K)
Displaying Intensities (2/2)
• To display intensity I, find nearest I j from a table or:
j = ROUND(log r ( I/I 0 ))
• Then j I
• And V j = ROUND(( I j / K) )
– if no look-up table, load V j in pixel – if look-up table, load j in pixel, V j in
entry j
• 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 indistinguishable:
or 1.01 = (1/I 0 ) – solve for n:
r = (1 / I 1/n
1/n
n = log 1.01 (1 / I 0 ); 1 / I 0 is dynamic range
Adjusting an Intensity Curve
• What happens if you keep adjusting your image? • Like changing original music score instead of
aspects of the performance • And not just monitor gamma… monitor quality,
bit-depth, LCD viewing angles, etc.
Display Media
No. of Intensities, n CRT
Display Media
Dynamic Range
400-530 Photographic prints
50-200
465 Photographic slides
700 Coated paper printed in B/W
465 Coated paper printed in color
50 400 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)
Inside the CRT
Cool pictures: http://www.pctechguide.com/06crtmon.htm Block diagram : http://www.tpub.com/neets/book18/
Inside the LCD
Polarizer Color Filter
Color Filter Glass
Liquid Crystal
Voltage TFT Glass
Polarizer
Backlight
• 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
Picture from http://www.teac.com.au/pages/howdoesanlcdwork
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 complaining that the image looks washed out. Why might this be?
Chromatic Light
• 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
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.
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 on same portion of the screen, reflected upon same retinal region. Image is gray, not green (as in subtractive mixture).
Color Applets
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/
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.
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
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 patch on yellow looks bluish. This is color contrast: hues tend to induce their complementary colors in neighboring areas.
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)
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
• Ostwald system is similar
White
Tints “Pure” color Tones Decrease
Grays lightness Shades
Black
• Later, we’ll look at computer-based models
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
Response to Stimuli (1/3)
• 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 (2/3)
Response
Curve
Incoming Light
Distribution
Product of functions
• 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/reposit
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
Metamers (1/4)
Different light distributions that produce the same response • 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
one color sensation (albeit with varying brightness)
Metamers (2/4)
• Consider a creature with two receptors (R1, R2)
I1 I1 I2
• 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
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/repos
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
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
Colorimetry Terms
• Can characterize visual effect of any spectral distribution by triple (dominant wavelength, excitation purity, luminance):
e 2 Dominant
Idealized uniform distribution except
for e 2
400 wavelength, nm 700
• Dominant wavelength → hue we see; spike of energy
• Excitation purity = ratio of monochromatic light of
dominant wavelength, white light to produce color
e 1 =e 2 , excitation purity is 0% (unsaturated)
e 1 = 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 1 and e 2
• Note: – dominant wavelength of real distribution may not
be one with largest amplitude! – some colors (purple) have no dominant
wavelength
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 )
Receptors in Retina
• 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
1 Thomas 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.
Tristimulus Theory
Spectral-response Luminous Efficiency Function
≈ ∑f λ (peak sensitivity at of the three types of
functions of f λ each
yellow-green (550nm)) cones on the human
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/
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
-+++-++++
Each channel is a weighted sum of receptor outputs –
Hue: Blue + Red = Violet
linear mapping
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)
Mach Bands and Lateral Inhibition
Nature provides for contrast enhancement at boundaries between regions: edge detection. This is caused by lateral inhibition.
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 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,
excite
•At boundary more excited cells inhibit their less excited neighbors even more and vice versa. Thus, at boundary dark
inhibit
areas even darker than interior dark ones, light areas are lighter than interior light ones.
•Nature’s edge detection
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
b r λ
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 => cannot match, must “subtract,” r λ
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!
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)
• People sit in a dark room matching colors
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”.
http://www.maelabs.ucsd.edu/mae152/handouts/12
Make Nice Curves
• Fit curves to three functions that describe the matching– f(r), f(g), and f(b)
GR
• Transform f(r,g,b) functions above to
represent three new primaries (not actually visible light colors) X, Y, and Z.
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
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
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.
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
– 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?
CIE Chromaticity Diagram (1/4)
• 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 = 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 + y + z = 1; (x,y,z) lies on X + Y +
Z = 1 plane Y
y = (x, y) determines z but cannot
X + Y + Z recover X, Y, Z from only x and y.
z = Need one more piece of data, Y,
X + Y + Z which carries luminance data
( x , y , Y ), X = Y , Y = Y , Z =
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
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
CIE Chromaticity Diagram (4/4)
• 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 INTERNATIONAL PROGRAMME EXCHANGE
Using the Chromaticity Diagram
• 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
Color Mixing/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.
• Also, no finite number of primaries can include all visible colors
• DEMO: http://www.cs.rit.edu/~ncs/color/a_chroma.html
Color Mixing/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
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 primaries (used in Adobe’s CIELab)
Color Review
• 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.
– You will also get a tan while working : ) • What is wrong with this theory?
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
By Mark D. Fairchild
Color Models for Raster Graphics
• 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…
The RGB Color Model (1/3)
• 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
The RGB Color Model (2/3)
• 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
X R Y =M G
• Let M 1 and M 2 be matrices to convert from each of the two monitor’s gamuts to CIE • -1 M
2 M 1 converts from RGB of monitor 1 to RGB of monitor 2
The RGB Color Model (3/3)
• But what if – C 1 is in the gamut of monitor 1 but is not in the
gamut of monitor 2, i.e., C
2 =M 2 M 1 C 1 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
The CMY(K) Color Model (1/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):
Green
Yellow
(minus blue)
(minus red)
Magenta (minus green)
subtractive primaries (cyan, magenta, yellow) and their mixtures
The CMY(K) Color Model (2/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
K = min(C, M, Y)
M’ Y’
C’ = C – K M’ = M – K
Y’ = Y – K (one of C’, Y’, M’ will be 0)
The YIQ Color Model
• 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:
[ Q ] [ 0 .21 −0.52 0. 31 ][ B ]
0 .11 R
I = 0. 60 −0.28 −0 .32 G
– 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 • NTSC encoding of YIQ :
4 MHz Y (eye most sensitive to luminance)
1.5 MHz I (small images need only 1 color dimension)
0.6 MHz Q
The HSV Color Model (1/2)
• 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
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. 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 (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 HSV on page 592, 593 • Note: linear path RGB linear path in HSV! ¿ ≠ ¿
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
Perceptual Uniformity (or lack thereof)
• RGB, HSV, HSL all perceptually non-uniform
– move through color space from color C 1 to a new
color C 1 ΄ through a distance ΔC C 1 ΄=C 1 + ΔC
– move through the same distance ΔC, starting
from a different color C 2 C 2 ΄=C 2 + Δ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 (early 1900s)
The Munsell System (1/2)
• 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
Lightness
Hue/Chroma
Saturation
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 = (X n ,Y n ,Z n )
L 1 /3 =116Y /Y n −16 , when Y /Y n 0.008856 L ¿ =903.292Y /Y when Y /Y ≤0.008856
a ¿ =500 f X / X − f Z /Z
b ¿ =200 f X / X − f Z / Z
where f t =t 1 /3 when Y /Y n 0. 008856 else f t =7 .787t16 /116
• 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
• Like surround effect:
Accounting for Context
If you really like this space…
• “What’s Your Surround?” T- Shirt
http://www.cafepress.com/colour.8329841
Color Model Pros and Cons (1/2)
• 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
Color Model Pros and Cons (2/2)
• 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 color space slice—constant value (L)
HSB color space Lab slides
slice—constant value (B)
Interactive Specification of Color, 1/3
Sliders
• English-language names are
Adobe Photoshop
ambiguous and subjective
• Most programs use numeric coordinates in
RGB color picker
color space with from Adobe
Photoshop for
slide dials:
Mac OS
Interactive Specification of Color, 2/3
Geometric Views
• 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
Adobe Photoshop
Interactive Specification of Color, 3/3
Geometric Views, cont.
Corel Painter
3D Color Pickers
• 3D spaces applet
http://www.cs.rit.edu/~ncs/color/a_spaces.html
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
• A color wheel-based palette creator, based on a perceptual color space: http://www.colorschemer.com/
Interactive Palette Tools
Color Grouper
Gradient Mixer
Dial-a-Color
Palette Browser
Barb Meir, Anne Spalter, David Karelitz, CG&A Vol24, No 3, 2004
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)
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!
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
• Color management system uses
these to profiles to create optimal color mapping between available spaces
In and Out of CIE Space
See ICC Web site at
www.color.org
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.
– Effective results for different purposes still a research area
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 unpublished web text)
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
• Expert palettes
Color palette books…
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
• Blue-family colors tend to recede while warmer red-family colors come forward
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)
http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/SchHTMLs/CBColorSeq.html
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
– Use rainbow/spectral scale for ordinal coding: we have no sense of whether green is more or less than red…
Too Much Diversity?
http://www.pluralist.co.uk/
Saturation—Not Best Choice for a Background…
Was http://www.baem.org.uk
(not working)
Also http:// www.angelfire.com/or/cy
No Comment Needed
• http:// www.dokimos.org/ajff/
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
F to 110-degrees F. Your client want to know what the warmest place, on average, is in RI. How would you categorize this type of data and what type of colors would work well to visualize it?
Take Away Ideas
• 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 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 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