HSL is a way of specifying color that doesn’t depend on any particular device. Of the common color schemes, it’s arguably the hardest to picture mentally—partly because the software you use to pick colors has to flatten its three dimensions down onto the two-dimensional surface of your screen. Still, once the concept clicks, it proves handy in plenty of situations, including choosing colors for websites.
A helpful way to imagine the system is as a set of points inside a cylinder. Picture the visible spectrum wrapped around the outside of that cylinder: take the band of colors, bend it into a ring, and blend the spot where the red and magenta ends meet so the loop is seamless. (This cylinder model is far truer to how HSL actually works than the “cone” diagrams you’ll often run across elsewhere.)
- Hue is the color itself. You read it as an angle traveling counter-clockwise around the cylinder, beginning and finishing at red (0° or 360°)—so yellow lands at 60°, green at 120°, and so on. Diagrams usually mark it off in 30° steps, but in reality every single degree shifts the color by a faint amount.
- Saturation describes how pure the color is. It runs as a percentage from the cylinder’s core (0) outward to its rim (100). When saturation drops to 0%, the hue value stops meaning anything at all.
- Lightness runs as a percentage from black (0) at the cylinder’s base up to white (100) at its top, which puts the midpoint at 50%—the cross-section shown in the cutaway. At either extreme, 0% or 100%, hue and saturation both become irrelevant.
Keep in mind that “lightness” here only describes values relative to the source you’re viewing, such as a screen or a printed sheet. You’ll sometimes see it labeled brightness (the “B” in HSB). One caveat: the way HSL spaces out lightness suggests the steps are evenly spaced, but human vision isn’t linear about this—we notice differences among the brighter tones far more readily than among the darker ones.
For CSS, if you stick to whole numbers, the math works out to 360 × 99 × 98 = roughly 3.49 million distinct HSL colors (once you exclude the combinations that carry no meaning)—far more than anyone needs in practice. You can try it on the Using HSL page.
Color Contrast
What actually matters to someone looking at a design is the visible difference between two colors, setting hue aside entirely—a measure known as the luminance ratio. It matters to web designers too, because text that doesn’t stand out enough against its background becomes a real struggle for many people to read. You can look up the precise thresholds in the W3C’s Web Content Accessibility Guidelines (WCAG).
Our Demo page lets you play with both HSL and RGB, and calculate the luminance ratio between any two colors.
Gamut
Bear in mind that HSL can express a color regardless of the physical hardware involved. No two monitors render colors identically, and the same goes for any two printers—so what shows up on screen can look quite different from the printed result, and both can differ from what you’d see in the real world.
The full range of colors a specific device is capable of producing is known as its color gamut. While this is essential knowledge for professional photographers and graphic artists, most web developers won’t need to worry about it. If you want to dig deeper, the Wikipedia article on the subject is a good starting point (opens in a new window).
Leave a Reply