Learn more: color tutor demonstration exercises

These exercises use the Color Tutor demonstration (preceding page) to let you learn at your own pace more about the two color systems that are most important to Web developers: RGB and HSL. You will also learn to use it as a tool to develop foreground/background color combinations and to ensure that these combinations have sufficient color contrast to meet accessibility requirements.

Although we've used the acronym HSB (Hue, Saturation, Brightness) on an earlier page, we're calling it HSL (Lightness) here since that's the way it's defined in CSS.

To get the maximum benefit from these exercises, we recommend that you first read the tutorial pages in order, starting from the Home page, if you haven't already done so. These include a number of color systems in addition to RGB and HSB/HSL, and will give you more background on why each is important.

If you're following the exercises by yourself, you will probably want to print this page unless you have enough screen real estate for two simultaneous pages. Better would be to do it with a friend, working together from two screens. An instructor might simply demonstrate it to the class with a projector.

One important concept to notice as you do these exercises is that none of the scales (R,G,B,H,S,L) behave in a linear fashion—that is, changes at one end of the scale are less effective than at the opposite end. Even Hue, which should be a simple progression degree-by-degree around a circle, shows less visible distinction within some color ranges than it does elsewhere on the scale, thanks to the charateristics of human eyesight.

RGB

Start with the Text/RGB panel (lower left), which is black (#000000) by default. If you want to see the full effect of each color, simply mouse-over or tab to the display/color box at each step, which will reverse the colors from text to background.

  1. Move the Red slider from 0 to 255 (#FF0000; see Hex & Luminance box). Notice that the hue value (HSL box) hasn't moved from its default 0° position (which is the same as 360°). Saturation jumps to 100% as soon as you start moving, and lightness gradually increases to 50%, where it will stay for most of this exercise.
  2. Leaving red where it is, now move the Green slider from 0 to 255. Watch the gradual transition of the text color itself (in the Display/Color panel) from red through orange to yellow (#FFFF00); notice also that hue is moving from 0° to 60°, with saturation remaining at 100%. Luminance ratio (Hex & Luminance box) decreases to nearly nothing; yellow text on a while background is unreadable to almost everyone.
  3. Leaving green alone, move Red back to 0. The color transitions from yellow through yellow-green to pure green (#00FF00), and hue moves to 120°. The text here is only slightly more readable than when it was yellow.
  4. Bring Blue to 255; the mixture of full blue with full green produces cyan (#00FFFF) with hue 180°.
  5. Keep full blue, move Green back to 0. Hex value is now #0000FF, hue is 240°. Luminance ratio has become readable again.
  6. Last combination: full blue, Red up to 255 again. Color is magenta (#FF00FF); hue is 300°, nearly full circle on the Hue scale but less readable, though.
  7. To see the effect of 3-color RGB mixing, now reduce Blue to the middle of its range, about 125-130. Hue will be somewhere between magenta and red, about 330°.
    • Now gradually raise Green. As it approaches the blue value, hue will continue in the direction of red and lightness will start going up again. When green = blue, hue will hit full circle (360°) and automatically drop to 0. The green in effect is adding white light as well as changing the hue.
    • Once green is above the blue value, however, hue will continue to move toward yellow but lightness will remain constant; the lowest value, now blue, is controlling the percent of white light.
  8. Finish with the "RESET ALL" button in the Hex & Luminance panel.

HSL

This time, start with the background color HSL panel (upper right), with the default setting: hue 0°, saturation 0%, and lightness 100% (white).

  1. Try to move the Saturation slider from its 0% setting. Nothing happens, since lightness is still 100%.
  2. Do the same with the Hue control: again nothing happens without lightness and saturation.
  3. Now lower lightness gradually from 100% to 0%. Hue is still irrelevant, since there is no saturation; you are watching a gray scale as the color (Display/Color panel) goes from white to black. Notice that the RGB sliders are moving together, since grey or white is produced by equal amounts of red, green, and blue light. Move lightness back up to 50% (middle grey).
  4. Raise Saturation gradually from 0% to 100%. This time, you are watching the color move through darker shades until it becomes completely red. The red value will stay at 255 but the green and blue values drop together, reducing the white component to the lightness setting of 50%.
  5. Still with full saturation and 50% light, move the Hue control gradually through its full range from 0° to 360°. Yes, hue is represented as a circle, despite the linear scale here. This time, you'll see the color changing and the RGB values moving exactly as they did in the RGB exercise above. When you reach the top, Hue will drop automatically back to 0°.
  6. Reduce lightness to about 25–30%. The red color now looks like a deep maroon or burgundy. Again move the Hue control through its full range and notice the effect on other colors: orange becomes a rich brown, yellow becomes an avocado green, and so on.
  7. Move Hue to about 30° (green will increase to about half of the red value) and increase Light to about 70%. Watch the red and green values increase proportionally as they maintain the same hue. Then reduce Saturation to about 30% and watch both green and blue increasing—green maintains the hue and blue (the lowest value) adds the white component.
  8. Finish again with the "RESET ALL" button in the Hex & Luminance panel.

Color Contrast

For Web developers, the contrast between foreground (text) color and background color is important to ensure readability by a wide variety of viewers. Those with low vision, color blindness, or other eye problems will benefit most, but even fully-sighted readers will appreciate adequate contrast especially at small font sizes.

Contrast is measured by an algorithm generally called the luminance ratio. Enhanced guidelines from the World Wide Web Consortium (W3C) call for a ratio of at least 7:1 for small text and 4.5:1 for large text. However, there is no reason for developers not to exceed this standard, since the ratio can be measured so easily with many applications including this one.

  1. Start again with the background HSL panel. The luminance ratio (Hex & Luminance panel) is showing 21:1, its maximum value. Lower lightness to about 90%.
  2. Increase Saturation to about 80% and move the Hue control to a fairly neutral value, about 40°. Luminance ratio should be about 18:1.
  3. Now move to the Text/HSL panel (lower right). Increase Lightness to about 30% and Saturation to about 75%. For a complimentary (opposite) color combination, move Hue to about 240°. Ratio should now be about 12:1, still excellent even for small font sizes.
  4. Still in the Text/HSL panel, increase Lightness again. At about 65%, contrast will fall to 4:1, below the requirement for even large font sizes. By 80%, it will be all the way down to 2:1! If you are fully-sighted (and not color blind), this may seem strange—since the difference in hue appears to be obvious. Your eyes can fool you—trust the numbers here!
  5. Experiment on your own with various color combinations, and observe how the contrast ratio changes with different values of HSB. Also notice that contrast is best when foreground saturation is high and brightness low, with background saturation low and brightness high (regardless of hue).

We've been following the most common convention of dark text (foreground) on light background. Some Web sites and readers, though, prefer light text on dark background. Either way can be made accessible as long as the contrast ratio is adequate.

Thanks to Dr. Richard Omanson, DePaul University Chicago,
for very helpful comments on an earlier version of these exercises.

Copyright 2009–2013, Tom Jewett, tom [at] tomjewett [dot] com
Department of Computer Engineering and Computer Science, Emeritus
California State University, Long Beach