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 (aka HSB). It will also help you develop accessible color combinations for use in Web pages. For a "self-guided tour," see our video exercises on the next page. Currently incompatible with Internet Explorer.

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).

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. In the background color of the contrast value shown here, green = highest compliance and red = non-compliance with even the minimum standard.


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.
Contrast: :1     
Text
RGB   Hex: #
HSL ° % %  

Also available: a "mini" HSL color selector (opens in separate window) with Hex and contrast, useful for development and reference.