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.
Also available: a "mini" HSL color selector (opens in separate window) with Hex and contrast, useful for development and reference.
Copyright 2009–2017, Tom Jewett,
tom [at] tomjewett [dot] com
Department of Computer Engineering and Computer Science, Emeritus
California State University, Long Beach