The HSV and RGB Color Models

A color model provides a visualization of the relationship of the color's components to their effect on the actual color. Several color models have been created including CIE, HLS, CMY, HSV and RGB. The latter two models are the ones discussed within this tutorial. The parameters of the HSV model are hue, saturation, value while those of RGB are red, green, blue.

The RGB color model is a cube with Red at the point (1, 0, 0), Green at (0, 1, 0) and Blue at (0, 0, 1). The gray scale in the RGB model is the diagonal line extending from (0, 0, 0) (i.e., Black) to (1, 1, 1) (i.e., White). You may see some color mixing tools using 255 as the maximum value for each color component. In turn, the values in the RGB color cube represent percentages with 1 corresponding to 100%.

The HSV color model is a hexcone that can be derived from the RGB color cube. The boundary of the hexagon, which is the base of the cone, are the six outer edges as seen in the RGB cube when looking down the gray scale from white to black. Starting with red and proceeding counterclockwise, the sequence of vertices are Red, Yellow, Green, Cyan, Blue, Magenta and back to Red. The center of the hexagon base is, in turn, the White point. The apex of the hexcone is Black and the axis of the cone is the gray scale in the RGB cube.

HSV correspond respectively to Hue, Saturation, and Value. The hues in the model are points along the boundary of the hexagon base. They are represented by the angle in degrees measured counterclockwise around the center of the base (i.e., measured from the line going from white to red). The range of hues are [0, 360] with Red = 0 and 360, Yellow = 60, Green = 120, etc.

Saturation and Value are both numbers in the range [0, 1]. Saturation measures the purity of the color where maximum purity is when saturation = 1. When saturation = 0, the color is a point on the gray scale. Thus, saturation in the HSV model measures the relative distance of a point in the model to the axis (gray scale) of the hexcone.

Value, sometimes called brightness, measures the total energy of the color (light) where maximum brightness occurs when value = 1. When value is 0, the color is black. Thus, value in the HSV model measures the relative height of a point in the model from the apex of the hexcone.

We can think of saturation and value in the RGB model, although it is not as intuitive as in the HSV model. Since saturation is the purity of the color and corresponds to the difference between the color and white, we can reduce the saturation in the RGB model by moving the color from its current location towards the gray scale. For example, we can vary the saturation of Red (i.e., change it to Pink) by changing the coordinates of the color from (1, 0, 0) to (1, 1, 1). This means in the RGB cube that the point moves along the diagonal line in the Red-White face of the cube from the Red corner point to the White corner point. This also means that equal portions of Green and Blue must be added to Red to reduce its saturation. We can change a color's value in the RGB model by moving along the line going from Black to the color's current position. For example, to reduce the value of Magenta, which is at the point (1, 0, 1), the point moves along the diagonal line in the Red-Blue face of the cube from the Magenta corner to the Black corner (0, 0, 0).