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 RGB and HSL (HSB). You will also learn how to develop foreground/background color combinations that have sufficient color contrast to meet accessibility requirements. Follow along with the videos and narratives below, then keep experimenting on your own. Have fun!
RGB & HSL
- Swap the text and background colors, so you'll start from black.
- Move the Red slider from 0 to 255 (#FF0000; see the Hex box). The hue value (HSL box) doesn't move 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.
- Leaving red where it is, now move the Green slider from 0 to 255. The color itself moves from red through orange to yellow (#FFFF00); hue moves from 0° to 60°, with saturation remaining at 100%. Contrast (in the Color box) decreases to nearly nothing.
- As the video shows, cycle through the whole "rainbow" with red down, blue up, green down, red up, and blue down. Hue goes to 360 and completes the circle at zero.
- Now on the HSL side, move the hue slider through its full range and watch the RGB sliders go up-and-down in turn just as you moved them yourself.
- Decrease saturation to make the color "grayer" or less "colorful." Run the hue back through its range; RGB sliders cycle again but only in the middle.
- Saturation to zero: you now have a gray scale (no color); RGB sliders are all at the same value. Run light to the top and then down; we're back to black where we started.
- Start with a warm neutral background: 30° hue, 80% sat, 95% light.
- We'll illustrate a contrasting hue for the text: 240°, also at 80% sat. Start light at 80% and watch the contrast.
- If you're fully sighted and not color blind, you can tell the difference; but at only 2:1, many other people can't.
- Reduce light to 65%, just under the standard for large text (4.5:1). At 55%, even the small text is okay at exactly 7:1.
- Hue makes a difference: if we use 30° to match the background, contrast is gone again. Light now needs to drop to 27% or less. (Saturation changes will also affect contrast.)
- You may want to use the HSL system to develop color combinations, then enter the corresponding Hex values in your style sheets.
We've been following the most common convention of dark text 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. A few readers actually need low contrast; you can use the same techniques to customize style sheets for them.