CSS HSL and HSLA Colors

HSL stands for hue, saturation, lightness. It describes a color the way we think about it: which color is it, how vivid is it and how light is it?

1

color: hsl(18, 100%, 43%);   /* a burnt orange */

The three values

• Hue is a position on a color wheel, from 0 to 360. Roughly: 0 red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta.
• Saturation is how intense the color is. 0% is grey, 100% is the purest version.
• Lightness is how bright. 0% is black, 50% is the normal color, 100% is white.

1
2
3
4
5
6
7
8

<style>
  div { padding: 10px; margin-bottom: 4px; color: white; }
</style>
<div style="background: hsl(210, 70%, 20%)">lightness 20%</div>
<div style="background: hsl(210, 70%, 35%)">lightness 35%</div>
<div style="background: hsl(210, 70%, 50%)">lightness 50%</div>
<div style="background: hsl(210, 70%, 70%); color:#000">lightness 70%</div>
<div style="background: hsl(210, 70%, 90%); color:#000">lightness 90%</div>

Same hue, same saturation, different lightness. That is how you build shades of one brand color without guessing.

HSLA

Add a fourth number for transparency: hsla(18, 100%, 43%, 0.5). The modern form is hsl(18 100% 43% / 50%).

Why developers like HSL

• A hover color is easy: keep hue and saturation, lower the lightness by 8%.
• A grey is simply any hue with 0% saturation.
• Palettes feel consistent because only one number changes.

1
2

button { background: hsl(210, 70%, 40%); color: white; }
button:hover { background: hsl(210, 70%, 32%); }