Colors HSL and HSLA
HSL describes a color as a position on a color wheel (Hue), how vivid it is (Saturation), and how light or dark it is (Lightness) — and because each of those is a single independent number, HSL makes it easy to create a lighter, darker, or more muted variant of a color just by changing one value.
Hue: A Position on the Color Wheel
Hue is an angle, measured in degrees from 0 to 360, that points to a spot on a circular color wheel. Instead of memorizing channel numbers, you're pointing at where on the wheel the color sits. 0 and 360 both land on red (it's a full circle back to the start), with every other hue in between as you sweep around.
Saturation: How Vivid the Color Is
- 100% saturation — the hue at full intensity, vivid and bold, like a pure sky blue
- 50% saturation — a noticeably muted, softer version of the same hue
- 10% saturation — nearly gray, with just a faint trace of the hue left
Lightness: How Light or Dark the Color Is
Lightness also runs from 0% to 100%, but it behaves differently from saturation: 0% lightness is always pure black and 100% lightness is always pure white, regardless of hue or saturation. The "full strength" version of any hue sits at 50% lightness — push past that and you're blending in white; pull back and you're blending in black.
One Hue, Three Lightness Values
<!DOCTYPE html>
<html>
<head>
<style>
.swatch-light {
background-color: hsl(210, 70%, 80%);
}
.swatch-mid {
background-color: hsl(210, 70%, 50%);
}
.swatch-dark {
background-color: hsl(210, 70%, 25%);
}
</style>
</head>
<body>
<div class="swatch-light">Light</div>
<div class="swatch-mid">Mid</div>
<div class="swatch-dark">Dark</div>
</body>
</html>Why HSL Makes Variants So Easy
With RGB or HEX, making a color "a bit darker" means recalculating all three channels together, which isn't obvious to do by eye. With HSL, you leave the hue and saturation exactly as they are and change only the lightness number — the color family stays identical, just lighter or darker. The same trick works for saturation: keep hue and lightness fixed and dial saturation down for a muted, professional variant, or up for a bold, energetic one. This is exactly how many CSS hover and focus states are built.
A Button With a Darker Hover State
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: hsl(210, 70%, 45%);
}
.btn:hover {
background-color: hsl(210, 70%, 35%);
}
.btn-overlay {
background-color: hsla(210, 70%, 45%, 0.4);
}
</style>
</head>
<body>
<button class="btn">Hover Me</button>
<div class="btn-overlay">Overlay</div>
</body>
</html>Exercise: Colors HSL
In hsl(), what does the Hue value represent?
