Accurately describing colors can be quite a problem. Several different methods to describe color have been created. Three of the most common ways of describing color are:
- RGB-Red Green Blue
- HSL-Hue Saturation Luminence
- CMY-Cyan Magenta Yellow
- More on HSL and human perception of color
RGB
Of the three RGB is the most straight forward. RGB-as it's name suggests- describes a color by describing how much of each of the primaries are present. Blue would be described as R-0 G-0 B-100%. magenta which is red and blue would be described as R-100% G-0 B-100%. With more complex colors it gets more complicated. Take this violet as an example:
This has all three colors in it but none at full intensity. The RGB values are R-71% G-24% B-82%.
HSL
Hue Saturation Luminance is the most intuitive of the three. Conceived in 1933 by the Commission International de L'Eclairage, Hue Saturation Luminance(HSL), or CIE as it was first coined, uses three variables which relate very closely to human perception of color. If you can imagine a cylinder that contains all colors in the spectrum. Hue (see the definition of hue) is described as an angle e.g. if Red (R-100% R-0% B-0%) was at 0 degrees then cyan-the opposite of red-would be at 180 degrees or exactly across from red. So as you move around the perimeter of the circle hue changes. See the picture below which represents a cross section of the middle of the imaginary HSL cylinder.
Hue alone cannot accurately describe a color so in addition to hue, luminance (see definition of luminance) is used. In the cylinder model luminance is the vertical (Z) component increasing from 0% at the bottom of the cylinder to 100% at the top. The pictures below represent cross sections of the cylinder from bottom to top starting with 0% luminance, then 25%, 50%, 75% and finally 100% luminance. Notice that the 0% and 100% luminance are black and white respectively. Colors wash out as luminance increases and colors darken as luminance decreases.
Bottom-Luminance=0% 1/4 Height- Luminance=25%
Middle- Luminance=50% 3/4 Height- Luminance=75%
Top-Luminance=100% Saturation (see definition for saturation) is the third variable used to describe color. Keeping with our HSL cylinder model the saturation of a particular hue increases as you travel along radii from the center to the edge in the HSL cylinder. See below to see how HSL becomes inaccurate in real world situations.
When working with RGB, we increase the intensity of the blue light if we want our image to be more blue. If the blue value is already at 100% then the image cannot contain any more blue. But if we are working with CMY, we subtract yellow to achieve a bluer image. This is because yellow reflects red, and green light and absorbs blue light. By removing yellow, less blue light will be absorbed and more blue light will be reflected resulting in a bluer image.
Another example is the concept of black and white. White is the presence of all color and is obtained by adding red, green, and blue. Black on the other hand is the absence of all color and is obtained by combining cyan, magenta and yellow. Because cyan absorbs red, magenta absorbs green, and yellow absorbs blue, we are left with black. This is demonstrated by the two pictures below. Looking at the middle where all three combine we can see that RGB yields white and CMY yields black. See Subtractive vs. Additive Color for a bit mor on CMY
This example shows how the cylinder model of HSL differs with how color acts in the real world. These differences are due to how humans perceive color.
Color has three basic properties - hue, brightness, and saturation. Their relationship to each other can only be viewed accurately in three dimensions as shown above in the CIE L*a*b* color space. Here, hue changes along the perimeter. A piece of the color space is missing so that we can see how saturation changes from gray in the middle to full saturation on the exterior and how brightness changes from white at the top to black at the bottom. Notice that the color space is wider at the top due to the fact that we can see a much wider range of bright hues than dark hues.
Each color reaches its maximum saturation point at a different level of brightness. We can see at (A) that lime green reaches maximum saturation only when it is very bright and at (B) that blue is saturated at a much darker level in the color space.
The color space is able to map all colors visible to the human eye. A cylindrical section has been removed to show the full range of color. On the right, this section has been collapsed into a two dimensional image to show saturation. Through two dimensional mapping, we can see where the ranges of colors overlap. It can be difficult to match colors produced by different devices and processes because ranges can vary by quite a lot. See CMY vs. CMYK for more information on matching color between different devices.
| Home | Basics | Definitions | RGB vs CMY | Color Descriptions | Color Devices| Links |
