The Color Tutor demonstration

About the demonstration

This page replaces our now-obsolete Java "Tutor" application; there's nothing to download this time, and all controls are keyboard-operable. You can guide yourself through this demonstration with our exercises on the next page.

Remember that the Sat sliders don't (and shouldn't) work with Light at 0% or 100%; Hue sliders don't (and shouldn't) work with Sat at 0%. You may also enter valid Hex values directly in those two text boxes; this includes 3-character abbreviations.

Conversion between RGB/Hex and HSL is rounded off to the nearest integer; the difference is nearly impossible to distinguish visually. The luminance ratio, sometimes called "color contrast," is calculated from RGB values using the W3C algorithm. Please see the relevant Web Content Accessibility Guideline (WCAG 1.4.3, opens in new tab) for use of this information.

HSL ° % %
Color Mouseover or tab to see reverse colors

Hex & Luminance background-color: #
color: #
Luminance ratio: :1
HSL ° % %

Copyright 2009–2017, Tom Jewett, tom [at] tomjewett [dot] com
Department of Computer Engineering and Computer Science, Emeritus
California State University, Long Beach