Cubes, cones, and color: Cutting through the RGB and HSV colorspaces with clarity

»  Reprinted from Jurisdynamics  «


In a previous Cardinal Lawyer post, I've confessed my obsession with the mathematics of TrueColor. On the strength of a single Google search — RGB cube — I've found two sites that have truly sharpened my understanding of the mathematics of color

RGB cubeHSV coneOne thing that has troubled me has been my lack of understanding of the mathematical relationships between the RGB (red-green-blue) and the HSV (hue-saturation-value) representations of color. The RGB colorspace is conceptually cubic. Its three axes — red, green, blue — define the colors emitted by the contemporary equivalent of the cathode ray tubes that powered color television.

The HSV colorspace is conceptually conic. It attempts to measure color in terms that humans use in perceiving and describing this phenomenon. The RGB colorspace works well for computers, but it falls short as a way of expressing the shade, brightness, or vivacity of a color.

The difficulty in translating between the RGB and HSV colorspaces is a three-dimensional variation on one of the basic problems of plane geometry that frustrated the ancients. You can't square the circle, not with rational numbers at any rate, and a fortiori you can't turn either a sphere or a cone into a cube without resort to that constant as beautiful as it is irrational, π.

Difficult, that is, till I encountered this page, which explains the relationship between the RGB and HSV colorspaces in elegant, crystal-clear terms. The line drawing atop this post summarizes the beautiful relationship between the RGB and HSV colorspaces. Connect the origin of the RGB cube with its opposite corner, and let that line represent the entire grayscale from pure black to pure white. Then all colors sharing the same value can be represented as a plane perpendicular to that so-called neutral axis. Each degree of saturation manifests itself as a cone of a certain width around that axis. And if you set the red axis to 0 and 360 degrees of a circle connecting all six of the nonblack/nonwhite vertices of the RGB cube, then hue is a wedge — half a triangular section of the HSV cone, if you will, right through the neutral axis — dialed to the specific point around that circle.

LuminanceAnd as though that were not enough, the RGB/HSV page included a quick reference to the concept of luminance, at least as applied to computer graphics. The value of this concept is that it mediates between RGB color, which is an absolute property, and the variable receptivity of the human brain to the red, green, and blue constituents of light. As defined and explained on this website, a simple mathematical formula translates raw RGB values into a scalar expression of luminance that guides graphic designers in their color choices for the benefit of readers and viewers:

Y = 0.30 R + 0.59 G + 0.11 B

where Y represents luminance and R, G, and B represent, respectively, the relative amounts of red, green, or blue. When red, green, and blue are expressed in decimal terms, R, G, and B can be computed by dividing rgb(x, y, z) values by 255. When red, green, and blue are expressed in hexadecimal terms, R, G, and B can be computed by dividing each pair in a hex triplet by FF.

ColorHex tripletLuminance
Bright ochreeeeeaa.904
The table at right explains the luminance associated with some of the colors I most frequently use in the blogs of the Jurisdynamics Network. Some of my choices, especially ochre lettering on an olive green background, fall a bit short of the ideal minimum of a .500 difference in luminance, but they come close enough to provide readable contrast.

Color is math, math color — That is all
Ye know on earth, and all ye need to know.