Developer

Examine graphic channels and space

Color space is a model for representing colors numerically. Learn about the most common color spaces and combinations of graphic channels.

By Paul Anderson

Computer images are just a collection of colored pixels on the screen. But in the binary language of computers, labels such as red or purple have no meaning. So how do computers identify colors? The answer is that every piece of visual hardware or software uses some kind of color space, a model for representing colors numerically.

The most common color space that you'll encounter is RGB, because it's the way your color monitor works. Your monitor projects various intensities of red, green, and blue light onto a screen—thus the term RGB—to produce the full range of hues and tones. RGB identifies every instance of color by three numbers, called channels. These specify the intensity of red, green, and blue as a number from 0 (dark) to 255 (full intensity).

You can combine these channels to make new colors in the same way that you would mix paints. Red and green light together make yellow; green and blue make cyan; and blue and red make violet. Pairing unequal values creates the incremental colors in between (for instance, orange is red with a bit of green).

  Red Yellow Green Cyan Blue Violet
R:
G:
B:
255
0
0
255
255
0
0
255
0
0
255
255
0
0
255
255
0
255

Color combinations such as the ones above produce pure, bright hues. Using equal values in all three channels produces neutrals ranging from black (all channels at 0) to white (all channels at 255). So color neutralizes as the RGB values approach equivalence: increasing all channels at once adds white, creating a pale tint. Reducing the strongest colors adds black, creating a dark shade. Doing both—setting all values greater than zero but below 255—adds gray and creates a muted tone.

  Red Pink
(tint)
Maroon
(shade)
Coral
(tone)
R:
G:
B:
255
0
0
255
128
128
128
0
0
200
100
100

As you get accustomed to working with RGB, you'll develop an intuitive sense of the values needed for a given color.

Other color spaces

Most graphics tools let you use HSB (hue-saturation-brightness), which follows the paint-mixing metaphor more directly. Hue is a position on a 360-degree color wheel, with red at 0, green at 120, and blue at 240. Saturation and brightness are both percentages, and when both are at 100 percent you get a pure hue. Reducing saturation toward 0 adds white, while reducing brightness adds black. CMYK defines a color by the amount of cyan, magenta, yellow, and black pigment needed to produce it on paper. CMYK is used for high-quality print work and describes colors more precisely than most monitors can even display.

Paul Anderson is associate technical editor for CNET Builder.com. His responsibilities don't include handling graphics, so naturally, he handles them all the time.

Editor's Picks