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. For more information, see our video at the end of this tuttorial.
Also available: a "micro colors" application for stand-alone use by developers. See the following (App) page for more information and a link to the app itself.
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. As of 2020, the W3C is considering some revisions to this standard.
▸ or