skip to main content

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

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 ° % %