HSL and HSLA Colors

The hsl() function defines colors using Hue, Saturation, and Lightness — a model that more closely mirrors human perception than RGB. Hue is an angle on the color wheel (0–360°): 0° is red, 120° is green, 240° is blue. Saturation is a percentage: 100% is fully saturated, 0% is grey. Lightness is also a percentage: 0% is black, 50% is the pure color, 100% is white.

Why HSL is Powerful for Design

HSL makes it easy to create color variations by adjusting only one value. Increase lightness for a tint, decrease it for a shade, reduce saturation for a more neutral tone — all while keeping the same hue. hsla() adds an alpha channel, just like rgba(). The modern hsl(h s% l% / a) syntax also works in all current browsers.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HSL Colors</title>
  <style>
    .row { display: flex; gap: 4px; margin: 8px 0; }
    .chip {
      flex: 1; height: 50px; border-radius: 4px;
      display: flex; align-items: flex-end;
      padding: 4px; font-size: 0.7rem;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>HSL Color Variations</h1>

  <h2>Shades of Blue (hue 210°)</h2>
  <div class="row">
    <div class="chip" style="background:hsl(210,100%,20%)">20%</div>
    <div class="chip" style="background:hsl(210,100%,35%)">35%</div>
    <div class="chip" style="background:hsl(210,100%,50%);color:white">50%</div>
    <div class="chip" style="background:hsl(210,100%,65%)">65%</div>
    <div class="chip" style="background:hsl(210,100%,80%)">80%</div>
  </div>

  <h2>Saturation (hue 0°, lightness 50%)</h2>
  <div class="row">
    <div class="chip" style="background:hsl(0,0%,50%)">0%</div>
    <div class="chip" style="background:hsl(0,25%,50%)">25%</div>
    <div class="chip" style="background:hsl(0,50%,50%)">50%</div>
    <div class="chip" style="background:hsl(0,75%,50%)">75%</div>
    <div class="chip" style="background:hsl(0,100%,50%)">100%</div>
  </div>
</body>
</html>

HTML

Full Editor

Pro Tip

Build your color palette in HSL by picking one hue and generating tints (higher lightness) and shades (lower lightness). This produces a harmonious set of colors that feel cohesive, which is why design systems like Tailwind CSS base their palettes on HSL-like scales.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned