Module 3: Color Theory & Management 1
1
Module 3:Color Theory & Management
Instructor: Doughlas Remy
Module 3: Color Theory & Management 2
Topics Covered in This Module
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
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
Answer Forms for Printing
Module 3: Color Theory & Management 3
Section 1 • Factors Determining Color• Characteristics of EM Radiation• Light Sources• Visible Light• The Newton Color Wheel• Quiz
Section 1
Module 3: Color Theory & Management 4
Factors Determining Color (and why they matter...)
• 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 and
interpret color.
Section 1
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.
Module 3: Color Theory & Management 5
Factors Determining Color (and why they matter...)
Section 1
Why color is so “wobbly” (1)
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.”
2. Hold the swatch so that it is catching light reflected from one of the white walls.
3. Now turn the swatch so that it catches light reflected from the green wall. Notice the slight shift in color.
4. 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.)
5. Close the blinds in the room and look at the swatch again (reflecting only florescent light).
Module 3: Color Theory & Management 6
Factors Determining Color (and why they matter...)
Section 1
Why color is so “wobbly” (2)
6. Key the RGB values into your Photoshop color palette and fill a large square with the color. Compare it to the color swatch.
7. Print the square on your office printer. Compare the color to that of the swatch and the monitor display.
8. Using an overhead projector, project the color on a white screen. Compare.
9. Now turn off the florescent lights and view the color again. Compare.
10. 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.
11. 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.
Module 3: Color Theory & Management 7
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.
Characteristics of EM Radiation
Crest
Trough
Wavelength
Amplitude
Section 1
Module 3: Color Theory & Management 8
1. Wavelength (meters)
2. Amplitude (meters)
3. Frequency (cycles per second, or Hertz)
4. Temperature/Energy (electron volts, measured in Kelvins)
EM Radiation (including visible light)is measured by…
Section 1
Module 3: Color Theory & Management 9
1. 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)
2. Amplitude (meters)
3. Frequency
4. Temperature/Energy
Wavelength and Amplitude
*Micron: one-millionth of a meter.
*Nanometer: one ten-billionth of a meter
Section 1
Module 3: Color Theory & Management 10
1. Wavelength
2. Amplitude
3. Frequency (cycles per second, or Hertz) Example: Radio waves: 1kHz to 1MHz
4. Temperature/Energy
FrequencyNote The wave’s speed is constant (186,000 mi/sec), so the shorter waves have higher frequency, and vice versa.
1 sec
4 cycles per sec
2 cycles per sec
Section 1
Module 3: Color Theory & Management 11
1. Wavelength
2. Amplitude
3. Frequency
4. Temperature / Energy (electron volts, measured in Kelvins)
Temperature / Energy
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
Module 3: Color Theory & Management 12
1. Wavelength
2. Amplitude
3. Frequency
4. 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.
Temperature / Energy
Lower energy
Higher energy
Section 1
Module 3: Color Theory & Management 13
“Hotter” sources emit shorter wavelengths in larger amounts.
“Cooler” sources emit longer wavelengths in larger amounts.
Color Temperature
Note This is somewhat counter-intuitive, since we associate red with hot and blue with cold.
Section 1
Module 3: Color Theory & Management 14
• 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
Light Sources
Section 1
Mercury vapor lamp
Module 3: Color Theory & Management 15
• 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.
Light Sources (continued)
Section 1
Module 3: Color Theory & Management 16
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)
*Nanometer: one ten-billionth of a meter
Visible Light
Radio wavesX-Rays
Gamma RaysInfraredUltraviolet
Visible spectrum
Section 1
Module 3: Color Theory & Management 17
• The human eye can distinguish approximately 10,000 colors.
• We call the most prominent ones, in their order, by the acronym ROY G BIV. (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.
More About Visible Light
Section 1
Module 3: Color Theory & Management 18
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.
The Newton Color Wheel
Section 1
Module 3: Color Theory & Management 19
Newton’s color wheel was the first truly “scientific” color model because it was an empirical model—i.e., based on observation.
The Newton Color Wheel
Section 1
Module 3: Color Theory & Management 20
The Newton Color Wheel describes only hue, not saturation or brightness. The darker core of this illustration is meaningless.
Newton didn’t do saturation or brightness.
So, what do we mean by “saturation” and “brightness”?(We’ll find out in the next section...)
Section 1
Module 3: Color Theory & Management 21
Section 1 Quiz
1. Color is determined by… a. the physics of light. b. the chemistry of matter. c. the physiology of human
vision. d. (all of the above)
2. A light wave’s _____ is its only
constant characteristic. a. length b. amplitude c. crest d. speed e. trough
3. The distance between the crest
and the trough of the wave is called its “___.”
a. frequency b. wavelength c. amplitude
4. Which of these measurements is
the smallest? a. a nanometer b. a micron c. a centimeter
5. The amplitude of a wave is measured in…
a. inches b. Kelvins c. meters d. Hertz
6. The frequency of a wave is
measured in… a. inches b. Kelvins c. meters d. Hertz
7. The “temperature” of EM radiation
is measured in… a. inches b. Kelvins c. meters d. Hertz
8. Light waves with shorter
wavelengths (e.g., blue, violet) have a _____ temperature than ones with longer wavelengths (e.g., red).
a. higher b. lower
9. Which of the following are incandescent light sources?
a. Mercury lamps b. the Sun and stars c. ordinary filament light
bulbs d. candle flames
10. The spectrum of visible light runs
from… a. violet to red. b. blue to green. c. red to yellow.
11. It was ____ who discovered that
white light is composed of different-colored wavelengths.
a. Copernicus b. Ptolemy c. Isaac Newton d. Galileo e. Leonardo da Vinci
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
Module 3: Color Theory & Management 22
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
Section 2
Module 3: Color Theory & Management 23
• dominant wavelength (hue)• purity (saturation)• luminance (brightness)
Lum
ina
nce
(B
righ
tnes
s)
*Proposed by the German scientist Ostwald in 1914, this model is useful as a tool for understanding the properties of color.
Purity (Saturation) (a measure of how far the color is from the pure hue)
Dominant Wavelength (Hue)
The Ostwald* Color Model—A Useful Tool
…characterizes color by
Section 2
Module 3: Color Theory & Management 24
The Ostwald Color Model—A Useful Tool
white
black
no hue full hue(saturation)
(brightness)
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.
Section 2
Module 3: Color Theory & Management 25
The Ostwald Color Model—A Useful Tool
Illustrative model (from previous slide)
Ostwald’s HSB model. PhotoShop’s color panel shows HSB values.
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.
Section 2
Module 3: Color Theory & Management 26
Change of HueRed (hue) in
varyingdegrees of
saturation and brightness
Adjusting Hue
Section 2
Module 3: Color Theory & Management 27
Saturation
Brightness
Hue is determined by wave length.
Brightness is determined by the amplitude of the wave.
Saturation refers to the purity of the hue.
Attributes of Color
Hue
Section 2
Module 3: Color Theory & Management 28
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.)
+ =
More About Hue…
Section 2
Module 3: Color Theory & Management 29
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.
More About Hue…
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.
magenta
Section 2
Module 3: Color Theory & Management 30
• 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.
More About Saturation and Brightness…
Section 2
Module 3: Color Theory & Management 31
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.
Attributes of Color
Section 2
Module 3: Color Theory & Management 32
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.
Color Output Models
Section 2
Module 3: Color Theory & Management 33
So, we need another color model for mixing inks or toners to produce full-color printed output.
Color Output Models
And we need yet another color model for mixing wavelengths of light to produce the different hues we see on our monitors.
Section 2
Module 3: Color Theory & Management 34
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
Saturation
Brightness
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.
(Magenta)
(No CMYor K inks)
Black or CMY combo
Understanding the three attributes of colorin the printing model:
Section 2
Module 3: Color Theory & Management 35
Hue
Saturation
Brightness
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.
(Magenta)
All RGB
No RGB
Understanding the three attributes of colorin the projection model:
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).
Section 2
Module 3: Color Theory & Management 36
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
Newton’s Color Wheel and the Color Output Models
Section 2
Module 3: Color Theory & Management 37
Now flip the triangle top to bottom. Which of the two output models does this triad suggest?
Newton’s Color Wheel and the Color Output Models
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
Module 3: Color Theory & Management 38
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 blue electron guns at phosphors on the screen in very close proximity and in very rapid succession.
Section 2
Module 3: Color Theory & Management 39
• The term additive also becomes clearer when you examine this illustration.
• Notice what “color” is at the intersection of the red, the green, and the blue circles.
• In this model, red, green, and blue are considered primary colors, and they combine to produce the secondary colors cyan, magenta, and yellow.
• You can mix red, green, and blue light in varying proportions to produce any other hue.
• Again, all hues are produced by adding red, green, and blue together.
More About RGB
Section 2
Module 3: Color Theory & Management 40
“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.)
A Note About White Light
Section 2
Module 3: Color Theory & Management 41
More About CMYK
Section 2
• 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.
Module 3: Color Theory & Management 42
• 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.
More About CMYK
Section 2
Module 3: Color Theory & Management 43
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
“Super black”
Section 2
Module 3: Color Theory & Management 44
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.)
Comparison of RGB and CMYK Output
Section 2
Module 3: Color Theory & Management 45
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.
A Further Note About White Light
Section 2
Module 3: Color Theory & Management 46
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.
How CMYK Inks are Layered in Printing
Magenta 17%
Cyan 100%
Yellow 87%
White substrate, 100% reflectance
WHITE LIGHTREFLECTED LIGHT
Section 2
Module 3: Color Theory & Management 47
For an in-depth treatment of subtractive color, visit the “Physics Classroom” at
http://www.physicsclassroom.com/Class/light/U12L2e.html
How CMYK Inks are Layered in Printing
Section 2
Module 3: Color Theory & Management 48
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.
But what do we mean by “percentages” of CMY?
Figure 1
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 2
Section 2
Module 3: Color Theory & Management 49
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)
A Uniform 50% Yellow Screen
Figure 2
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.
Figure 3
Section 2
Module 3: Color Theory & Management 50
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.
How CMYK Inks Combine to Form Composite Colors
Section 2
Module 3: Color Theory & Management 51
Exercise 1: “Halftone Screens”Look carefully at the dots.
1. What colors of inks do you see?
2. Do the magenta dots vary in size?
3. Do the cyan and yellow dots vary in size?
4. Are the centers of the dots equidistant, or are they at varying distances from each other?
5. Are the “lines” (of dots) angled, or are they horizontal and vertical?
Section 2
Module 3: Color Theory & Management 52
Exercise 1: “Halftone Screens”(More about these later)
Based on the two sectors shown in white, estimate the angle of the halftone screen for magenta.
Note that each of the other three screens is at a different angle. The black (K) is usually at 45 degrees.
Section 2
Module 3: Color Theory & Management 53
Halftone Screens – 4-color
Module 3: Color Theory & Management 54
Section 2 Quiz
1. Hue is determined by... a. wave amplitude. b. wavelength. c. color temperature
2. Ostwald’s color model is useful
for understanding ... a. the CMYK model. b. complementary color
schemes c. hue, saturation, and
brightness.
3. A color’s brightness is determined by...
a. wave amplitude. b. wavelength. c. color temperature.
4. Which of the following colors is
always a desaturated hue? a. yellow b. blue c. pink d. magenta
5. When you completely desaturate a hue, you can get...
a. its complement. b. white c. total transparency d. black
6. When we combine red, green,
and blue light in equal proportions, we get...
a. black. b. white. c. sky blue. d. brown.
7. The HSB model describes color
that is produced... a. by any means. b. by inks or paints (only). c. by projected light (only). d. by computer displays
(only).
8. Using ordinary mass printing technology, what are the two conditions for producing white?
a. Use white paper. b. Apply no ink. c. Combine cyan, magenta,
and yellow in equal proportions.
d. Use white ink.
9. CMY inks must be both ___ if they are to combine to produce other hues.
a. reflectant and compatible b. compatible and water-
based c. transparent and
overlapping d. transparent and oil-based e. overlapping and reflectant
10. If all the dots in a set of CMYK
halftone screens are the same size, the printed output is...
a. a desaturated hue. b. a gradient. c. a uniform color.
Use the highlighter pointer to mark your answers. More than one answer may be correct.
Section 2
Module 3: Color Theory & Management 55
Section 3(optional)
Color Schemes
Module 3: Color Theory & Management 56
Color Schemes
Monochromatic Analogous Complementary
Split Complementary
Triadic Tetradic
Section 3
Module 3: Color Theory & Management 57
The monochromatic color scheme uses variations in brightness and saturation of a single color. This scheme looks clean and elegant. Monochromatic colors go well together, producing a soothing effect. The monochromatic scheme is very easy on the eyes, especially with blue or green hues.
A disadvantage of this scheme is its lack of contrast and vibrancy, unless blacks or dark grays are used with it.
(Note: Brightness and saturation are not shown on the color wheel.)
http://www.color-wheel-pro.com/color-theory-basics.html
Color Schemes: Monochromatic
Section 3
Module 3: Color Theory & Management 58
The analogous color scheme uses colors that are adjacent to each other on the color wheel. One color is used as a dominant color while others are used to enrich the scheme.This scheme looks richer than the monochromatic scheme, and it offers more contrast.
Color Schemes: Analogous
Section 3
Module 3: Color Theory & Management 59
The complementary color scheme consists of two colors that are opposite each other on the color wheel. This scheme looks best when you place a warm color against a cool color, for example, red versus green-blue. This scheme is intrinsically high- contrast.
Color Schemes: Complementary
Section 3
Module 3: Color Theory & Management 60
The split complementary scheme is a variation of the standard complementary scheme. It uses a color and the two colors adjacent to its complement. This provides high contrast without the strong tension of the complementary scheme.
This scheme is nuanced but difficult to balance.
Color Schemes: Split Complementary
Section 3
Module 3: Color Theory & Management 61
The triadic color scheme uses three colors equally spaced around the color wheel. This scheme is popular among artists because it offers strong visual contrast while retaining harmony and color richness. The triadic scheme is not as contrastive as the complementary scheme, but it looks more balanced and harmonious.
Color Schemes: Triadic
Section 3
Module 3: Color Theory & Management 62
The tetradic scheme is the most varied because it uses two complementary color pairs. This scheme is hard to harmonize; if all four hues are used in equal amounts, the scheme may look unbalanced, so you should choose a color to be dominant or subdue the colors.
Color Schemes: Tetradic
Section 3
Module 3: Color Theory & Management 63
Section 4 Exercises Using the HSB, CMYK, and RGB Sliders in PhotoShop
Module 3: Color Theory & Management 64
1. Start Photoshop. 2. On the File menu, click New, and then click OK.3. If the color palette (shown below) is not visible, then click Window on
the main menu, and then click Show color.4. In the top right corner of the color palette, click the small triangle to
display the menu. Then click HSB.
Exercise 2: Understanding Hue, Saturation, and Brightness
Section 4
Module 3: Color Theory & Management 65
1. Notice the symbols to the right of the number fields.2. What is the highest number in the top field?3. What is the highest number in the other two fields?
Notice the color and the hue number, as expressed in degrees.
Exercise 2: Understanding Hue, Saturation, and Brightness
Section 4
Module 3: Color Theory & Management 66
Use the values 0, 20, 40, 60, 80 and 100 to fill in the colored cells of the Ostwald chart.
The first number in each sequence is the hue, the second is saturation, and the third is brightness.
Note that the hue, with the number 0, does not change.
Exercise 3: Understanding Hue, Saturation, and Brightness
000
0100100
00
100
Section 4
Module 3: Color Theory & Management 67
Using the HSB color sliders, find the values for the following pure hues, plus black and white. Enter “x” where any value will do.
Exercise 4: Finding Pure Hues on the HSB Slider
H S B H S BRed Blue
Yellow Magenta
Green Black
Cyan White
Section 4
Module 3: Color Theory & Management 68
Now find the values for any three shades of gray.
Exercise 5: Finding Shades of Gray on the HSB Slider
H S BGray 1
Gray 2
Gray 3
Section 4
Module 3: Color Theory & Management 69
1. Select the RGB (Red, Green, Blue) slider from the drop-down menu at the arrow.
Exercise 6:Using the RGB Slider
2. What is the highest number on each slider, and what is the significance of each?
Section 4
Module 3: Color Theory & Management 70
Why 255?
RGB colors are for output from computers, which are digital devices.
Digital technology uses binary numbers. A signal may be in an “on” or an “off” state. These two states are represented as 1 and 0 and, together, they are referred to as a “bit” of information.
With two bits, we have four possible states: 10, 01, 11, or 00.
With three bits, we have eight possible states: 000, 001, 010, 011, 100, 101, 110, and 111.
Section 4
Module 3: Color Theory & Management 71
Why 255?
To determine how many possible states can be represented by “N” number of bits, just raise 2 to the power of “N.”
Example: 4 bits gives us 16 states (24), and 5 bits gives us 32 states (25).
How many states will 8 bits give us?
Section 4
Module 3: Color Theory & Management 72
Why 255?
255 is one less than 256...
Section 4
The software engineers who designed this RGB color palette wanted each slider to begin with a zero, not a “1,” so they shifted the scale back by one.
Now, with the G and B sliders at zero, slide the R slider back and forth from 0 to 255. What happens to the color?How many colors do you get?
Now set the R and B sliders to 0 and move the G slider back and forth. What happens to the green?
Module 3: Color Theory & Management 73
Why 255?
Now set the B slider to 0 and move the other two around.Describe the colors that you see.
How many colors can you produce with the R and G sliders?
How many colors can you produce all three sliders?
Section 4
Module 3: Color Theory & Management 74
Provide the RGB values for the colored cells, using the numbers 0, 51, 102, 153, 204, and 255.
You may use the Photoshop RGB slider to help in this task.
Exercise 7: Using RGB Values to Adjust Saturation and Brightness of a Pure Hue
000
25500
255255255
Section 4
Module 3: Color Theory & Management 75
Find the values for the following pure hues, plus black and white.
Exercise 8:Finding Pure Hues on the RGB Slider
R G B R G BBlack Blue
White Yellow
Red Magenta
Green Cyan
Section 4
Module 3: Color Theory & Management 76
Find the RGB values for any three different shades of gray.
Exercise 9: Finding Shades of Gray on the RGB Slider
R G BGray 1
Gray 2
Gray 3
Section 4
Module 3: Color Theory & Management 77
1. Select the CMYK slider from the drop-down menu at the arrow.
Exercise 10:Using the CMYK Slider
2. What is the highest number on each slider, and what is the significance of each?
Section 4
Module 3: Color Theory & Management 78
Provide the CMYK values for the colored cells, using the numbers 0, 20, 40, 60, 80 and 100.
You may use the Photoshop CMYK slider to help in this task.
Exercise 11: Using CMYK Values to Adjust Saturation and Brightness of a Pure Hue
000
100
0100800
0000
Section 4
Module 3: Color Theory & Management 79
Find the values for the following pure hues, plus black and white.
Exercise 12:Finding Pure Hues on the CMYK Slider
C M Y K C M Y KBlack Yellow
White Red
Cyan Green
Magenta Blue
Section 4
Module 3: Color Theory & Management 80
Now find the values for any three shades of gray.
Exercise 13: Finding Shades of Gray on the CMYK Slider
C M Y KGray 1
Gray 2
Gray 3
Section 4
Module 3: Color Theory & Management 81
Section 5 • The CIE Color Model• The Munsell System• Quiz
Section 5
Module 3: Color Theory & Management 82
• CIE was devised at Cambridge University in the early 20th century and adopted in 1931. “CIE” stands for “Commission Internationale de l’Eclairage.”
• The CIE color models (there was an original and several revisions) are based as closely as possible on how humans perceive color. They are device-independent.
• CIE researchers had to define standard (light) sources and standard observers.
CIE
Section 5
Module 3: Color Theory & Management 83
• Source A: A tungsten-filament lamp with a color temperature of 2854K.
• Source B: Noon sunlight (in Cambridge, England?), color temperature 4800K.
• Source C: Average daylight, color temperature 6500K.
These “sources,” also called “illuminants,” are defined by spectral power distribution. They are not actual physical sources of light.
CIE Standard Sources
Section 5
Module 3: Color Theory & Management 84
• The “standard observer” is actually a composite made from 15 to 20 individuals. The composite represents normal human color vision.
• The observer views a pure spectral color alongside one created by three lamps emitting varying amounts of RGB.
• When the observer thinks they match, the “tristimulus values” of the RGB lamps are assigned to the pure spectral color.
The CIE Standard Observer
Section 5
Module 3: Color Theory & Management 85
• Why the funny horseshoe shape?
• Caveat: Our output devices (monitor, projector) do not show the full range of colors, and the graphic is low-res.
• The white point at A is the achromatic point. (No hues)
• The numbers around the curve of the diagram are wavelengths (in nanometers) of all spectral hues visible to the human eye.
The CIE Diagram is an extremely precise and widely-used method of producing and identifying color since 1931. The CIE system was created by the Commission Internationale de l’Eclairage.
A
The CIE Chromaticity Diagram
Section 5
Module 3: Color Theory & Management 86
• Each color inside the curve has a precise mathematical relation to combinations of other colors within the curve. (These combinations may be represented by either straight lines or polygons.) E.g.,
• The three colors at the vertices of the white triangle combine to form the color indicated by the crosshair at B.
• Point B will be in the center of the triangle as long as the three component colors are in equal proportion.
• Notice the mint-green bar below the diagram. This shows the color at B.
• Shown just below the mint-green bar are the three colors that were combined in equal proportions to produce the color at point B.
http://www.cs.rit.edu/~ncs/color/a_chroma.html
B
CIE: A Highly Mathematical Model
Section 5
Module 3: Color Theory & Management 87
B • When three colors are mixed in different proportions (see sliders below), notice that point B moves away from the center of the triangle.
• Point B is said to represent the “Center of Gravity” of the triad.
The CIE “Center of Gravity”
Section 5
Module 3: Color Theory & Management 88
The chromaticity diagram is also used to define color gamuts, or color ranges. Gamuts are simply polygons placed on the diagram.
The CIE diagram is useful in comparing the color gamuts of monitors, printers, slide films and other hardcopy devices.
Shown here are the approximate color gamuts for computer monitors (RGB) and printers (CMYK). Actually, the red, green and blue phosphors used in monitors vary from manufacturer to manufacturer.
The color gamut of most printers is smaller than that of monitors. Setting your color quality from 24 to 16 bit in the control panel will help you match printer and monitor output more closely.
CIE Color Gamuts
Section 5
Module 3: Color Theory & Management 89
• Inconsistent color is a problem inherent in all computer-generated color output, whether to a monitor or to print.
• Every RGB device (scanner, monitor, digital camera) has itsown gamut.
• Some RGB colors cannot be reproduced in CMYK, and vice versa. (Open CIE Gamut 2 in PS, change RGB to CMYK and observe the difference. Start to save as TIFF.)
• Neither RGB nor CMYK can produce all colors visible to the human eye.
• The international standard for color output to print is known as SWOP, or Specifications for Web Offset Publications.
CIE Color Gamuts: Points to Remember
Section 5
Module 3: Color Theory & Management 90
The CIE chromaticity diagram shows only dominant wavelength and saturation.
It is independent of the amount of luminous energy (amplitude of the wave).
E.g.,
Brown is not shown on the diagram. It is just a low-luminance orange-red.
You could imagine a third axis for this diagram. It would show a range of luminance from 100% (at the surface) to 0% (black). Compare this to the color wheel we studied earlier:
Where’s Brown?
Section 5
Module 3: Color Theory & Management 91
The scientists who proposed the original CIE model found that, in order to produce certain colors visible to the human eye, some R, G or B values had to be negative. They thought this was unacceptable for an international standard, so they decided to use the letters X, Y, and Z instead. These have values represented solely by positive integers, but they correspond roughly to R, G, and B.
CIEXYZ
CIEXYZ, CIELAB, and CIELUV
Section 5
Module 3: Color Theory & Management 92
CIELAB is a 1942 revision that defines
colors along two polar axes for color (a
and b), and a third for lightness (L).
CIELAB has become very important
for desktop color. Like all CIE models,
it is device independent (unlike RGB
and CMYK), is the basic color model in
Adobe PostScript (level 2 and level 3),
and is used for color management as
the device independent model of the
ICC (International Color Consortium)
device profiles.
+a is red-a is green+b is yellow
-b is blue0 is greyscale
CIEXYZ, CIELAB, and CIELUV
Section 5
Module 3: Color Theory & Management 93
A 1960 revision. It uses an altered and elongated form of the original chromaticity diagram.
CIELUV
CIEXYZ, CIELAB, and CIELUV
Section 5
Module 3: Color Theory & Management 94
• Albert Henry Munsell: an American artist.• Wanted a decimal system instead of color names.• Published Color Notation in 1905.• His system is still a standard for colorimetry (the measurement
of color)• To understand this system, first we’ll take you back to the color
wheel we saw earlier:
Introduction to the Munsell System
Section 5
Module 3: Color Theory & Management 95
Munsell modeled his system as an orb (you have to imagine this) around whose equator there runs a band of pure hues corresponding to those of Newton’s color wheel.
The axis of the orb is a scale of neutral grey values with white as the north pole and black as the south pole.
Extending horizontally from the axis at each grey value is a gradation of color progressing from neutral gray to full saturation.
Munsell used the terms “hue,” “chroma,” and “value,” to describe these aspects of color. However, to avoid confusion, we’re going to stick with “hue,” “saturation,” and “brightness.”
How the Munsell System Works
Section 5
Module 3: Color Theory & Management 96
• 5 primary hues:• Red: R• Yellow: Y• Green: G• Blue: B• Purple: P
• 5 intermediate hues:• Yellow-red (YR)• Green-yellow (GY)• Blue-green (BG)• Purple-Blue (PB)• Red-Purple (RP)
Compare Newton’s wheel. How many “primary colors” are there?
The Munsell System: Hue (1)
Section 5
Module 3: Color Theory & Management 97
• Each primary and intermediate hue is allotted 10 compass degrees and then identified by its place in the segment.
• E.g., Primary red is 5R. 2.5R tends towards red-purple, and 7.5R tends towards yellow-red.
http://www.adobe.com/support/techguides/color/colormodels/munsell.html
The Munsell System: Hue (2)
Section 5
Module 3: Color Theory & Management 98
• The brightness axis controls the grey level. It runs from black (10) to white (0). E.g., 8 is a dark grey, and 2 is a light grey.
• So 5PB 6 indicates a middle purple-blue with a brightness level of 6.
The Munsell System: Brightness
Section 5
Module 3: Color Theory & Management 99
Saturation distinguishes between a pure hue and a grey shade. The saturation axis runs at a right angle to the brightness axis.
• Saturation is denoted by a number following the brightness number, separated by a slash (“/”). E.g., 7.5YR 7/12 indicates a yellow/red tending towards Y, with a brightness of 7 and a saturation of 12. It’s a sort of “salmon” color.
The Munsell System: Saturation (1)
Section 5
Module 3: Color Theory & Management 100
• You may have noticed that I did not mention the range of numbers for the saturation value.
• This is because full saturation for individual hues occurs at different places.
• E.g., 5RP, shown here, reaches full saturation at 5/26, whereas...
The Munsell System: Saturation (2)
Section 5
Module 3: Color Theory & Management 101
• 10YR has a shorter saturation axis, with full saturation achieved at 7/10 and 6/10.
The Munsell System: Saturation (3)
Section 5
Module 3: Color Theory & Management 102
• Munsell originally envisioned his color model as a sphere, but later saw it become radically asymmetrical.
• Note that reds, blues and purples tend to reach higher saturation values.
• Also note that these same colors reach full saturation at mid-levels on the brightness scale, while yellows and greens reach it a higher levels.
The Munsell System: Saturation (4)
Section 5
Module 3: Color Theory & Management 103
• The Munsell system is still internationally accepted.
• The Munsell Book of Colors is sold commercially to printers and designers.
• There are also digital libraries for the Munsell system. You will find them in Adobe PageMaker and Adobe FrameMaker.
• No digital color library, however, will display accurately due to the gamut constraints of RGB.
• Printed swatches are the only way to guarantee accuracy.
• The Munsell Company is owned by GretagMacbeth and is on the web at www.munsell.com. (Take a look.)
Using the Munsell System
Section 5
Module 3: Color Theory & Management 104
Section 5 Quiz
1. The range of colors that a device (monitor, printer, etc.) can handle is called its...
a. chromaticity. b. CIE. c. gamut. d. output. e. (none of the above)
2. In order to study color, CIE
researches had to define standards for...
a. light sources and observers.
b. inks and pigments. c. hue, saturation, and
brightness.
3. Which of the following devices can manage all the colors in the CIE system?
a. digital printers b. LCD monitors c. CRTs d. some digital cameras e. (none of the above)
4. CIE researchers had their observers compare pure spectral colors with...
a. Pantone colors. b. light from RGB lamps. c. sunlight. d. unsaturated spectral
colors
5. Which color model has the smallest color gamut?
a. CMYK b. RGB c. Ostwald d. Munsell e. CIELAB f. CIELUV
6. Which color model allows you to
compare color gamuts? a. Ostwald’s b. Munsell’s c. Newton’s d. CIE
7. Munsell’s color system took ___ and turned it into ___.
a. CIE ... a pyramid. b. CIE ... an orb. c. Newton’s color wheel ...
a pyramid. d. Newton’s color wheel ...
an orb.
8. Munsell’s system allowed a ___ of colors.
a. digital coding b. spectral mixing c. hypersaturation d. frequency analysis
9. A two-dimensional diagram
showing only the hues in Munsell’s system is a circle with ___ degrees.
a. 100 b. 360 c. 10,000 d. 1000 e. 256
Mark your answers on an answer sheet. More than one answer may be correct.
Section 5
Module 3: Color Theory & Management 105
End of Module 3
Module 3: Color Theory & Management 106
Slides to print out at 2 per page for handout (next 6 slides)
Module 3: Color Theory & Management 107
000
0100100
00
100
Module 3: Color Theory & Management 108
H S B H S BRed Blue
Yellow Magenta
Green Black
Cyan White
H S BGray 1
Gray 2
Gray 3
Module 3: Color Theory & Management 109
000
25500
255255255
Module 3: Color Theory & Management 110
R G B R G BBlack Blue
White Yellow
Red Magenta
Green Cyan
R G BGray 1
Gray 2
Gray 3
Module 3: Color Theory & Management 111
000
100
0100800
0000
Module 3: Color Theory & Management 112
C M Y K C M Y KBlack Yellow
White Red
Cyan Green
Magenta Blue
C M Y KGray 1
Gray 2
Gray 3
Module 3: Color Theory & Management 113
Answers to Exercises
Module 3: Color Theory & Management 114
Purity (Saturation)
Lum
inan
ce
(Brig
htne
ss)
Dominant Wavelength (Hue)
Exercise 3: Understanding Hue, Saturation, and Brightness
000
0100100
00
100
060100
04060
04040
0060
020100
Section 4
Module 3: Color Theory & Management 115
Exercise 4: (answers)
Finding Pure Hues on the HSB Slider
H S B H S BRed 0 100 100 Blue 240 100 100
Yellow 60 100 100 Magenta 300 100 100
Green 120 100 100 Black x x 0
Cyan 180 100 100 White x 0 100
Section 4
Module 3: Color Theory & Management 116
Exercise 5: (Sample answers) Finding Shades of Gray on the HSB Slider
Section 4
Module 3: Color Theory & Management 117
Purity (Saturation)
Lum
inan
ce
(Brig
htne
ss)
Dominant Wavelength (Hue)
Exercise 7: (Answers) Using RGB Values to Adjust Saturation and Brightness of a Pure Hue
000
25500
255255255
255102102
1535151
10200
153153153
255204204
100% Red+ 100% Blue+ 100% Green= White
100% Red+ 0% Blue+ 0% Green= Red
0% Red+ 0% Blue+ 0% Green= Black
Section 4
Module 3: Color Theory & Management 118
Exercise 8: (answers)
Finding Pure Hues on the RGB Slider
R G B R G BBlack 0 0 0 Blue 0 0 255
White 255 255 255 Yellow 255 255 0
Red 255 0 0 Magenta 255 0 255
Green 0 255 0 Cyan 0 255 255
Section 4
Module 3: Color Theory & Management 119
Exercise 9: (sample answers)
Finding Shades of Gray on the RGB Slider
Any set of equal RGB values (except 0,0,0 and 255,255,255) will produce a shade of gray.
Section 4
Module 3: Color Theory & Management 120
Purity (Saturation)
Lum
inan
ce
(Brig
htne
ss)
Dominant Wavelength (Hue)
Exercise 11: (answers) Using CMYK Values to Adjust Saturation and Brightness of a Pure Hue
000
100
0100800
0000
060400
00040
0402040
0402060
Cyan: NoneMagenta: NoneYellow: NoneBlack: None
Cyan: NoneMagenta: 100%Yellow: 80%Black: None
Cyan: NoneMagenta: NoneYellow: NoneBlack: 100%
Section 4
Module 3: Color Theory & Management 121
Exercise 12: (Answers)
Finding Pure Hues on the CMYK Slider
C M Y K C M Y KBlack 100 100 100 0* Yellow 0 0 100 0
White 0 0 0 0 Red 0 100 100 0
Cyan 100 0 0 0 Green 100 0 100 0
Magenta 0 100 0 0 Blue 100 100 0 0*
*50 here makes a better blue.*Black may also have the following values: 0, 0, 0, 100, or100, 100, 100, 100.
Section 4
Module 3: Color Theory & Management 122
Exercise 13: (sample answers)
Finding Shades of Gray on the CMYK Slider
Section 4
Module 3: Color Theory & Management 123Answer forms
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e12. a b c d e13. a b c d e 14. a b c d e15. a b c d e16. a b c d e 17. a b c d e18. a b c d e19. a b c d e 20. a b c d e21. a b c d e22. a b c d e 23. a b c d e
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e12. a b c d e13. a b c d e 14. a b c d e
Module 1:Introduction
Module 2: Printing Processes Module 3:Color Theory and Mgmt
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e
Section 1
Section 2
24. a b c d e 25. a b c d e 26. a b c d e 27. a b c d e 28. a b c d e 29. a b c d e 30. a b c d e 31. a b c d e 32. a b c d e 33. a b c d e34. a b c d e35. a b c d e36. a b c d e 37. a b c d e38. a b c d e39. a b c d e 40. a b c d e41. a b c d e42. a b c d e 43. a b c d e44. a b c d e45. a b c d e 46. a b c d e
Module 3: Color Theory & Management 124Answer forms
Module 4: Tools and Techniques
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e
Section 1
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e
Section 2
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e
Section 3
1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e
Section 4
Module 3: Color Theory & Management 125
Answer: 28, or 2x2x2x2x2x2x2x2, or 256.
Module 3: Color Theory & Management 126
Answer: 256 x 256 = 64,536
Module 3: Color Theory & Management 127
Answer: 256 x 256 x 256 = 16,777,216