Color II:applications in photographyMarc LevoyComputer Science DepartmentStanford UniversityCS 178, Spring 2011Begun 5/12/11, finished 5/17.! Marc LevoyOutline!spectral power distributions!color response in animals and humans!3D colorspace of the human visual system•and color filter arrays in cameras!reproducing colors using three primaries!additive versus subtractive color mixing!cylindrical color systems used by artists (and Photoshop)!chromaticity diagrams•color temperature and white balancing•standardized color spaces and gamut mapping2☞! Marc LevoyThe RGB cube!choose three primaries R,G,B, pure wavelengths or not!adjust R=1,G=1,B=1 to obtain a desired reference white!this yields an RGB cube!programmers like RGB as a way of selecting colors•but artists don’t3(Flash demo)http://graphics.stanford.edu/courses/cs178/applets/locus.html! Marc LevoyNewton’s color circle!previous authors could not move beyond linear scales, because they felt compelled to include black and white as endpoints!Newton closed the circle by removing black and white, then added extra-spectral purples not found in the rainbow•by mixing red at one end with violet at the other end4Peter Paul Rubens andFrançois d'Aguilon (1613)Isaac Newton (1708)(http://www.handprint.com/HP/WCL/color6.html)! Marc LevoyCylindrical color spaces(contents of whiteboard)!given one circular scale and two linear scales, i.e. one angle and two lengths, the logical coordinate system is a cylindrical one!selection of colors within such a system is easily done using 1D scales for H, S, and L, or 2D surfaces of constant H, S, or L5! Marc LevoyCylindrical color spaces!a cylinder is easy to understand, but colors near the top and bottom are indistinguishable•double cone solves this by compressing top & bottom to a point!when artists mix “complementary” lights, they expect to get white, but halfway from red to cyan in HSL space is gray•HSV single cone pushes the white point down onto the max-S plane•painters might prefer an inverted cone, with black on this plane6HSL cylinder(wikipedia)HSL double coneHSV single cone! Marc LevoyMunsell color system!spacing of colors is perceptually uniform (by experiment)!outer envelope of solid determined by available inks7Albert Munsell(1858-1918)3-axis colorspace1905 bookCG rendering of1929 measurements(wikipedia)! Marc LevoyA menagerie of color selectors8! Marc LevoyPhotoshop’s color selector in HSL space(contents of whiteboard)!the main rectangle in Photoshop’s color selector is a 2D surface of constant hue in cylindrical color space, hence varying saturation and lightness!the vertical rainbow to its right (in the dialog box) is a circumference along the outside surface of the cylinder, hence a 1D scale of varying hue and constant lightness and saturation9! Marc LevoyColor selection in Photoshop10brightnesssaturationhue! Marc LevoyColor selection in Photoshop11Cartesian to cylindrical coordinate conversionHSV ! Photoshop’s HSB! Marc LevoyColor selection in Photoshop123 x 3 matrix conversion! Marc LevoyColor selection in Photoshop13we’ll cover this later in the lecture! Marc LevoyRecap!hue is well represented by a color circle, formed from the rainbow plus mixtures of the two ends to form purples!saturation is well represented by a linear scale, from neutral (black, gray, or white) to fully saturated (single wavelength)!lightness is well represented by a linear scale, either open-ended if representing the brightness of luminous objects or closed-ended if representing the whiteness of reflective objects!given one circular scale and two linear scales, the logical coordinate system is cylindrical where (H, S, L) = (", r, y)!selection of colors within such a system is easily done using 1D scales for each of H, S, and L, or that in combination with 2D surfaces of constant H, S, or L14Questions?! Marc LevoyOutline!spectral power distributions!color response in animals and humans!3D colorspace of the human visual system•and color filter arrays in cameras!reproducing colors using three primaries!additive versus subtractive color mixing!cylindrical color systems used by artists (and Photoshop)!chromaticity diagrams•color temperature and white balancing•standardized color spaces and gamut mapping15☞! Marc LevoyChromaticity diagrams!choose three primaries R,G,B, pure wavelengths or not!adjust R=1,G=1,B=1 to obtain a desired reference white!this yields an RGB cube!one may factor the brightness out of anypoint in the cube by drawing a line to theorigin and intersecting this line with thetriangle made by corners Red, Green, Blue!all points on this triangle, which areaddressable by two coordinates, have thesame brightness but differing chromaticity16r =RR + G + Bg =GR + G + Bwhiteblackblueredgreen! Marc LevoyChromaticity diagrams!choose three primaries R,G,B, pure wavelengths or not!adjust R=1,G=1,B=1 to obtain a desired reference white!this yields an RGB cube!one may factor the brightness out of anypoint in the cube by drawing a line to theorigin and intersecting this line with thetriangle made by corners Red, Green, Blue!all points on this triangle, which areaddressable by two coordinates, have thesame brightness but differing chromaticity17rg(Flash demo)http://graphics.stanford.edu/courses/cs178/applets/threedgamut.htmlr =RR + G + Bg =GR + G + B! Marc LevoyChromaticity diagrams!this triangle is called the rgb chromaticity diagram for the chosen RGB primaries•mixtures of colors lie along straight lines•neutral (black to white) lies at (⅓, ⅓)•r>0, g>0 does not enclose spectral locus!the same construction can be performed using any set of 3 vectors as primaries, even impossible ones (! < 0 or " < 0 or # < 0) !the CIE has defined a set of primaries XYZ, and the associated xyz chromaticity diagram•x>0, y>0 does enclose spectral locus•one can connect red and green on the locus with a line of extra-spectral purples•x,y is a standardized way to denote colors18rgrgbchromaticitydiagram(Hunt)CIE xyzchromaticitydiagramxy! Marc LevoyApplication of chromaticity diagrams #1:color temperature and white balancing!the apparent colors emitted by a black-body radiator heated to different temperatures fall on a curve in the chromaticity diagram!for non-blackbody sources, the nearest point on the curve is called the correlated color temperature19correlated color temperatures 3200°K incandescent light 4000°K cool white fluorescent 5000°K equal energy white (D50, E)