

As discussed on the Light page, light has three characteristics: hue, saturation and lightness. Hue and saturation together make up color. Lightness is also referred to as brightness. Lightness is further discussed on the Tone page.
Figure 1. Color wheel depicting the various color ranges of hue
Hue, in the simplest sense, is where a color falls on the color wheel (Figure 1). When describing hue, we use terms like green or reddish-yellow. For example, the hue of a light blue sweater is blue. Words like green and reddish-yellow describe a color range.
Saturation is how pure hue is. The saturation 'range' goes from vivid to dull to grayscale (the absence of hue). A hue that is 100% saturated would be vivid. As the hue is desaturated, it will become duller and if further desaturated, it will eventually become grayscale. Using the sweater example, if the sweater is pure blue, then it is a saturated blue. If the blue has some yellow in it, then it is of lower saturation because yellow is the color opposite of blue and will cause the blue to be less saturated.
Color ranges and color channels are not the same thing. Color range
is how we describe hue. Color range is what we see on our monitor and our
prints.
Color channels are where color and luminance information are
digitally stored.
The three primary colors of red,
green and blue can be combined in many different ways to create millions of
colors. Therefore, if a color were to be decomposed into its red, green
and blue components, then millions of colors can be digitally defined using
just these three components. Storing colors as three individual components of red, green and blue is
the basis of the RGB
color model. These individual components are called color channels.
In the RGB color model, each pixel
has three color channels. One for the red component. One for green.
And one for blue. The visible color of the pixel is determined by
combining the information in all three color channels.
Table 1 below shows a symbolic representation of a pixel and its three color
channels. Each slice of the pixel represents a single color channel.
If a slice is gray, there is no data in that channel. If a slice
is solid black, that channel's data is at 0% luminance. If a channel
is solid white, its data is at 100% luminance.
Table 1. Digital Color Channels and Ranges
| What the Computer Stores | Color Channel Description | What the Computer Displays | Color Range Description |
![]() |
If a pixel is pure red, then the red channel will have information but the green and blue channels will not. | ![]() |
Red |
![]() |
Cyan is a combination of green and blue. Therefore, pure cyan will have data in the green and blue channels but none in the red channel. | ![]() |
Cyan |
![]() |
Magenta is a combination of red and blue. Therefore, pure magenta will have data in the red and blue channels but none in the green channel. | ![]() |
Magenta |
![]() |
Yellow is a combination of red and green. Therefore, pure yellow will have data in the red and green channels but none in the blue channel. | ![]() |
Yellow |
![]() |
Violet has a lot of blue, some red and a little green. | ![]() |
Violet falls into the blue-magenta color range. |
![]() |
A solid black pixel still has red, green and blue channels, but each channel has 0% luminance. | ![]() |
Black is not a color. It is 0% luminance. Therefore, black does not have a color range. |
![]() |
When each channel has the exact same amount of information, then the result is a grayscale pixel. | ![]() |
Neutral grays do not possess color, only luminance. Therefore, neutral grays do not have a color range. |
![]() |
A solid white pixel still has red, green and blue channels, but each channel is at 100% luminance. | ![]() |
White is not a color, it is maximum luminance. Therefore, white does not have a color range. |
![]() |
The absence of data is not black. The absence of all data is transparency. | ![]() |
Full transparency, of course, does not have a color range. |
Copyright © 2004-2009 Thomas Zuber. All rights reserved. Accessibility | Terms of Use | Contact Us | Legal Information | Privacy Policy | W3C Validation Service