Interactive Applet

We present an interactive 3D particle animation which demonstrates the relationship between the red, green, blue (RGB) color model and the hue, saturation, value (HSV) model. The former is best visualized on a cube, the latter on a cone. Rotate and move the RGB cube in 3D, have it morph into the HSV cone and back. Click the screenshot below to open the applet in a new window.

Download

The zip file linked below contains all the 'as' and 'fla' files related to this effect:

About the RGB and HSV Color Models

A modern computer monitor makes a wide variety of colors using red, green, and blue color components, a color model which takes advantage of the three types of color receptors in the human eye.

The way the eye perceives color and the resulting mathematical description of color is a rather complex topic. The RGB color model (and the HSV model which produces the same gamut of colors) is a compromise system which, although imperfect, produces a very large proportion of the colors humans are able to see.

We should mention that there are indeed colors which we can see, but which no computer monitor is capable of producing. Perhaps this serves as a reminder to look away from our computers every once in a while to see the world!

In the RGB model, The red, green, and blue components of a color are constrained to fall between zero and some maximum value. When all components are at their maximum amount, white light is produced. If all components have an equal value less than 100%, a gray tone is produced. The colors produced by the RGB model are very naturally arranged in a cube: if the red, green, and blue components of a color are plotted along the x, y, and z axes respectively, then a specific color can be located by its coordinates in a three dimensional space.


The RGB Cube
(courtesy SharkD, Wikimedia Commons)

This RGB cube is very straightforward, but its geometry does not reveal the "colorfulness" or "darkness" of a color in a natural way. An alternate way to describe colors is with the hue, saturation and value (HSV) model. This model is usually geometrically described as a cone, where colors toward the point of the cone are dark (low value), and colors further out are brighter (higher value). Colors toward the central axis of the cone are grayer (lower saturation) than the colors located towards the outer surface of the cone (higher saturation). (We should mention, however, that saturation does not entirely coincide with human perception of "colorfulness.") Rotating around the axis of the cone changes the hue of the color. Hue can be thought of as the main descriptor of a color independent of its intensity or grayness.


The HSV Cone
(courtesy Eric Pierce, Wikimedia Commons)

It may be seem difficult to understand how the RGB and HSV models are related to each other, but they are essentially the same continuous arrangement of colors but formed into different geometric shapes. The particle-based demonstration given here makes it very easy to see the relationship. Move the slider labeled "transition" to see the colors move between their positions in each model.

Determining HSV from RGB

The RGB cube has eight vertices. One vertex is the location of black, and opposite to this is white. The edges connecting the six remaining vertices form a curve around the "grayscale diagonal" connecting black to white. The colors at these six vertices are red, yellow, green, cyan, blue, and magenta, which then connects back to red. The HSV model simply takes this connected curve of colors and reshapes it into a flat circle with white in the middle. All colors are similarly wrapped around the central grayscale axis. Hue can be thought of as the rotational position of a color with respect to this central axis. As a result, it is usually considered as an angle measurement, typically given in degrees.

The formulas for obtaining HSV from RGB are well-known. Let's summarize them here. Let R, G, B be a triple of numbers denoting the red, green, and blue components of a given color. Denote by 'Max' the largest of the three components and by 'Min' the smallest of the three components:

Max = maximum {R,G,B}

Min = minimum {R,G,B}

Value (that is, V in HSV) is easy to describe: it is simply the the largest of the R, G, B components:

Value = Max

Note that in Flash and other 16-bit color systems, the values R, G, B lie between 0 and 255, and, as a result, Value as we defined it here will also lie between 0 and 255. It is more customary, however, to scale Value to lie between 0 and 1.

Saturation (S in HSV) is also easy to compute. It is defined to be:

Saturation = (Max - Min) / Value

Note that this expression will be undefined when the value of a color is zero, which happens only for the color black. In this case we can either leave value undefined or assign it the number 0 (an arbitrary choice).

Also note that Saturation becomes zero when Max = Min, which can happen only when the red, green, and blue components of a color are all equal, which describes a gray tone. Thus, Saturation can be thought of as the opposite of "grayness".

Hue is the trickiest to compute. It is defined in cases, depending on which of the red, green, and blue components of the color is the greatest. When green is the greatest, Hue will fall between 60 and 180, and when blue is the greatest, Hue will fall between 180 and 300. When red is the greatest, Hue will be an angle falling either between 300 and 360 or between 0 and 60. The definition of Hue is as follows:

If Max = R and G ≥ B:

Hue = 60*(G - B)/(Max - Min)

If Max = R and B > G:

Hue = 300 + 60*(B - G)/(Max - Min)

If Max = G:

Hue = 120 + 60*(B - R)/(Max - Min)

If Max = B:

Hue = 240 + 60*(R - G)/(Max - Min)

As with Saturation, Hue will be undefined when Max = Min, which describes a gray tone. This makes sense as a color on the central axis does not have a well-defined rotational position about the axis. As with Saturation, we can arbitrarily assign the Hue of grayscale colors the number zero to avoid having undefined variables.

Related Particle Effects

In the animation presented here, we are using our pixel-based particle code that has appeared in our previous particle animations:

See the above tutorials for explanations of the particle code.

Back to Advanced and Experimental              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.