CSS HSL Colors
HSL describes a color by its hue, saturation, and lightness, which makes it easy to adjust a shade by hand without guessing at channel numbers.
How HSL works
HSL stands for hue, saturation, and lightness. You write <hsl()> with three values. Hue is an angle from 0 to 360 degrees on the color wheel, saturation is a percentage of vividness, and lightness is a percentage from black to white.
An HSL color
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: hsl(9, 100%, 64%);
}
</style>
</head>
<body>
<p>This paragraph uses an HSL color.</p>
</body>
</html>The three parts
- Hue: 0 and 360 are red, 120 is green, 240 is blue
- Saturation: 0% is gray, 100% is fully vivid
- Lightness: 0% is black, 50% is the pure color, 100% is white
Why HSL is handy
Because lightness and saturation are separate from hue, you can build a set of related shades by keeping the hue fixed and changing only the lightness. This is a natural way to create hover states or tints of a brand color.
A shade family from one hue
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background: hsl(153, 100%, 20%);
}
.button:hover {
background: hsl(153, 100%, 30%);
}
</style>
</head>
<body>
<button class="button">Hover me</button>
</body>
</html>Adding transparency
Like RGB, HSL has an alpha form. Add a fourth value with <hsla()> to control opacity from 0 to 1.
Transparent HSL
<!DOCTYPE html>
<html>
<head>
<style>
.tint {
background-color: hsla(153, 100%, 20%, 0.15);
}
</style>
</head>
<body>
<div class="tint">Tinted panel</div>
</body>
</html>
