The Color Tutor demonstration

About the demonstration

This page will let you dynamically explore the relationship between the two ways that computer screen colors are specified: RGB/Hex and HSL. It will also help you develop accessible color combinations for use on the Web. Incompatible with Internet Explorer (Edge okay). For more information, see our video on the next page. Also available: a "mini color selector" with HSL, RGB, Hex and contrast, for Firefox, Chrome, and Opera browsers. Open it in either a separate popup window to keep on your desktop or a new tab to enlarge.

Remember that the Sat and Hue sliders don't (and shouldn't) do anything with Light at 0% or 100%; Hue sliders don't (and shouldn't) do anything with Sat at 0%.

Conversion between RGB/Hex and HSL is rounded off to the nearest integer (in either direction); the difference is nearly impossible to distinguish visually. Colors in the central display panel are actually set in whichever system you specify them (RGB, Hex, or HSL). Formats to use in your own stylesheets: rgb(rrr, ggg, bbb); #rrggbb; hsl(hhh, sss%, lll%). You may also see an RGBA definition, where the "A" means "alpha channel" and sets the luminosity of the color (0.0–1.0) in addition to the color itself.

The contrast between text and background colors, technically called the "luminance ratio," is calculated from RGB values using the W3C algorithm. Please see the relevant Web Content Accessibility Guideline (WCAG 1.4.6, opens in new tab) for use of this information.

▸ You can of the controls (33 sec.), then experiment with both background and text colors.

Background
RGB   Hex #
HSL ° % %  
Color
This is a line of big text This is a line of really small text. It is much harder to read if color contrast is insufficient.
:1   ← Good for all text   
Text
RGB   Hex #
HSL ° % %