Unit 19

advertisement
nineteen
color
Many thanks to Steve Eaton of the MIT Media Lab
for inspiration and examples
Today

Seven traditional
color contrasts







Hue
Light/dark
Warm/cold
Complements
Simultaneous contrast
Saturation
Extension




Color perception
(review)
Color spaces
Color schemes
Color design
Spectrum vs color

Real photons come in continuous range of
wavelengths



Trichromacy


Real light hitting your eye has a continuous range of
wavelengths
Each with a different intensity
Your eye reduces all this information to just three
dimensions of color
Metamerism

Florescent lights produce strange colors
Trichromacy

Having different cones for every
possible wavelength would be bad

We just have three kinds of cones





“Blue” cones: short wavelengths
“Green” cones: intermediate
wavelengths
“Red” cones: long wavelengths
However, their responses overlap
The eye reduces all the
wavelengths at a given pixel to
just the total “amount” of “red”,
“green”, and “blue”
Components of a color image
Evolution of the color system
S
to cortex
Evolution of the color system
S
L
intensity
+
−
chroma (B-Y)
to cortex
cool/warm
Intensity and chromaticity
Color image
Intensity (R+G+B)
Chromaticity (B-Y)
white = cool
black = warm
grey = neurtral
Evolution of the color system
S
I
L
intensity
+
−
−
chroma (B-Y)
chroma (R-G)
to cortex
cool/warm
Intensity and chromaticity
Color image
Intensity
Chromaticity (B-Y)
Chromaticity (R-G)
white = cool
black = warn
grey = neutral
white = red
black = green
grey = balanced
Code
[define gray
[i → [color i i i]]]
[define signed-gray
[i → [gray [+ 128
[∕ i 2]]]]]
[define b-y
[c → [− [blue c]
[∕ [+ [red c] [green c]]
2]]]]
[map-bitmap [c → [signed-gray [b-y c]]]
cones]
Code
[define r-g
[c → [− [red c] [green c]]]]
[map-bitmap [c → [signed-gray [r-g c]]]
cones]
Color spaces

Colors can be arranged
in different ways based
on similarity







Amount of red
Amount of green
Amount of blue
Warmth
Saturation
Value (intensity, brightness)
Brilliance


These can be thought of
as different dimensions
or parameters of color
Three dimensions
suffices to arrange all
colors


But different dimensions
can be chosen
The result of choosing a
set of dimensions is a color
space
The LMS color space

This is the “real” color space used by your eye




Long-wavelength cone response
Medium wavelength cone response
Short wavelength cone response
Not generally used outside of neuroscience,
however, because it’s hard to measure
The RGB color space


The additive color space
This is the color space
we’re used to thinking
about in computers




Amount of “red” light
Amount of “green” light
Amount of “blue” light
The problem is that “red”
varies from output device
to output device

Color calibration
Balancing primaries


Our ideas of “typical”
reds, greens, and blues
don’t actually balance out
to white
In the WWW standards
and on Windows



“red” = (255, 0, 0)
“green” = (0, 255, 0)
“blue” = (0, 0, 255)
255
128
255
255 255 255
Complementary colors

Colors that sum to an achromatic color (white
or neutral gray)



Red and cyan
Green and magenta
Blue and yellow

Make strong contrasts with one another

Achromatic colors are their own complements
The CMY color space

The subtractive primaries


Each primary is the
complement of an additive
primary




Fundamental primary colors
for pigments
Cyan (anti-red)
Magenta (anti-green)
Yellow (anti-blue)
CMYK is used in the printing
industry

K (black ink) added for better
reproduction of gray tones
Traditional subtractive primaries

In traditional painting, the subtractive
primaries



The complements are




Are not cyan, magenta, and yellow
They’re red, blue, and yellow
Red/green
Blue/orange
Yellow/violet
Blue and yellow paint make green!


Due to the fact that pigments operate
on continuous wavelengths
Difference between


Combining pigments by mixing
Halftoning/pointilism
The color wheel

Many versions, from
Newton to Itten

Itten’s version



Start with 3 primaries
Mix adjacent primaries
to make secondary
colors
Recurse to make
tertiary colors, etc.
Using complementary colors

Can be placed together to create striking
contrasts

Caveats


Complements in what color space?
Complementary colors also contrast in other
dimensions


Yellow is much lighter than violet
Red-orange is much warmer than blue-green
Contrast of complements
Van Gogh, Night Cafe
Contrast
of complements
Van Gogh, Bottle and Lemons
Contrast of complements
Jan van Eyck
Madonna and the
Chancellor Rolin
Evolution of the color system
S
I
L
intensity
+
−
−
chroma (B-Y)
chroma (R-G)
to cortex
cool/warm
The opponent color space

Hering: Color can be “blue-green”, “yellow-red”, but not “yellowblue”, or “green-red”

Opponent-process model




Used in visual cortex


R-G channel
B-Y channel
Intensity channel (R+G+B)
Computed in retinal ganglion
Used in image compression, NTSC video


Linear transform
Color more compressed
R-G contrast



Effective contrast
Red and green hues
have similar brilliance
(at least according to
some)
Arguably explains
perception of green
as complement of red
Van Gogh, Night Café
B-Y contrast


S cone response similar
to rods
Used to depict night



Why not just paint black?
Because you can’t see
any details
Arguably explains
warm/cool distinction
Van Gogh, Café at Night
Contrast of warm and cold

Warm and cold colors can also be
juxtaposed to create powerful contrasts

Most effective when


Colors are of medium brilliance
Equivalent brightness/value (otherwise it’s
perceived as a brightness contrast)
Warm-cold modulation
Contrast of warm and cold
Brekendrige,
Philadelphia
Contrast of warm and cold
Monet, Parliament
Contrast of warm and cold
Van Gogh,
14 Sunflowers in a Vase
Contrast of warm and cold
Monet,
Sunrise
Simultaneous contrast
Bars “pull” squares toward their
opponent colors
Simultaneous contrast
YUV space

Roughly,




However, it’s tweaked in funny
ways to make it more efficient
for transmission


Y = R+G+B (intensity)
U=R-Y
V=G-Y
Y=.3R+.59G+.11B
Used in NTSC, jpeg,
“component video”, DVD,
mpeg
Cylindrical color spaces

Basic idea: any color can be formed by:

Taking a “pure” color (color with no grey in it)


“Diluting” it with grey


Adds in the third primary
Adjusting its overall intensity


Primary or mixture of two primaries
Multiplying it in RGB space
Axes



Height: Intensity
Radius: amount of white
Angle: hue
Cylindrical color spaces

Hue



Saturation


The pure color from which you started
The “color” of the color
The ratio of pure color to grey
Value (aka lightness, intensity, …)

Total amount of light (R+G+B)
The HSV color space
HSI space

True polar color space
Converting RGB to HSV
[define rgb→hsv
[c → [with white = [min c.R c.G c.B]
value = [max c.R c.G c.B] «deeply bogus»
[with delta = [− value white]
[if [= delta 0]
«achromatic (gray) case»
[list 0 0 value]
«chromatic case»
[with saturation = [if [= delta 0]
0
[ ∕ delta value]]
[list [hue c delta value]
saturation
value]]]]]]
Converting RGB to HSV
(what a sick kluge)
[define hue
[c delta value →
[if [= value c.R]
[× 60
«red is the strongest color»
[ ∕ [- c.G c.B]
«so hue “angle” is green/blue difference»
delta]]
[if [= value c.G]
[+ 120
[× 60
«green is the strongest color»
[ ∕ [- c.B c.R]
«so blue-red difference»
delta]]
[+ 240
«blue is the strongest color»
[× 60
«so red-green difference»
[ ∕ [- c.R c.G]
delta]]]]]]
Contrast of hue

Juxtaposition of colors of different hue

Degree of contrast is degree of hue difference



“Angle” between colors
Saturated primaries most intense
Secondary colors are less intense
Contrast of hue
Grunewald, Resurrection
Contrast of hue
Piet Mondrian, Composition A
Contrast of saturation
Bouguereau, A Soul Brought to Heaven
Contrast
of saturation
Hendrick Terbrugghen
The Calling of St Matthew
Modulation of saturation by value
Contrast of value

Chiaroscuro


Lightness of background affects apparent
saturation of a color



See previous lecture
White background mutes
Black background intensifies
Different colors have different apparent
brightnesses
Brilliance

Even pure hues have different apparent “brightness”




Aristotle



Red “looks” brighter than blue
Brilliant hues draw attention
Colors can be ordered by apparent brilliance
(white), yellow, red, blue, (black)
Green is hard to place
Goethe

(white), yellow, orange, red, green, blue, violet, (black)
Contrast
of lightness
Rembrandt,
Man in Golden Helmet
Contrast of lightness
Carvaggio, Incredulity of St. Thomas
Contrast
of lightness
Carvaggio,
Crucifixion of St. Peter
Contrast
of lightness
Carvaggio,
Conversion of St. Paul
Contrast of lightness
J.M.W. Turner, Fishermen at Sea
Contrast of lightness
Francisco de Zubaran
Lemons, Oranges and Rose
Contrast of extension
Goethe’s scale
Yellow
Orange
Red
Violet
Blue
Green


7
8
6
3
4
6
Colors also vary in the amount of area devoted to them
Goethe’s rule of proportion

Area inversely proportional to perceived brilliance
Contrast of extension
van Brekelenkam,
Woman Combing a Child’s Hair
Contrast of extension
Pieter Bruegel the Elder
Landscape with the Fall of Icarus
Contrast
of extension
Jules Breton, Song of the Lark
Color schemes

Set of colors around
which a composition is
organized

Saturation variation


Value variation


Hue variation






Triads
Complementary colors
Split complements
Analogous colors
Warm colors
Cool colors

Monochromatic
Achromatic
Other

Earth tones




Spring, summer, autumn,
winter
Bright colors
Pastels
…
Triads


Three colors
Usually separated evenly
on the color wheel



So they sum to white/grey
Primary triads have
strongest impact
Complements are less
intense
Other triads



Black/white/red
Flag colors
???
Complementary colors

Remember there are different
definitions of complementarity

Opposite hues




yellow
Same saturation
Same lightness
Colors that sum to gray as
light
Colors that sum to gray as
pigment
dim yellow
orange

Pay attention to differences in
lightness, brilliance, warmth,
etc.
Split complements

One side of the pair is
divided into two
analogous (similar)
hues
Analogous colors


Nearby hues
Similar saturation and
value
Warm series


Analogous colors on
the warm side of the
spectrum
Suggests warmth,
happiness, etc.
Cool series



Analogous colors on
the cool side of the
spectrum
Can suggest peace,
rest, …
Or: night, danger, …
Monochromatic



Single hue
Different saturations
Or different values
Achromatic



No hue
No saturation
Different values
Thematically related colors

Earth tones





Greens
Browns
Violets
Grays
This slide theme is based on earth tones
General advice

Start by choosing value



Fiddle with the colors


Then saturation
And hue
To balance apparent brightness, saturation, etc.
Remember


Moving along one dimension (hue, saturation), also
affect other dimensions (brilliance, value)
Colors look different on different displays
I must have run out of time by now
Download