Hue, Saturation and Brightness

Background:

Color is a psychological / perceptual phenomenon. While it is traditional, and simpler, to speak of an object's color, it is technically incorrect to do so. An object either reflects or emits some wavelengths of light at various intensities while absorbing or not emitting other wavelengths. The wavelengths that reach a human's eye (assuming a normal visual system) can lead to the perception of the color of the object's image. So while I may talk about an object's color, remember that that is simply a shorthand way of talking about the perception of the color of the object's image on the retina. Color does not exist in the physical world.

Psychologically, colors are represented along three relatively independent dimensions: hue, saturation and brightness. Knowing the hue, saturation and brightness you can usually recreate the color. I said "usually" because colors can be influenced by other factors such as expectations, other, nearby colors and colors which you have been exposed to recently.

Hue is the dimension that most people associate with the word color. Hue is the difference between basic color names such as red, green and blue. In a color wheel, hue is represented around the circumference of the wheel. As such, it is represented by an angle specifying the location on the wheel. The angle can range from 0 (red) to 359 (also red!). In between you find the "colors" of the rainbow -- red, orange, yellow, green, blue, indigo and violet. In general, and approximately, the hue of the color is determined by the wavelength of the light. Shorter wavelengths usually appear blueish while longer wavelengths appear reddish.

Saturation is how much white light has been added. A very saturated color (e.g. a laser) has no white added to it while a very desaturated color (a pastel such as pink) has had much white added to it. Since light that appears white must have at least three dissimilar wavelengths in it (typically a shorter, a medium and a longer wavelength), desaturated colors must have multiple wavelengths in them, while highly saturated colors must only one wavelength with a large amplitude.

Brightness (or value) is exactly what its name suggests -- how bright the color appears. Brightness is associated with the amplitudes of the wavelengths in the light. In general, the higher the amplitude, the brighter the color appears.

The Activity:

This activity allows you to independently manipulate the hue, saturation and brightness of a light. (Technically that is not true -- the light does not have a hue, saturation or a brightness because those are psychological properties of your perception of the color. Rather, when you manipulate one of the sliders, an algorithm translates what an ideal model of a person would perceive into the proportion of red, green and blue light that your monitor emits.) Manipulate each of the sliders and observe how the perceived color of the patch changes.

Hue: 180

Saturation: 0.5

Brightness: 0.5