Learn more: color tutor exercises

These exercises use the Color Tutor application to let you learn at your own pace more about the two color systems that are most important to Web developers: RGB and HSB. 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.

If you do not have the application installed yet, please see the Tutor page for downloading instructions and a brief introduction to the way it works.

To get the maximum benefit from these exercises, we recommend that you first read the tutorial pages in order, starting from the Home page. These include a number of color systems in addition to RGB and HSB, and will give you more background on why each is important. You might also want to refer back to the RGB and HSB pages as you work through the steps below; our Video demonstrates the same procedures described here.

RGB

Start with the foreground color RGB panel (upper left), which is black (#000000) by default.

  1. Move the Red slider from 0 to 255 (#FF0000). Notice that the hue wheel (HSB panel at lower left) hasn't moved from its default 0° position. Saturation jumps to 100% as soon as you start moving, and brightness gradually increases to 100% along with the red slider.
  2. Leaving red where it is, now move the Green slider from 0 to 255. Watch the gradual transition of the color itself (in the middle panel) from red through orange to yellow (#FFFF00); notice also that hue is moving from 0° to 60°, with saturation and brightness remaining at 100% as they will for the rest of this exercise.
  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°.
  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°.
  6. Last combination: full blue, Red up to 255 again. Color is magenta (#FF00FF); hue is 300°.
  7. To see the effect of 3-color RGB mixing, now reduce Blue to the middle of its range, about 125. 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 saturation will go down to about 50%. The green in effect is adding white light as well as changing the hue.
      • Example RGB settings: R=255, G=75, B=125.
      • RGB values of the white component: R=75, G=75, B=75 (29% grey)
      • RGB values of the color component: R=180, G=0, B=50 (343° hue at 71% saturation)
    • When green = blue, hue will be red, 0°. Equal green and blue contribute only white light without affecting the hue.
    • Once green is above the blue value, however, hue will continue to move toward yellow but saturation will remain constant; the lowest value, now blue, is controlling the percent of white light.
  8. Finish by resetting all sliders to their default value (R=0, G=0, B=0)

HSB

Start with the foreground color HSB panel (lower left), with the default setting: saturation and brightness 0%, hue 0° (black).

  1. Move the Saturation slider from 0% to 100% and back down to 0%. Nothing happens, since brightness is still 0%.
  2. Do the same with the Hue control: move it around the circle and again nothing happens without brightness. Return it to the 0° position or simply type 0 in the Hue text box.
  3. Now raise Brightness gradually from 0% to 100%. Hue is still irrelevant, since there is no saturation; you are watching a grey scale as the color (center panel) goes from black to white. Notice that the RGB sliders (top panel) are moving together, since grey or white is produced by equal amounts of red, green, and blue light. Leave brightness at full value.
  4. Raise Saturation gradually from 0% to 100%. This time, you are watching the color move through shades of pink until it becomes completely red. The red slider will stay at 255 but the green and blue sliders drop together, reducing the white light component to 0.
  5. With full saturation and brightness, move the Hue control gradually through its full circle. This time, you'll see the color changing and the RGB sliders moving left and right exactly as they did in the RGB exercise above. Return Hue to 0°.
  6. Reduce Brightness to about 25–30%. The red color now looks like a deep maroon or burgundy. Again move the Hue control through its full circle 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 Brightness to about 70%. Watch the red and green sliders 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. If you move any of the RGB sliders now, the hue will change (as will saturation and possibly brightness).
  8. Finish by resetting both sliders to their default value (Sat=0, Bright=0, Hue irrelevant)

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 this time with the background HSB panel (upper right), which is white by default (saturation 0%, brightness 100%, hue 0°). The contrast box (center panel) is showing 21:1, its maximum value.
  2. Increase Saturation to about 20–25% and move the Hue control to a fairly neutral value, about 40°. Contrast should be about 18:1.
  3. Now move to the foreground HSB panel (lower left). Increase Brightness to about 30% and Saturation to about 75%. For a complimentary (opposite) color combination, move Hue to about 200°. Contrast should now be about 10:1, still excellent even for small font sizes.
  4. Still in the foreground HSB panel, increase Brightness again. At about 70%, contrast will fall to 4:1, below the requirement for even large font sizes. At 100%, it will be all the way down to 2:1! If you are fully-sighted, 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, 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 after testing the application and 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