UNDERSTANDING COLOR

By John C. Lee
(johnclee@gte.net--12/3/2001)
Introduction

This article consists of two parts. Part I covers a brief discussion of the two most common color models--the Additive
(transmitted) color model used in TV or monitor display and the Subtractive (reflective) color model used for printing.
Some of the material for Part I is taken from www.graphicssoft.about.com/gi/dynamic/offsite.htm. Part II of the article
is entirely directed to a discussion of the color models (RGB and HSB) used in monitor display and their correlations,
as well as the color editing tools used in Ulead PhotoImpact 6 editing software for adjusting brightness and contrast;
hue, saturation and brightness of photos.

Part I-Color Models for Monitor Displays and Printers

Additive vs. Subtractive Color Model

There are several established color models used in computer graphics, but the two most common are the Additive RGB
model for TV and computer display and the Subtractive CMYK model (Cyan-Magenta-Yellow-blacK) for printing.

Additive colors are created by mixing spectral light in varying combinations. The most common examples of this are
television screens and computer monitors, which produce colored pixels by firing red, green, and blue electron guns at
phosphors on the television or monitor screen. More precisely, additive color is produced by any combination of solid
spectral colors that are optically mixed by being placed closely together, or by being presented in very rapid succession.
Under these circumstances, two or more colors placed in the pixel may be perceived as another single color.

Subtractive colors are seen when pigments in an object absorb

certain wavelengths of white light while reflecting the rest. Any
colored object, whether natural or man-made, absorbs some
wavelengths of light and reflects or transmits others; the
wavelengths left in the reflected/transmitted light make up the
color we see. This is the nature of color print production and
cyan, magenta, and yellow, as used in four-color process printing,
are considered to be the subtractive primaries.
Figure 1: Subtractive Colors for Printing
The CMY model used in printing lays down overlapping layers of
varying percentages of transparent cyan, magenta, and yellow inks. Light is transmitted through the inks and reflects
off the surface below them (called the substrate-usually white paper). The percentages of CMY ink (which are applied
as screens of halftone dots), subtract inverse percentages of RGB from the reflected light so that we see a particular
color.

Figure 2: RGB Color Model Figure 3: CMYK Color Model

Additive color model Subtractive color model

For computer displays For printed material
Uses light to display color Uses ink to display color
Colors result from transmitted light Colors result from reflected light
Red+Green+Blue=White Cyan+Magenta+Yellow=Black

1
The above two charts show the color display of the two models. Notice the centers of the two color charts. In the RGB
model, the convergence of the three primary additive colors produces white. In the CMYK model, the convergence of
the three primary subtractive colors produces black.

Since additive color models display color as a result of light being transmitted (added) the total absence of light would
be perceived as black. On the other hand, subtractive color models display color as a result of light being absorbed
(subtracted) by the printing inks. As more ink is added, less and less light is reflected, which finally would be seen as
black. Where there is a total absence of ink, the resulting light being reflected (from a white surface) would be
perceived as white.

In the RGB model notice that the overlapping of additive colors (red, green and blue) results in subtractive colors
(cyan, magenta and yellow). In the CMYK model notice that the overlapping of subtractive colors (cyan, magenta and
yellow) results in additive colors (red, green and blue).

Also notice that the colors in the RGB model are much brighter than the colors in the CMYK model. It is possible to
attain a much larger percentage of the visible spectrum with the RGB model. That is because the RGB model uses
transmitted light while the CMYK model uses reflected light. Furthermore, the color range (called gamut) of the
CMYK model is substantially narrower than that of the RGB model. A discussion of the color gamut can be found in
above-mentioned URL. The muted appearance of the CMYK model demonstrates the limitation of printing inks and
the nature of reflected light.

The gamut or color range varies a great deal with the display or printing devices. For instance, a Sony Trinitron
monitor has a wider gamut range and displays more brilliant pictures than conventional monitors. So do the Photo
Quality printers, which print more vivid pictures than low-grade printers. Quality of the paper has also a bearing on the
gamut range. Premium glossy photo paper gives a much better transmittance and reflectance of light and hence more
brilliant printouts than plain paper.

Due to imperfections in the inks and other limitations of the process, full and equal absorption of the light isn't possible;
thus a true black or true grays cannot be created by mixing the three CMY inks in equal proportions. The actual result
of doing so results in a muddy brown color. In order to boost grays and shadows, and provide a genuine black, printers
resort to adding black ink, indicated as K. Thus the practical application of the CMY color model is the four-color
CMYK process.

When printed on paper, the screens of the three transparent inks are positioned in a controlled halftone dot pattern
called a rosette. To the naked eye, the appearance is of a continuous tone, but when examined closely, the dots become
apparent. This process was created to print continuous tone color images like photographs. Unlike solid colors, the
halftone dot for each screen in these images varies in size and continuity according to the image's tonal range.
However, the images are still made up of superimposed screens of cyan, magenta, yellow, and black inks arranged in
rosettes. For more information on Halftones for Printing, go to
Http://www.adobe.com/support/techguides/printpublishing/scanning/psscannin.html.

Though CMYK printing is chiefly regarded as a model of subtractive colors, it is also an additive model in a certain
sense. The arrangement of cyan, magenta, yellow, and black dots appear to the human eye as colors because of an
optical illusion-we can't distinguish the separate dots at normal viewing size so we perceive colors, which are an
additive mixture of the varying amounts of the CMYK inks on any portion of the image surface.

Part II-Color Models for Monitor Displays

Color Depth
Since each of the primary colors (RGB) can be projected to each pixel on the computer screen in varying degrees, there
is no need to use the halftones for color display as is done in printing process. The number of colors that can be
displayed on each pixel is expressed by the Color Depth, which is defined as the number of bits per pixel that can be
displayed on a computer screen. Color depth is usually categorized in two modes--grayscale mode (including black &
white) and color mode. Grayscale mode utilizes varying degrees of black and white instead of RGB colors, and covers
a range up to 256 (8 bits) grayscales. For the color mode, the number of displayable colors is limited only by the
capabilities of the monitor screen and the video card. Color depths (under 8 bits) employing distinct selective colors
are classified as Indexed Colors. On the other hand, true color mode involves a more continuous spectrum of colors.
Picture format GIF uses the 8-bit indexed color mode, while JPG format employs true color. Examples of color depth
are shown in the following table:

2
 Color Depth No. of Grayscales or Colors Color Mode
1 bit black & white 2 Black & White
4 bit grayscale or color 16 Grayscale or Indexed Color
8 bit grayscale or color 256 Grayscale or Indexed Color
24 bit color 16,777,216 True Color

Since each bit represents 2 colors (0 and 1), it is easy to figure out the number of grayscales or colors for the various
color depths. The number of possible grayscales or colors would be 2 to the power of the number of bits per pixel:
A color depth of 4 bits would be 2 times itself 4 times, which is equal to 24 = 16 colors
A color depth of 8 bits would be 2 times itself 8 times, which is equal to 28 = 256 colors.
A color depth of 24 bits would be 2 times itself 24 times, which is equal to 224 = 16,777,216 colors.
For a 24-bit color depth, each of the three color-components (red, green and blue) would have 8-bit (256) variations,
thus giving a total variation of 28x28x28=224. Since the 24-bit color depth is commonly used for monitor display, the 8-
bit representation for each color-component is accepted as a standard color intensity measure, even for color depths
other than 24-bit.

A photograph with 2048x1360 pixel resolution will take up 66,846,720 bits of file size at a 24-bit color depth
(8,355,840 Bytes or 8.160 MB). The sheer size of the memory required necessitates the use of file compression for
high-resolution digital cameras. A compression of 7 or 8 using the JPG format is usually incorporated in these
cameras.

R-G-B Color Model

The two methods of representing color on the monitor display are RGB (Red-Green-Blue) and HSB (Hue-Saturation-
Brightness) models. In the first model, each of the three primary colors (red, green or blue) has 256 variations. Colors
are represented by varying intensities of red, green and blue light. The intensity of each of the red, green and blue
components is represented on a scale from 0 to 255 with 0 being the least intensity (no light emitted) to 255 (maximum
intensity). As mentioned in the above, 8-bit (256) variation is used as a standard color intensity measure for all color
depths.
Pure Colors (or Hues)
As shown in Figure 2, when two adjacent primary colors are combined, a new color is formed and the color will vary
according to the mixing ratio of the two primary colors. Thus mixing equal amounts of red and green will give yellow;
equal amounts of green and blue will give cyan and equal amounts of blue and red will give magenta. Figure 4 shows a
spectrum of colors known as Hues or Saturated Colors (arranged in cylindrical coordinate) formed by mixing varying
amounts of two adjacent primary colors. I like to call them Pure Colors, because they are the basic colors, not yet
diluted with white or/and black colors. Hues are expressed in degrees around the color wheel. In this article, pure
colors and hues will be used synonymously.

Figure 5 shows a linear plot of the amounts of primary color components (in R-G-B scales) versus the pure color (hue)
spectrum. With a hue of 60o (pure yellow color), the corresponding RGB components will be R255, G255, B0. With a
hue of 30o (reddish yellow), the corresponding RGB components will be R255, G127, B0. For pure colors, it is easy to
relate the RGB values with respect to hues from the plot shown in Figure 5. It is significant to note that any pure color
must have one of the components equal to zero, and must have one or two of the components equal to 255. If none of
the components is equal to zero, or none of the components is equal to 255, then it is a real or true color, which is a
mixture of the pure color with white or/and black color.

3
H-S-B Color Model
H-S-B color model is a more versatile color representation than the R-G-B model, and is widely used in photo-editing
programs. It is predicated on the principle that every real color originates from a single pure color (H), which is then
mixed with various amount of white or/and black color to give various shades of that pure color. The HSB color chart
shown in Figure 6 illustrates this point.

Figure 6: HSB Color Chart

Position R G B H S B
(1) 255 255 0 60 100 100
(2) 255 255 128 60 50 100 Figure 7: 3-Dimensional HSB Color Chart
(3) 255 255 255 60 0 100
(4) 128 128 0 60 100 50
(5) 0 0 0 60 100 0 The chart consists of a square color palette on the left and next
(A) 191 191 96 60 50 75
(B) 128 128 128 60 0 50
to it a narrow vertical strip palette, which is similar to the
horizontal color strip shown on the abscissa of Figure 5. The
vertical strip displays a gradual variation of the pure color or
Hue (H) from red at the bottom (H=0) to red at the top (H=360o). The square palette displays a color spectrum of
various shades for the pure color pointed by the arrow in the vertical strip palette. The horizontal axis denotes the
Saturation (S), which is defined as the amount of pure color mixed with the white color. At position 1, the mixture is
100% pure color (S=100%) and at position 3, it is 100% white and 0% pure color (S=0). The vertical axis denotes the
Brightness (B), which is defined as the amount of pure color mixed with the black color, with 0% of pure color (B=0)
at position 5. Any position inside the square palette would indicate a mixture of the pure color with both white and
black.

In the chart shown, yellow color is selected with the arrow pointing at H=60o on the strip palette, and the square palette
displays the various shades of yellow. It starts with a pure yellow color at position 1 (S=100%, B=100%). As the
circle moves horizontally to the left, the shade of the yellow color gradually lightens up with the mixing of white color.
At position 2, the mixture attains 50% of white and 50% of pure yellow (S=50%). Finally at position 3, it reaches
100% white and 0% of pure yellow (S=0).

On the other hand, moving the circle vertically downward from position 1 exhibits a darkening effect with the mixing
of black. The pure yellow at position 1 gradually turns to gold, dark gold at position 4 (B=50%), and finally to black at
position 5 (B=0). The table shown below the chart lists the RGB and HSB values for the positions shown in the chart.
Points A and B are shown here for reference.

Figure 7 shows a 3-dimensional HSB color chart that is essentially a compilation of 2-dimensional charts for various
pure colors (such as shown in Figure 6) stacked up along the H-axis. Only 7 basic pure colors are shown in Figure 7.
However, to be precise, the chart should display a continuous spectrum of all the pure colors from H=0o to H=360o
along the H-axis. Any real or true color can be represented by a point located inside this chart. For instance, in a
picture with a resolution of 320x240, there will be 76,800 colored pixels. Each of these pixels will have its own H, S,
and B values and will be represented by a point inside the chart. In photo-editing, it will be helpful to trace the trend of

4
movements of these color points with adjustments of color balancing, brightness and contrast and other editing
functions.

Note that when you scroll the mouse pointer close to the axes of B=0 and S=0 in Figure 6, you may find that H value
abruptly changes to zero or some value different from the original H value. This is because a point on these axes can
have any H value (from zero to 360 as shown in Figure 7), and the H value tends to be unstable close to these two axes.
But as soon as you move away from these unstable regions, H returns to its original value.

Correlation Between the Two Color Models

It is relatively easy to convert the HSB values to RGB values. Take an example of a real color with H271 S35 B64.
The procedure for the conversion is as follows:

(1) The first step is to determine the RGB values of the pure color H=271o, which is between Blue and
Magenta with B=255 and G=0 as shown in Figure 5. Then R=255x(31/60)=132.
Resultant values for the pure color are R132 G0 B255.
(2) Saturation S=35% means that 35% of pure color R132 G0 B255 is mixed with 65% of white color R255
G255 B255. This gives R=(0.35x132)+(0.65x255)=212, G=0+(0.65x255)=166 and
B=(0.35x255)+(0.65x255)=255.
Resultant values after mixing with white are R212 G166 B255.
(3) If Brightness were 100%, the RGB values would be R212 G166 B255. But B=64% which means 36% of
the content is black color with R0 G0 B0. Only 64% of the above RGB values are available. Therefore
R=0.64x212=136, G=0.64x166=106 and B=0.64x255=163.
Resultant values after mixing with black are R136 G106 B163, which are the corresponding RGB values
for H271 S35 B64.

To convert RGB to HSB values is somewhat more involved. Let us take the same example of R136 G106 B163. The
procedure is as follows:

(1) First split the RGB into two separate parts, with one containing white or gray (equal values of RGB) and
the other having one or two of the three components equal to zero. In this case, the two mixtures will be
R106 G106 B106 (gray) and R30 G0 B57.
(2) The first (gray) part is a mixture of black and white. It contains 106/255=0.412 black. The second part is a
mixture of black (R0 G0 B0) and pure color (R=30x255/57=134, G0 and B=255). It contains
57/255=0.224 black. The total fraction of black=0.412+0.224=0.64.
The results are: Pure color=R134 G0 B255, and B=0.64
(3) From Figure 5, the value of H can be determined for R134 G0 B255. Thus H=271o.
(4) Now divide the original values of RGB (R136 G106 B163) by the 0.64 to shift the color point vertically up
to the S-axis. This point on the S-axis will be R212 G166 B255 and is a mixture of white (R255 G255
B255) and the pure color R134 G0 B255.
(5) Taking the ratio of the G components 166/255=0.65 we obtain the fraction of white color in the mixture.
Hence the fraction of pure color =0.35 (S=0.35).
(6) The final results are H271o S35% B64% which correspond to R136 G106 B163

The conversion from one color model to the other is not as straightforward as one would expect, and involves some
arithmetic manipulation as shown in the above procedure. However most photo-editing programs have built-in
correlations and show simultaneously both HSB and RGB values.

A general interpretation of the color can usually be obtained by looking at the relative values of RGB components. For
instance, take the color R136 G106 B163, we can see that the least component is G, therefore, from the above
interpretation, the pure color must be a mixture of R and B (R<B), and H must be between 240o and 300o.

Photo-Editing/Brightness & Contrast

Pictures taken by digital cameras under low lighting condition are often under-exposed, because of their relatively
narrow exposure latitude. But the saving remedy is that you can use the Brightness and Contrast tools in photo-editing
programs to enhance the picture quality. First we will discuss how these two tools affect the color change of a single
pixel in the picture. However the process applies equally well for all the pixels contained in the picture.

Figure 8 shows a HSB color chart for H=0 (red) with 5 different pixel locations of different S and B values (different
amounts of white and black colors). When we change the brightness of the pixels shown in the chart, we notice that the
S and B values of these pixels change, but the H values remain the same (at H=0 for red). Solid curves show the paths

5
of color change of these pixels with increasing brightness. At first they move toward the B=100% axis by shedding
their black contents and adding white contents. When they reach the B=100% axis, they turn toward 100% white (S=0
and B=100%), and finally all the pixels assume white color.

Figure 9: Color Change with Contrast

Figure 8: Color Change with Brightness
Adjustments
Adjustments

With decreasing brightness, shown by the dotted curves of Figure 8, the paths move toward S=100% axis by shedding
the white and adding the black contents. Then they turn toward B=0 and S=100% (100% black), after reaching the
S=100% axis.

The overall trend with the brightness adjustment indicates that the spread of color shades tends to become narrower and
narrower with adjustment and the color of the picture tends to look more subdued or washed-out with loss of contrast as
shown in Figures 10. Hence in correcting under-exposed pictures, it usually requires a two-step procedure consisting
of an increase in brightness followed by an increase in contrast (to be discussed later in this section).

It is worth noting that moderate brightness or contrast adjustments are reversible, which means that reversing the
adjustment can restore the original picture. However, if the adjustments are carried out far enough, some or all of the
pixels may reach into the unstable region (as described in the previous section) and assume different H values and
cannot recover the original values, in which case the original picture cannot be restored.

The contrast adjustment also affects changes of S and B while maintaining constant H values. Figure 9 shows the paths
traced by different pixels for a pure color, H=200o (Blue>Green). With decreasing contrast as shown by the dotted
lines, they all converge to a single location of S=0 and B=50% (50% gray), and the picture color turns increasingly
gray, as the contrast is decreased. But as the contrast is increased, the paths diverge out as shown by the solid curves.
The brighter colored pixels (B>50%) move either toward pure color (S=100% and B=100%) or toward 100% white,
and the darker colored pixels (B<50%) move toward S=100% axis and then to B=0. This results in a picture with high
contrast between white, black and pure colors as shown in Figures 11. The increase in contrast tends to compensate the
washed-out effect with the increase in brightness. This is the reason why a two-step adjustment of brightness as well as
contrast is usually needed in editing under-exposed photos.

6
Photo-Editing/Hue, Saturation & Brightness
Hue Adjustment

Hue, Saturation and Brightness functions are three powerful tools for correcting color anomalies. Hue function is the
only tool that can adjust the pure colors of the picture, while retaining constant saturation and brightness values. Three
methods are available for hue adjustment-Master, Range and Colorize. The Master method changes the hues of all the
pixels contained in the picture by an equal amount as selected in the Hue adjustment bar, shown in Figure 12.

Figure 12: Hue Adjustments-Master Method Figure 13: Hue Adjustments-Range Method

Two pure-color strips are shown at the bottom of the figure. The upper strip represents the reference pure color
spectrum, while the lower strip shows the changes with hue adjustment. In this case, the selected hue adjustment is
+16o; so all the colors will shift +16o in the lower strip. This is equivalent to taking the Pure Color Wheel shown in
Figure 4 and rotating it counter-clockwise by 16 degrees. Thus a hue of 0o becomes 16o, a hue of 60o becomes 76o, a
hue of 120o becomes 136o, and so on. The Master method of hue adjustment is often used in correcting for the reddish
skin color of a picture taken under tungsten lighting, such as the one shown at the left. The right picture shows more
natural skin color after a 16o hue adjustment.

The Range method is used when you only want to change a limited range of hues instead of the entire spectrum. Four
movable buttons are placed between the two color strips, and can be moved to cover the range of hues you want to
adjust. As shown in Figure 13, the hue adjustment is 21o, so only the hues inside the selected range undergo the change
of 21o, whereas all the other hues outside the range stay the same. The two pictures at the top of the figure show the
change before and after the hue adjustment.

7
 In the Colorize method, all the hues are converted to a
single hue as shown in Figure 14. For some unknown
reason, the selected hue adjustment of 20o actually
turns out to be H=200o, and hue adjustment of 0 is
actually 180o. You can convert a colored picture into
a monochrome color (not black and white) picture by
using the Colorize method as shown in the figure.

Figure 14: Saturation & Brightness Adjustments

Figure 15: Hue Adjustments-Colorize Method

Saturation and Brightness Adjustments

Saturation and Brightness tools used here perform somewhat similar functions to the Contrast and Brightness tools
scribed in the previous section, although the algorithm for the paths traced by the pixels is different as shown in Figure
15 for H=60o. The paths for the decreasing saturation (in white dotted curves) do not converge to a single point of gray
color as with the contrast tool. They terminate at the S=0 axis with various B values, and hence the original color
picture becomes converted into a black-and-white picture at –100% saturation as shown in Figure 16. By the same
token with increasing saturation, the paths do not diverge to white, black and pure colors. They terminate at the
S=100% or/and at B=100%, and hence the picture looks richer in colors and more smoothly blended than that obtained
with the contrast tool. In some cases, the saturation tool might offer a better solution than the contrast tool as you can
see by comparing Figure 16 with Figure 11.

Figure 15 also shows the paths traced by the pixels with increasing brightness (in red solid curves) and with decreasing
brightness (in red dotted curves). With increasing brightness, they converge directly toward the white at S=0 and
B=100%; and with decreasing brightness, they drop down almost vertically to the B=0 (black) axis. Hence the HSB
brightness tool exerts more pronounced effect and reaches white or black more quickly with changes than the
brightness tool does (described in the previous section), as you can see by comparing Figure 17 with Figure 10.

8
.