Color Representations

We will look at four ways of representing color. Why four different ones? We have seen that RGB is additive color for presentation on compuer screens whereas CMYK color is subtractive for printing. We look at the relationsship between these two representations. We look at two other representations, HSL/HSV and YCbCr, that are different ways of viewing the same color space as RGB. The material described here can be found in many sources. Wikipedia has good articles on each representation with more details and good images. The images here have been taken from these Wikipedia articles.

RGB Color

Red, Green, and Blue are primary colors from which almost all other colors can be created by adding together the components, for example by projecting these three colors in different intensities. The image below shows the full primary colors and their additive combinations. The additive combinations of each pair form the

. primary colors                          sRGB gamut of colors

secondary and complementary colors yellow, magenta, cyan. These are the colors used in printing -- yellow being the absence of blue, magenta the absence of green, and cyan the absence of red. White, of course, is the combination of the three primaries.

Digital images are usually represented with 8 bits (values 0 to 255) for each color intensity for red, green, and blue. The combinations of different intensities can create a range of over 16 million colors. See the diagram in the Wikipedia RGB article for a sample of these colors -- this is sometimes called true color to distinguish it from less detailed representations, such as 16 bit RGB (5 red, 6 green, 5 blue). Very precise color representations use 16 bits per color (48 bits total), 65,535 levels per color which are far more than the human eye can distinguish. In photo processing software, it can be advantageous to use the 16 bit representation, before saving in 8 bit format for web viewing or printing.

The actual appearance of an RGB image depends on the exact hues for red, green and blue that are provided by a specific physical device. However, there is a widely accepted standard for digital images for computer displays and digital TV, sRGB. Using this standard, the images should appear the same on different devices that use it. The range or gamut of colors that can actually be displayed depends on the exact values for red, green and blue. The second image above shows the gamut of displayable colors inside the triangle with the standard red, green, blue at the corners. Colors outside the triangle cannot be accurately displayed.

There are two popular versions of RGB files: sRGB (standard RGB) is used for display of web pages and for HDTV; adobe RGB has a broader color gamut than sRGB, so it can include more saturated (brighter) colors and in quality printers can give a better range of colors. An article by photographer Bob Johnson describes the differences.


CMYK representation

CMYK means Cyan, Magenta, Yellow, Black and is the color combination used for printing. These are the three complementary colors in the RGB diagram above, plus black. The system is subtractive. For example, cyan is the absence of red and yellow is the absence of blue, so the two together are the absence of red and blue, leaving green, as in the image below. All three together form black. In printing, four inks are used because the black formed by the three colors inks CMY colorscan be muddy and not true black. Since each ink is there or not, half-toning is used. This means smaller dots with white space (from the paper) combine to give lighter colors. The three colors inks give the color sensation and black adds to the darkness of darker shades. Consequently the measure of dots per inch (dpi) used for printers does not correspond to the pixels per inch of file representations or screen representation of images. Several dots are needed to give the sence of one pixel. Because the need for half-toning to give lighter colors limits the precision of images, printers can use more inks with lighter shades of the cyan, yellow, magenta, to lessen the need for half-toning. See the magnified image of half-toning in the Wikipedia article on CMYK

The first color photographs were done in 1861 by Maxwell using three images, one with each of the primary colors (RGB) filtered out. So, for example, the red filter negative would leave the cyan image. These were then printed with the complementary colors to create the image.



HSL and HSV representations

HSL and HSV are two similar representations of the same colors as specified by the RGB space. The difference is, rather than give the intensity value for each of the three primary colors, the colors are represented by three different coordinates HSL:

(HSV is slightly different, using V for value rather than L for lightness. When L is maximum in HSL, you only have white. When V is maximum is HSV, you have maximal colors around the edge and white in the center. Both can be represented with the cylinder shown below.

HSL cylinderFor HSL, we could collapse the top and bottom of the cylinder to points, so that we have white only for maximum lightness and black only for zero lightness and the figure is a cone on an inverted cone. For HSV, we have saturated colors on the outside to white at the center for maximum value, and black only for zero value, so it would be represented by the inverted cone only.

The HSL representation is useful because it reflects a different way of looking at colors that corresponds to how we might make adjustments. The eye is more sensitive to gradations light to dark, so that is one dimension for making changes. We can change the intensity with the saturation dimension. And hue will vary the colors. These three dimensions are often the ones used for adjusting color and light in an image processing program. The controls for making the adjustments can be set up in different ways. In photoshop elements, there is a selection Enhance - Adjust Color - Adjust Hue/Saturation (control-u) that has a slider for each of these three dimensions. We are really adjusting the RGB values that will be stored, but we are doing it with adjustments that are more natural for us. The Wikipedia page on HSL/HSV has images of the cone representations and samples of other controls, as well as more technical details.

YCbCr representation

YCbCr is another different representation of the RGB space. In this case the purpose is efficient storage and transmission. It also fits the needs of of video (TV in particular) transmission. The Y represents luma component, an adjusted luminance, similar to the lightness or brightness in the HSL representation based on the intensity in all three RGB components.. The Cb and Cr components are chroma (color) components, based on the differences between the Blue and Y (Cb) and the Red and Y (Cr), from which the Green can be reconstructed. As mentioned above, the human eye is most sensitive to differences in the level of light, the luma component here, and less sensitive to the color variations. There is no simple graphic of this representation.

This representation is used for JPEG image files as well as MPEG video files. The JPEG reduces the resolution of the chroma data by a factor of two (reducing file size by a factor of 4) before other compression techniques are used. This is taking advantage of the fact that the eye is more sensitive to the light level (luma) that the color differences (chroma). Similarly, in TV transmission, the luma component is transmitted with high resolution, using high bandwidth while the chroma components are transmitted with lower resolution, and therefore use lower bandwidth. Also, this breakdown matches the old black-and-white TV signal, where the luma was all that counted, no color, so when color TV was introduced, this representation could work with both black-and-white and color TV.

A related representation of color is YPbPr. Basically, this is the same as the YCbCr representation but for an analog signal, rather than a digital. So this is the one use for TV before digital TV. More details, including variations on the exact transformations from RGB to YCbCr, can be found in the Wikipedia article on YCbCr.

How do they look?

The Wikipedia articles on the color representations each show how one scene, a barn in front of the Grand Tetons, looks for each representation. This gives a visual sense of how the same colors can be separated in different ways. Here are the different ways these are broken down, taken from Wikipedia. The original image is at the top of the first, fourth and fifth columns. The other parts are the color separations for each model.

RGB sceneCMY sceneCMYK sceneHSL scene<img src="../YCbCr scene" />

             RGB                              CMY                             CMYK                            HSL                            YCbCr

Each representation serves a different purpose, but all are useful.

RGB -- display and file storage          CMYK -- printing      HSL --  human perception and image processing controls
YCrCb -- transmission and file compression, TV