Module 3: Color Theory & Management

Module 3: Color Theory & Management Instructor: Doughlas Remy 1

Topics Covered in This Module • Section 3 • Color Schemes (optional) • Section 4 • Exercises Using the HSB, CMYK, and RGB Sliders in PhotoShop • Section 5 • The CIE Color Model • The Munsell System • Quiz • Section 1 • Factors Determining Color • Characteristics of EM Radiation • Light Sources • Visible Light • The Newton Color Wheel • Quiz • Section 2 • The Ostwald Color Model • The Attributes of Color: Hue, Saturation, and Brightness (HSB) • Color Output Models: CMYK and RGB • How CMYK Inks are Layered in Printing • How CMYK Inks Combine to Form Composite Colors • Exercise: Halftone Screens • Quiz Answer Forms for Printing

Section 1 Section 1 • Factors Determining Color • Characteristics of EM Radiation • Light Sources • Visible Light • The Newton Color Wheel • Quiz

Factors Determining Color (and why they matter...) Section 1 • The physics of light • Visible light represents one tiny band of the entire electromagnetic (EM) spectrum, which also includes radio waves, microwaves, infrared and ultraviolet rays, X-rays, and Gamma rays. (More about this shortly.) • The chemistry of matter. • Solids, liquids, and gases reflect light waves differentially. • Solids and gases may emit light when • heated (e.g., an electric burner coil) • combusted (e.g., a gas explosion, logs in fireplace), or • melted (e.g., volcanic lava). • The physiology of human vision • Our receptors and brains vary slightly in the way they gather andinterpret color. Light is also emitted from electrical discharge (e.g., lightning), bioluminescence (e.g., glowworms), and chemoluminescence (e.g., lightsticks). For other sources, see the Wikipedia List of light sources.

Factors Determining Color (and why they matter...) Section 1 Why color is so “wobbly” (1) In a sunlit room that has two white walls, a cream-colored wall, and one green wall, pick a color from a swatch book and note its exact RGB values so that you can reproduce it later. Let’s say the color is “teal.” Hold the swatch so that it is catching light reflected from one of the white walls. Now turn the swatch so that it catches light reflected from the green wall. Notice the slight shift in color. Turn on the florescent lights in the room. Note the slight shift in the appearance of the color on the swatch. (The RGB values haven’t changed.) Close the blinds in the room and look at the swatch again (reflecting only florescent light).

Factors Determining Color (and why they matter...) Section 1 Why color is so “wobbly” (2) Key the RGB values into your Photoshop color palette and fill a large square with the color. Compare it to the color swatch. Print the square on your office printer. Compare the color to that of the swatch and the monitor display. Using an overhead projector, project the color on a white screen. Compare. Now turn off the florescent lights and view the color again. Compare. Roll up the white screen and allow the projector’s light to shine on the wall, which is cream-colored. Compare the color with that of the swatch. Finally, save your teal square as a PDF file and send it to a professional printer. When the proof comes back for your inspection, compare it to the swatch and to the printed output from your office printer.

Section 1 Characteristics of EM Radiation • Like waves in the ocean, EM waves have a crest and a trough. • The speed of the wave is constant (186,000 miles/sec). • Wavelength (distance between two crests) and amplitude (distance between crest and trough) are variable. Wavelength Crest Amplitude Trough

Section 1 EM Radiation (including visible light)is measured by… • Wavelength (meters) • Amplitude (meters) • Frequency (cycles per second, or Hertz) • Temperature/Energy (electron volts, measured in Kelvins)

Section 1 Wavelength and Amplitude • Wavelength (meters) • Radio waves: 1 cm to 1 km • Microwaves: 100 microns* to 1 cm • Infrared: 1-100 microns • Visible Light: nanometers* • Ultraviolet rays (measured in kelvins only) • X-rays (measured in kelvins only) • Gamma Rays (measured in kelvins only) • Amplitude (meters) • Frequency • Temperature/Energy *Micron: one-millionth of a meter. *Nanometer: one ten-billionth of a meter

Section 1 Frequency Note The wave’s speed is constant (186,000 mi/sec), so the shorter waves have higher frequency, and vice versa. • Wavelength • Amplitude • Frequency (cycles per second, or Hertz)Example: Radio waves: 1kHz to 1MHz • Temperature/Energy 1 sec 4 cycles per sec 2 cycles per sec

Section 1 Temperature / Energy • Wavelength • Amplitude • Frequency • Temperature / Energy (electron volts, measured in Kelvins) Max Planck (German physicist) developed a formula for determining the spectral power distribution of a light source based on its temperature. This is called “Planck’s Law.” Color temperature refers to the heat (or energy) of a light source. As color temperatures vary, so does the makeup of the light in terms of the relative power of its constituent wavelengths.

Section 1 Temperature / Energy • Wavelength • Amplitude • Frequency • Temperature / Energy (electron volts, measured in Kelvins) • Longer wavelengths (e.g., radio waves) are lower frequency and lower energy. • Shorter wavelengths (e.g., gamma rays) are higher frequency and higher energy. Lower energy Higher energy

Section 1 Color Temperature “Hotter” sources emit shorter wavelengths in larger amounts. “Cooler” sources emit longer wavelengths in larger amounts. Note This is somewhat counter-intuitive, since we associate red with hot and blue with cold.

Section 1 Light Sources • Incandescence:Solids and liquids heated to 1000K or greater emit light. (1000K = 541 degrees Fahrenheit) • Tungsten filament light bulb (2854 K) • The Sun (5800 K on surface) • A candle flame • Gas discharge:Gases emit light when an electric current passes through them. Variations in the density of the gas produce variations in color. • Sodium lamps • Mercury lamps • Xenon lamps Mercury vapor lamp

Section 1 Light Sources (continued) • Photoluminescence: Phosphors are substances that absorb and re-emit light. Florescence: Absorption is concurrent with re-emission. Phosphorescence: Re-emission continues after absorption has stopped. Note: A florescent tube is really a Mercury light coated on the inside with phosphor.

Section 1 Visible Light The human eye is only sensitive to EM radiation at wavelengths that range roughly between 780 nanometers and 380 nanometers*. This small segment is called the visible spectrum or visible light. (Note: reptiles and insects) Visible spectrum X-Rays Radio waves Gamma Rays Ultraviolet Infrared *Nanometer: one ten-billionth of a meter

Section 1 More About Visible Light • The human eye can distinguish approximately 10,000 colors. • We call the most prominent ones, in their order, by the acronym ROYGBIV. (red, orange…) • These are the colors as you see them refracted by a prism or in a rainbow. • 1666: Isaac Newton experimented with a prism and concluded that “white” light is not homogeneous but rather a composite of myriad-color wavelengths.

Section 1 The Newton Color Wheel Newton shone white light through a prism to produce a spectrum of red, orange, yellow, green, blue, indigo, and violet beams. Then he joined the two ends of the color spectrum together to show the natural progression of colors in the form of a wheel with 360 degrees.

Section 1 The Newton Color Wheel Newton’s color wheel was the first truly “scientific” color model because it was an empirical model—i.e., based on observation.

Section 1 Newton didn’t do saturation or brightness. The Newton Color Wheel describes only hue, not saturation or brightness. The darker core of this illustration is meaningless. So, what do we mean by “saturation” and “brightness”? (We’ll find out in the next section...)

Section 1 Instructions: More than one answer may be correct. Use the highlighter to mark your options. (Right-click anywhere, click Pointer Options, and then click Highlighter. When you finish, restore the arrow pointer.) Section 1 Quiz

Section 2 Section 2 • The Ostwald Color Model • The Attributes of Color: Hue, Saturation, and Brightness (HSB) • Color Output Models: CMYK and RGB • How CMYK Inks are Layered in Printing • How CMYK Inks Combine to Form Composite Colors • Exercise: Halftone Screens • Quiz

Luminance (Brightness) Section 2 The Ostwald* Color Model—A Useful Tool …characterizes color by • dominant wavelength (hue) • purity (saturation) • luminance (brightness) Dominant Wavelength (Hue) Purity (Saturation) (a measure of how far the color is from the pure hue) *Proposed by the German scientist Ostwald in 1914, this model is useful as a tool for understanding the properties of color.

Section 2 The Ostwald Color Model—A Useful Tool The color in each cell of the model can be expressed as the percentage of white, black and hue required on a spinning disk to produced the same perceived color. white (brightness) black no hue full hue (saturation)

Section 2 The Ostwald Color Model—A Useful Tool However, the illustrative model you’ve just seen does not identify the hue in its coding, so you will not find that model in graphics software. The HSB model, shown to the right (below), identifies the hue by its position on the color wheel (0°-360°), where both 0° and 360° are red. Notice the significance of the numbers. Illustrative model (from previous slide) Ostwald’s HSB model. PhotoShop’s color panel shows HSB values.

Section 2 Adjusting Hue Red (hue) in varying degrees of saturation and brightness Change of Hue

Section 2 Attributes of Color HSB Hue is determined by wave length. Brightness is determined by the amplitude of the wave. Saturation refers to the purity of the hue. Brightness Hue Saturation

+ = Section 2 More About Hue… • The visible spectrum is composed of pure (fully saturated) hues. • The spectral hues may combine to produce… • other pure hues. (E.g., green at 520nm plus red at 66nm equals yellow at 590nm),or • less saturated hues. (Pink is a desaturated red insofar as it is basically white light with a greater preponderance of red wavelengths.)

Section 2 More About Hue… Note that some fully saturated hues, e.g., magenta, are not spectral. They do not occur in the light spectrum, but they may be produced by combining other hues. magenta Note also that some pure hues are perceived to be less saturated than others. E.g., a fully saturated yellow appears to be less saturated than a fully saturated red or violet.

Section 2 More About Saturation and Brightness… • Saturation refers to the purity of the hue. A fully saturated hue is one that contains no white. • Brightness, also known as luminance, is determined by the amplitude of the wave. You may think of the brightness axis as progressing along an achromatic line from white through shades of grey to black. Black is simply the absence of light, whereas white is a complete mix of light.

Section 2 Attributes of Color HSB describes attributes. Any color may be described in terms of its hue, saturation, and brightness, whether that color is produced by inks, by paints, by projected light, or by the bombardment of electrons against the phosphor coating on the screen of a CRT monitor. HSB

Section 2 Color Output Models However, the HSB values don’t tell us how to produce (output) a certain color by using inks, paints, electrons, etc. Notice that the Photoshop HSB color panel only assigns a number (0-360) to a hue without providing any instructions to the printer, to the press, or to the monitor for producing it. HSB

Section 2 Color Output Models So, we need another color model for mixing inks or toners to produce full-color printed output. CMYK HSB And we need yet another color model for mixing wavelengths of light to produce the different hues we see on our monitors. RGB

Section 2 Understanding the three attributes of colorin the printing model: Full-color printing processes use CMYK (cyan, magenta, yellow, and black) inks. CMYK is called a “substractive” color model because it creates white by subtracting (not applying) color. The white is the white of the paper. (No CMYor K inks) How a press desaturates a magenta (M) for full-color (CMYK) printing on white paper: (1) It adds black ink (K). (desaturating toward black) --OR-- (2) It adds equal amounts of cyan (C) and yellow (Y). (desaturating toward black) --OR-- (3) It applies less ink to the paper, thereby allowing more white to show. (desaturating toward white) Hue Brightness (Magenta) Black or CMY combo Saturation

Section 2 Understanding the three attributes of colorin the projection model: A monitor or slide projector works by projecting beams of red, green, and blue light (RGB) in various combinations. RGB is called the “additive” model because it achieves white by adding equal amounts of red, green, and blue. All RGB How a color monitor desaturates a magenta: It adds white light (which is a mix of spectral hues). --OR-- It lowers the amplitude of the magenta wave(s). Hue Brightness (Magenta) No RGB Saturation

Section 2 Newton’s Color Wheel and the Color Output Models Inscribe an equilateral triangle in Newton’s color wheel, with “red” at the top. Which of the two output models does this triad suggest? http://www.color-wheel-pro.com/color-theory-basics.html

Section 2 Newton’s Color Wheel and the Color Output Models Now flip the triangle top to bottom. Which of the two output models does this triad suggest? Note This triangle only shows C, M, and Y, which can be mixed to produce black. However, to get a really “black” black, the printing process must use black ink or toner.

Section 2 More About RGB • The RGB model is considered additive because it achieves white by mixing red, green, and blue light in equal proportions. • These colors are optically mixed by being placed close together or being presented in very rapid succession. • When the wheel on the right spins, the eye does not distinguish the colors, but sees them as a composite. • A TV screen and a computer monitor produce color pixels (picture elements) by firing red, green, and blueelectron guns at phosphors on the screen in very close proximity and in very rapid succession.

Section 2 More About RGB • The term additivealso becomes clearer when you examine this illustration. • Notice what “color” is at the intersection of the red, the green, and the bluecircles. • In this model, red, green, and blueare considered primary colors, and they combine to produce the secondarycolors cyan, magenta, and yellow. • You can mix red, green, and bluelight in varying proportions to produce any other hue. • Again, all hues are produced by addingred, green, and bluetogether.

Section 2 A Note About White Light “White” light as we observe it in everyday life—e.g., in a cloud in the sky—is a mixture of all of the colors of the visible electromagnetic spectrum. However, white light can also be produced by combining any three distinct frequencies of light as long as they are widely separated on the spectrum. Such colors are called “primary” colors, and in the RGB model that is used for output to monitors, those colors are red, green, and blue. RGB is simply an arbitrary choice for a triad of primary colors, and it has become a convention in computer video output more for cultural and historical reasons than for scientific ones.* (*The prevalence of words for “red,” “green,” and “blue” throughout world languages indicates that these colors are perceived as being among the most dominant ones.)

Section 2 More About CMYK • CMYK is known as the subtractive model because of the way that it produces white. • The three transparent inks used in full-color printing are cyan, magenta and yellow. When these inks are mixed in equal proportions, the result is a sort of muddy black. Black ink (or toner) is added to sharpen the black. (“K” = black) • Remember that by default, the paper is white. So, to produce white in the printing process, we simply “subtract” the CMYK inks or toners. • No ordinary mass printing process produces the color white on paper that is not white. This could theoretically be done, but only by applying a very thick and opaque white ink, and this would not be a cost-effective way of achieving white, particularly because press machinery is designed for thin, transparent inks.

Section 2 More About CMYK • Here is the CMY model, where a muddy black results from overlaying the three colored inks. • Notice here that cyan, magenta and yellow--primary colors in this model--combine to produce the secondary colors red, green and blue.

Section 2 “Super black” The Washington Post reported (2008) that a new paper-thin material has been developed that absorbs 99.955 percent of light that hits it, making it about 30 times as dark as the government’s current standard for blackest black, which absorbs only 98.6 percent of light. This material, made of carbon nanotubes, will be used in solar panels (to absorb more light) and in telescopes (to sop up random bits of reflected light that don’t belong in the telescope’s canister). “Super black” is not yet available in inks or toners, so it will not affect printed images for now. --The Seattle Times, Feb. 21, 2008

Section 2 Comparison of RGB and CMYK Output Compare the two models. Notice that the colors don’t look alike. This is because CMY cannot produce the brightness of the RGB colors. (E.g., compare the brightness of an image shown on a computer monitor and on a color print-out.)

Section 2 A Further Note About White Light You just learned that, in the RGB model of mixing light, you can produce cyan bymixing blue and green together. Logically, then, you should be able to mix redwith cyan to get white. And this is in factthe case. Notice that red and cyan are opposite each on the colorwheel. They are what we call “complementary” colors. Therefore, any two complementary colors will also produce white light, e.g., magenta and green , yellow and blue , etc.

Section 2 How CMYK Inks are Layered in Printing In printing, overlapping layers of varying percentages of transparent C, M and Y inks are used. Light passes through the inks and reflects off the surface below them (the substrate). (Black ink/toner may be added for areas that should not reflect any light.) Each color of ink has chemical properties that allow it to absorb some wavelengths of light while reflecting others. E.g., cyan ink absorbs all the wavelengths except the cyan. So the resulting color in the illustration below is a mixture of reflected wavelengths from the CMY inks as well as the white substrate itself. REFLECTED LIGHT WHITE LIGHT Magenta 17% Cyan 100% Yellow 87% White substrate, 100% reflectance

Section 2 How CMYK Inks are Layered in Printing For an in-depth treatment of subtractive color, visit the “Physics Classroom” at http://www.physicsclassroom.com/Class/light/U12L2e.html

Section 2 But what do we mean by “percentages” of CMY? In printing, colors are laid down in dots. The centers of these dots are equidistant, so that the dots themselves form a grid, or “screen.” However, the dots do not have to be completely filled with the ink. Figure 1 is an example of a (highly magnified) 50% yellow screen. Figure 2 shows what a printed sample of the 50% yellow might look like. Notice that the yellow is lighter than the individual dots. This is because 50% of the area of each screen cell is white. Figure 1 Figure 2

Section 2 A Uniform 50% Yellow Screen Notice, too, that the color in the figure is uniform. (Figure 2) There are no gradations, as you would find in a monotone print of a photograph. (Fig. 3) Figure 2 Figure 3 For gradations in the saturation of the color, you would need dots of varying sizes. Such variations can be achieved by allowing light to pass through a film negative and then through a screen to a photopolymer plate, where the light will react differentially to form raised and recessed areas for the application of the ink.

Section 2 How CMYK Inks Combine to Form Composite Colors This is the dark green that we saw in the earlier diagram showing the layering of inks. Note that the cyan screen at 100% prints as a solid layer and the 87% layer of yellow appears as green dots because in every case the yellow is overlaying the cyan, forming green. The magenta dots, at 17%, appear much darker because they are mostly overlaying both the cyan and yellow. Notice, again, that the resulting color is uniform, not graduated.

Module 3: Color Theory & Management