Colors as Hue, Saturation and Brightness

Describing colors using hue, saturation and brightness (also at times referred to as hue, saturation and lightness, or HSL) is a convenient way to organize differences in colors as perceived by humans. Even though color images on computer monitors are made up of varying amounts of Red, Green and Blue phosphor dots, it is at times more conceptually appropriate to discuss colors as made up of hue, saturation and brightness than as varying triplets of RGB numbers. This is because human perception sees colors in these ways and not as triplets of numbers.

 

images/hue_wheel.gif

 

If we imagine the three primary colors red, green and blue placed equally apart on a color wheel, all the other colors of the spectrum can be created by mixes between any two of the primary colors. For example, the printer's colors known as Magenta, Yellow, and Cyan are mid-way between Red and Blue, Red and Green and Blue and Green respectively.

 

This diagram is called the color wheel, and any particular spot on the wheel from 0 to 360 degrees is referred to as a hue, which specifies the specific tone of color. "Hue" differs slightly from "color" because a color can have saturation or brightness as well as a hue.

 

images/colors_saturation.gif

 

Saturation is the intensity of a hue from gray tone (no saturation) to pure, vivid color (high saturation).

 

images/colors_brightness.gif

 

Brightness is the relative lightness or darkness of a particular color, from black (no brightness) to white (full brightness). Brightness is also called Lightness in some contexts, in particular in SQL queries. See the Raster Extensions topic.

 

images/HSB_eg.gif

 

The illustration above shows the difference between saturation and brightness. We first pick a blue hue from the color wheel (stretched out into a line to make a prettier illustration). We can then reduce the saturation so that the blue hue becomes more and more blue gray. With zero saturation it is gray. We pick a less saturated blue tone and then turn the brightness up and down on that tone.

 

Note that increasing the brightness is not the same as decreasing saturation. Decreasing saturation turns the colors into gray shades. Increasing brightness turns a blue into a lighter sky blue but without making it gray.

 

Taking an almost totally desaturated blue, so desaturated it is almost perfectly gray, and increasing the brightness will result in what appear to be lighter shades of gray. However, if there is any "blue" at all in the gray by increasing saturation we can achieve a bright blue again.

 

images/bronze.gif images/bronze_sat.gif

 

This is why increasing saturation to a great degree in ordinary photographs will at times bring out unexpected, bright, vivid, posterized color effects. What has happened in such cases is that some "gray" pixels were not truly neutral grays but rather were desaturated hues. Increasing saturation to 100% saturation brings out the hidden hues.

 

Numeric Definitions

 

Hue, saturation and lightness (brightness) are computed from raw R, G and B channel values scaled into a range of 0 to 255 according to the following formulae:

 

 

 

 

Luma, for historical reasons referred to as intensity is computed according to the following formula: