5.3 Relating HSV to RGB

To better understand the HSV and RGB colorspaces, it helps to understand their relationship. A very useful exercise is to identify the parts of the RGB cube that correspond to surfaces of constant hue, saturation, and value.

We begin by better defining brightness.   This term was introduced in the previous section, and it is a measure of the visual perception of how much light an area is emitting. A lamp with a variable control switch allows the level of brightness to be changed. Turning the lamp up increases our perception of brightness. Note that the notion of brightness does not depend on the color of the light. It makes as much sense to talk about the brightness of a red lamp as it does a white one.

A color monitor is just a collection of thousands of lamps (that is, pixels) that emit red, green, and blue light. Because each of the lamps can be independently controlled, the total brightness of an area on the monitor is the sum of brightness from each color. Colors of equal brightness in the RGB cube, then, are those whose three color components sum to the same value. For a particular level of brightness, this represents a plane perpendicular to the neutral axis (that is, $R+G+B=\mbox{constant}$). Figure 5.5

  

Figure 5.5: Planes of Constant Brightness in the RGB Cube

shows three examples of planes perpendicular to the neutral axis in the RGB cube. The cube in Figure 5.5(a) shows the darkest plane, the cube in Figure 5.5(c) the lightest, and the cube in Figure 5.5(b) a plane of intermediate brightness. Note how the colors in each plane seem about equally bright. The three cubes in the figure show color planes at 25, 50, and 75% brightness. Pure white and pure black have a brightness of be 0% and 100%, respectively, and consist of single points in the cube.

There are many concepts closely related to brightness and that have various useful properties. Brightness is formally defined to be (R+G+B)/3; it is a physical property of color and does not correspond well to human color perception. For this reason, brightness is not actually used in the GIMP. However, the GIMP does use

• lightness, $L=[\max(R,G,B)+\min(R,G,B)]/2$,
• value, $V=\max(R,G,B)$, and
• luminance, Y=0.30 R + 0.59 G + 0.11 B.

Luminance       is the representation of brightness that corresponds best to human perception because the weightings 0.30, 0.59, and 0.11 most closely match the sensitivity of the eye to red, green, and blue.

Figure 5.6

  

Figure 5.6: Different Projections Onto the Neutral Axis

shows how the different definitions for brightness project onto the neutral axis. The figure shows the position in the RGB cube of a representative color, 220^R 60^G 120^B, and the locations on the neutral axis corresponding to the value, V, the lightness, L, and the luminance, Y. As can be seen from Figure 5.6, value is the brightest. The luminance and the lightness are variable and either one can be the darkest depending on the choice of the RGB triple.

Next, we define saturation.   The definition of saturation is related to that of brightness. Saturation is the relative colorfulness of an area with respect to its brightness. What is colorfulness? An answer can be given in the context of the RGB cube and the neutral axis. As already noted, the neutral axis is the diagonal in the cube going from 0^R 0^G 0^B to 255^R 255^G 255^B, and which consists of black, white, and the grayscale between them. Thus, in the usual sense, this axis has no color (that is, hue). The colorfulness of any point in the RGB cube, then, is proportional to its perpendicular distance to the neutral axis. Points closer to the axis are less colorful (that is, closer to gray) and those that are further away are more colorful. The saturation, then, of a point in the RGB cube is the ratio of its colorfulness to its brightness.

This means that surfaces of constant saturation in the RGB cube are cones centered around the neutral axis. Figure 5.7

  

Figure 5.7: Cones of Constant Saturation in the RGB Cube

shows two instances of the RGB cube. The cube in Figure 5.7(a) shows the cone corresponding to 20% saturation and that in Figure 5.7(b) to 70% saturation. Note that the colors on the rightmost cone seem more vivid because they are more saturated. The colors of the leftmost cone are much paler because their colors are more relatively neutral. When a color is more neutral we call it pastel.

Finally, the definition of hue   is related to what we colloquially think of as color. The hue of a point in the RGB cube is defined to be its angular position around the neutral axis. Looking at the corners of the RGB cube shown in Figure 5.2, you can see that red, yellow, green, cyan, blue, and magenta are distributed equally in angle around the neutral axis. Thus, the wedge defined by the neutral axis and any point on the surface of the cube is a plane of constant hue.

Figure 5.8

  

Figure 5.8: Wedges of Constant Hue in the RGB Cube

illustrates three instances of the RGB cube with different wedges of constant hue. Because hue is a function of angle, its range is from 0 to 360 degrees. The red corner of the cube is defined to be the hue at 0, which, forcibly, is also the hue at 360. This hue is shown in Figure 5.8(b). The cube in Figure 5.8(a) shows a hue of 330, which is purple, and that in Figure 5.8(c) a hue of 30, which is orange. Note that although the hue of each wedge is constant, the brightness and saturation vary over the range of possible values.

Figure 5.9

  

Figure 5.9: The HSV Coordinates in the RGB Color Cube

summarizes the relationship between RGB and HSV. Although, the neutral axis represents brightness and not value, I will often abuse this notion and refer to it as the value axis. The model shown in Figure 5.9 will be useful for understanding the explanations of the color blending modes described later in this chapter.

With the HSV coordinate system in mind several observations can be made about regions of color in the RGB cube. The first is that the cyan, magenta, and yellow vertices of the cube represent brighter colors than red, green, and blue because these latter project lower down onto the neutral axis. Similarly, all colors in the pyramid defined by the C, Y, M, and W vertices correspond to lighter colors, and the pyramid defined by the origin and the R, G, and B vertices correspond to darker colors. Colors near the neutral axis in the cube will have a more pastel or washed out look because they are less saturated, and colors further away from this axis will appear more vivid.

©2000 Gimp-Savvy.com