Purpose

Overview

Topics

Science:  Electromagnetic Spectrum
 

NC Scientific Visualization Objectives

NC Physics Goals and Objectives

Tools

Teacher Information

• An object's color is determined by which wavelengths of light it reflects.
• Colors of light and colors of pigment behave differently.

NASA has a unit with lesson plans at htttp://imagers.gsfc.nasa.gov/teachersite/UL.htm   I especially recommend their first experiment where students use flashlights and mix colors of light.  Most students have mixed pigment colors and are surprised to find out that mixing  light does not provide the same results.  While NASA also  has a site where students can mix colors of light on the computer monitor  and see the results,  I strongly recommend giving students the opportunity to actually do the experiment in the  classroom with flashlights or the stage lights described in the NASA lesson.  After mixing colors of light on a white screen, have students try shining the different colors of light on different colored objects.  What color is a red object when you shine a red light on it?  What about when you shine a cyan light on a red object?   Generalization question:  How does this relate to complementary colors?  How can you explain this pattern?

The teacher will need to select which of the questions and exercises are appropriate for his/her class and the software available and adjust the evaluation criteria accordingly.  When
 
 

References

The Electromagnetic Spectrum Site http://imagers.gsfc.nasa.gov/ems/ems.html   ...

Arizona State University's Patterns in Nature Site has a set of lessons for teaching about light and color with some nice illustrations found at: http://acept.la.asu.edu/PiN/mod/light/pattLightOptics.html

Ask a high energy astronomer:  This site's page of past questions about X-rays and gamma rays  can enhance understanding of the electromagnetic spectrum.
Found at http://imagine.gsfc.nasa.gov/docs/ask_astro/xrays.html

A great page on color vision and designing web pages that work for people with color blindness.  http://www.lava.net/~dewilson/web/color.html  This page is especially nice because it has pictures of how the same flower might appear to people with different defects in their color vision and some discussion of the genetics of color vision.

Brown University has a site where students can interactively explore light and visual effects. http://tux.cs.brown.edu/exploratory/appletindex.html

A web book on visual perception by Peter Kaiser at http://www.yorku.ca/eye/thejoy.htm

How the CIE color model works   http://www.linocolor.com/colorman/sp_ciela_1.htm and  http://www.linocolor.com/colorman/sp_ciela_2.htm

An interesting but advanced discussion of color perception and the historical development of color theory: http://kiptron.psyc.virginia.edu/steve_boker/ColorVision2/ColorVision2.html

An interesting scientific paper for the advanced student  describing comparative ease of use of the different color models found at http://www.acm.org/sigchi/chi96/proceedings/papers/Douglas/sad_txt.htm

Key Terms

Introduction

Read the material provided below and use this information to help you do the assigned exercises and questions.

The Spectral Basis for Color

Figure 1 - The electromagnetic spectrum

There is a narrow range of  this electromagnetic energy  from the sun and other light sources which creates energy of wavelengths visible to humans. Each of these wavelengths,  from approximately 4000 Angstroms  to 7000 Angstroms, is associated with a particular color response. For example, the wavelengths near 4000 Angstroms (400 nm)  are violet in color while those near 7000 (700 nm) are red.

Figure 2  - The colors of the wavelengths of visible light
 
 

The CIE Color Model

Figure 3a - In the CIE model - Z coordinates are projected onto the XY plane

Figure 3b - The CIE color model mapped to X and Y coordinates

Notice in Figure 3b that the perimeter edge marks the wavelengths of visible light. Along this edge will be the 'pure' spectral light colors. Other colors are developed by mixing varying amounts of different wavelengths. Notice the purples at the bottom do not have a wavelength associated with them. These purples are non-spectral colors, that is they can only be seen by mixing wavelengths from the two ends of the spectrum.  White light is perceived when all three cones are stimulated,  like purple it is only seen when light from many different wavelengths is mixed.

One use for the CIE model is to specify ranges of colors that can be produced by a particular light source. This range is referred to as a gamut. For example, a typical computer monitor has a color gamut much smaller than all the possible colors. A color computer monitor produces color by mixing specific red, green, and blue phosphors. As seen in the following illustration, all the possible colors the monitor can produce fall within a triangle defined by these red, green, and blue starting colors.
 
 

Figure 4 - RGB Computer Monitor Gamut shown in the CIE color model

Though there is a solid scientific basis behind the CIE system and it provides a very precise way of specifying color, it is not terribly easy to use in practice. An alternative is start with the three primary colors computer monitors use: red, green, and blue.

Primary and Secondary Color Hues

Figure 5 - The three light primaries: Red, Green, and Blue

The three different colored phosphors are placed in groups very close to each other in groups of three; a triad(see Figure 5). Each triad of primary colored phosphors constitutes a single pixel on the computer monitor. The viewer does not see each phosphor, but the mix of the group of three: the pixel. In fact, it is very difficult to see even a single pixel. The viewer is likely to perceive the color of groups of pixels. By varying the intensity which these phosphors glow, the computer monitor can vary the perceived color at each pixel. As mentioned above, this manipulation of the phosphor intensity creates the gamut of colors which can be created on the computer monitor.

Figure 6 - Each pixel on the computer monitor is made up of a triad of red, green, and blue phosphors.

This mixing process can be represented by laying out all of the possible color mixtures around in a circle. As you move in a circle from one primary to the next, you add more of the primary you approach and less of the one you are moving away from. When you are 180 degrees away from a primary, you have none of it mixed in. This color is the complement of the primary. Figure 7 shows the three complementary colors added to the wheel. Each of these complements has an equal amount of the primaries on either side of it and none of the primary opposite it:
 

Primary	Complement
Red	Cyan
Green	Magenta
Blue	Yellow

 

Figure 7 - Light primary colors and their complements

These complementary colors are also called either the secondary colors or the print primary colors. The term print (or pigment) primaries refers to the fact that these complements to the light primaries are the colored inks used to mix all possible print ink pigments.

This process can continue filling in colors around the wheel. The next level colors, the tertiary colors, are those colors between the secondary and primary colors (Figure 8):

Figure 8 - The tertiary colors added to the primary and secondary colors

The Hue, Saturation, Value (HSV) Color Model

Figure 9 - The Hue, Saturation, Value (HSV) color model
 

You also perceive color changing along two other dimensions. One of the dimensions is lightness-darkness. How light or dark a color is is referred to either as a colors lightness or value. In terms of a spectral definition of color, value describes the overall intensity or strength of the light. If hue can be thought of as a dimension going around a wheel, then value is a linear axis like an axis running through the middle of the wheel (Figure 9).

The last dimension of color that describes our response to color is saturation. Saturation refers to the dominance of hue in the color. On the outer edge of the hue wheel are the 'pure' hues. As you move into the center of the wheel, the hue we are using to describe the color dominates less and less. When you reach the center of the wheel, no hue dominates. These colors directly on the central axis are considered desaturated. These desaturated colors constitute the  grayscale; running from white to black with all of the intermediate grays in between. Saturation, therefore, is the dimension running from the outer edge of the hue wheel (fully saturated) to the center (fully desaturated), perpendicular to the value axis (Figure 9). In terms of a spectral definition of color, saturation is the ratio of the dominant wavelength to other wavelengths in the color. White light is white because it contains an even balance of all wavelengths.

These three dimensions of color: hue, saturation, and value constitutes a color model that describes how humans naturally respond to and describe color: the HSV model. Because the HSV model has three dimensions, it describes a solid volume. A horizontal slice of the model shown in Figure 9  creates a disk of the hues running around the perimeter. The farther down the value axis, the more restricted the saturation range (the radius of the disk) is and, therefore, the smaller the disk. You can think of the overall shape of the HSV model as being an upside-down cone, even though in reality the shape of the cone is somewhat distorted.

Another way you can slice the HSV model solid is vertically. If you took a slice along the saturation axis at a red hue, it might look something like Figure 10:

Figure 10 - A saturation/value slice of a specific hue in the HSV model

This wedge shows all of the saturation and value variations on this particular red. At the top of the wedge, the lightest red runs from high saturation on the right to white on the left. As you move down the wedge, the reds get darker and the saturation range from right to left gets narrower. We can take this theoretical wedge and actually try and see how many saturation and value variations on this red you can make. It might look something like Figure 11:

Figure 11 - Example saturation and value variations on a single red hue

The goal in Figure 11 was to create even increments of saturation going right to left and even increments of value top to bottom. This judgment was made by your 'eye', not by some numeric readout from a color mixing tool. Because you are using your 'eye', no one's wedge would exactly like anyone's else's. Notice that the end result in Figure 11 is not a perfect triangle. Though more color squares could have been made for the darker reds, you would not have been able tell the difference in color between them. Similarly, if you removed some of the squares in the lighter value range, you would have to have made bigger steps of saturation to get the full range that you can see.

Color Mixing Interfaces used by Graphics Software

Figure 12 - HSV color selection interface using a hue/saturation disk and value slider

With the interface shown in Figure 12, the user adjusts the darkness with a slider (seen below the disk) and then picks a hue/saturation combination within the disk. A larger swatch of the color is then shown in the New box. If you want to specify the color numerically, Hue is given as an angle while Saturation and Value are expressed as percentages.

An alternative interface is to create a Value/Saturation slice of a particular Hue:

Figure 13 - HSV color selection interface using a value/saturation rectangle and a hue slider

With the interface shown in Figure 13, the user adjusts the hue with the vertical slider and then picks a value/saturation combination in the rectangle. Notice that the left hand edge of the rectangle shows the grayscale while the top edge shows the saturation range of a lightest version of this red hue. Finally, notice that the lower right quadrant (dark and high saturation) does not contain very many useful colors. If this corner is trimmed, you end up with the value/saturation wedge seen in Figure 11. As in the previous HSV model interface, Hue is specified as an angle while Saturation and Value (referred to here as B(lack)) are percentages.

There are, of course, many other ways of specifying color. One way is to specify color with amounts of Red, Green, and Blue (the light primaries). Another is to specify  amounts of  Cyan, Magenta and Yellow (the print primaries):

Figure 14- CMYK color model selection interface

Notice that in addition to Cyan, Magenta, and Yellow, Black (referred to by the letter K)  is also mixed in. Even though black can theoretically be made by mixing the three print primaries, for practical reasons, pure black ink is added to expand the range of colors.

Colors can also be created by picking two or more starting colors and then selecting among the various combinations of these colors:

Figure 15 - Color Blending selection interface

With the interface shown in Figure 15, the user picks four starting colors (in each corner) and 25 variations of differing percentages of the four colors are shown. The selected color in this case is a even mix of all four. Note that the R(ed), G(reen), and B(lue) values of the selected color are given. Instead of percentages, RGB values are usually specified with a 8-bit value range: 0-255.

Applications of Color in Visualizations

Graph color coding

Figure 16 - Multiple line graph coded with hue variation

In figure 16, three of the lines are coded with primary colors -- 120 degrees apart on the hue wheel -- while the fourth is fairly even split between blue and red. In addition, all of the colors are much darker and more saturated than the white background. These are the two areas of differentiation you are typically concerned with in a graph:

• distinguishing the lines (or other marks) from each other
• distinguishing the lines (or other marks) from the background

Figure 17 - Multiple line graph coded with a narrow range of hues

In Figure 17 all of the chosen hues were in a narrow range between red and magenta, making it difficult to distinguish them from each other. In addition, the colors were lighter and lower in saturation, adding to the difficulty in perceiving the differences.

What if you have to print the graph out on a grayscale printer? Then you may decide to pick a range of values of a single hue that both can be distinguished from each other and from the background:

Figure 18 - Multiple line graph coded with value variation of a single hue

The range of values used to code the line is limited by the white background. You want to use the widest range of values to distinguish the lines from each other, but the lightest line still has to be distinguishable from the background. On the color monitor, Figure 18 shows its hue. When printed on a grayscale printer, this hue disappears, just showing the change in value:

Figure 19 - Multiple line graph coded in grayscale and redundantly coded with shape marks

Notice in Figure 19, the lines have been redundantly coded with shape marks, to help with distinguishing them. When practical, it is a good practice to redundantly code line graphs with both shape and color. This helps cover situations where the color is not accurately reproduced and is helpful to people with defects in color vision.

Area rendering coding

Figure 20 - A grayscale LUT applied to a medical image

In the image in Figure 20, much of the interesting information in the lower-mid region of the image has image values around 200. These values are all mapped to a fairly narrow range of grays (approximately where the pointer is on the LUT). Just as with the line graph, the goal is to create a broad a range of color on one or more dimension of color; in this case, value. You can create a more rapid change in grays around the area of interest by compressing the grayscale so it ramps from white to black more rapidly about the value of 200:

Figure 21 - The grayscale LUT now ramps more rapidly about the image values of interest.

Hue can also be introduced to highlight areas of interest. A powerful technique is to introduce a single saturated color into the LUT to represent either a single image value or a range of image values:

Figure 22 - A saturated red is used to highlight a range of image values

In Figure 22, a saturated red is used to highlight a range of values around 200 in the image. The contrast of a saturated red against the desaturated grays stands out very nicely.

Alternatively, if there are multiple image value ranges of interest, the grayscale LUT can be substituted for a LUT made up of a range of hues:

Figure 23 - A medical image coded with a range of hues

This color LUT progresses in a serial fashion around the hue wheel, so that ranges of image values are represented by hues of the same family. This is the same scheme as in the grayscale where the grays move from white to black through the image values. Just as with the grayscale image, the lower-mid region of the image is represented by a fairly narrow range of hues. This can be improved by having the hues shift more rapidly in around the image value of 200 (approximately where the pointer is on the LUT in Figure 23):

Figure 24 - The image rendered with a compressed hue range

Now the all the image values below 200 are represented as black while the values from 200 to 255 are represented by 20 different hues, ranging across the full spectrum.

Student Assignment

Questions

1. What wavelengths of electromagnetic radiation produce visible light? Is there a wavelength for every color we see?
2. Define hue, saturation and value (lightness).
3. Explain how the HSV model is constructed. How do you specify a point within the model?
4. Compare the HSV model to the CIE color model.
5. Describe how computer monitors produce color.
6. Make a table showing  the advantages and disadvantages of using hue, or saturation or value to code a line graph.
7. Could you use saturation as the basis for creating a lookup table (LUT) for an area rendering? Explain how would it be similar to either a hue-based or value-based LUT.
8. What adjustments should the graphic designer make to accomodate viewers with color blindness.
9. The parameters 'contrast' and 'brightness' are used to alter the look of digital images. Research these terms and describe how these parameters relate to the use of hue, saturation, and value in an image.

Exercises

1. Examine the graphics programs on your computer.  For each program that allows the user to select colors list the color model(s) available and describe the color selection interface.
2. Using a graphics program, create a create a value/saturation wedge such as the one seen in Figure 11 for a primary or secondary color (other than red).   Do uniform incremental changes of saturation or value (e.g., create ten grays at value increments of 10%, 20%, 30%,....etc.) create ten colors that look like they are equally spaced increments?
3. Using a graphics program, pick six different colors that differ markedly in hue using a HSV color model interface. Match these colors using a RGB interface. Compare the HSV and RGB values. Repeat this with three colors that differ markedly in value. Now repeat with three colors that differ markedly in saturation. Describe in words how the RGB values change when hue changes, when value changes, and when saturation changes.
4. Repeat exercise problem 2 using HSV and CYMK color model interfaces. (What interface should be specified in #2?)
5. Using a multiple line graph you previously created or provided by the instructor, create alternative codings for the lines using hue, value, and saturation. Create both good and bad applications of these color coding schemes. Explain the strengths and weaknesses of each approach.
6. Using an area rendering you previously created or provided by the instructor, create alternative codings for the lines using hue, value, and saturation. Create both good and bad applications of these color coding schemes. Explain the strengths and weaknesses of each approach.

Evaluation Criteria

eeh 5/8/00