HSL
HSL separates a colour’s hue, saturation, and lightness. This can make small palette adjustments easier to reason about than changing three RGB channels independently.
How it works
- Hue is an angle around a colour wheel. Saturation describes colour intensity; zero saturation produces grey.
- Lightness runs from black at 0% to white at 100%. HSL lightness is not the same as perceptual brightness or a contrast measurement.
- Add alpha after a slash in modern hsl() syntax. Test the resulting colour against its actual background.
A practical example
<span class="tag">Community event</span>
.tag {
color: hsl(165 55% 22%);
background: hsl(165 35% 94%);
border: 1px solid hsl(165 30% 80%);
}
All three colours share a hue. Changing saturation and lightness creates related text, background, and border colours rather than three unrelated choices.