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