Introduction Color is an extremely important part of most visualizations. Choosing good colors for your visualizations involves understanding their properties and the perceptual characteristics of human vision. It is also important to understand how computer software assigns colors and various hardware devices interpret those assignments. This exercise should help develop your knowledge of color models and your ability to apply this knowledge to your projects. The Spectral Basis for Color Visible light, ultraviolet light, x-rays, TV and radio waves, etc are all forms of electromagnetic energy which travels in waves. The wavelength of these waves is measured in a tiny unit called the Angstrom, equal to 1 ten billionth of a meter. Another unit sometimes used to measure wavelength of light waves is nanometers (nm) which are equal to 1 billionth of a meter. 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 Although some colors can be created by a single, pure wavelength, most colors are the result of a mixture of wavelengths. A French organization, the Commission International de L'Eclairage (CIE), worked in the first half of the 20th century developing a method for systematically measuring color in relation to the wavelengths they contain. This system became known as the CIE color model (or system). The model was originally developed based on the tristimulus theory of color perception. The theory is based on the fact that our eyes contain three different types of color receptors called cones. These three receptors respond differently to different wavelengths of visible light. This differential response of the three cones is measured in three variables X, Y, and Z in the CIE color model. This gives a three dimensional model which is then projected onto one plane to give a 2 dimensional graphic (See figure 3a). XYand Z are mapped to X and Y coordinates. This variation of the CIE model is seen below in Figure 3b. 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 shows the three primary colors that computer monitors use to create all the possible colors displayed. They are called the light primaries because they are created colors by mixing light sources of these colors; in this case, glowing phosphors built into the computer monitor screen.
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 This process could continue, creating a solid ring of colors spanning all of the space between the primaries. This definition of color really describes just one dimension of color: hue. Hue is described with the words we normally think of as describing color: red, purple, blue, etc. Hue is more specifically described by the dominant wavelength in models such as the CIE system. Hue is also a term which describes a dimension of color we readily experience when we look at color. It will be the first of three dimensions we use to describe color.
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 Color Mixing Interfaces used by Graphics Software A color model where colors are defined by the dimensions of Hue, Saturation, and Value becomes a useful method specifying colors to use when creating graphics. Different programs have implemented this model -- and variations on it -- in a number of different ways. One way is to slice the HSV model horizontally:
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.