References

Beginner-friendly references for web development, with live, editable examples.

The CSS hsl() function

Function CSS All modern browsers Updated
Quick answer

The CSS hsl() function builds a color from hue (0–360°), saturation (%) and lightness (%), e.g. hsl(212 81% 51%). It is often the most intuitive color model: pick a hue, then dial the saturation and lightness. Add / alpha for transparency. It shines when you need consistent tints and shades — keep the hue and just change the lightness.

Overview

hsl() describes a color the way a person tends to think about one: a hue (an angle on the color wheel, 0–360°, where 0 is red, 120 green, 240 blue), a saturation (how vivid, as a percentage), and a lightness (how bright, as a percentage). hsl(212 81% 51%) is a strong blue.

That structure is its advantage. Want a lighter version of a color for a hover state, or a darker one for a border? Keep the hue and saturation and just change the lightness — hsl(212 81% 70%) and hsl(212 81% 35%) are a matched tint and shade of the same blue. Doing the same with hex codes or rgb() means recalculating all three channels.

Like rgb(), it uses the modern space syntax and takes an optional alpha after a slash: hsl(212 81% 51% / 0.5). This makes it a favorite for design systems that generate whole palettes from a base hue.

Syntax

selector {
  color: hsl(212 81% 51%);
  /* a lighter tint of the same hue */
  border-color: hsl(212 81% 70%);
}

Example

Live example 
<style>
  .ramp { display: flex; font: 600 12px system-ui, sans-serif; text-align: center; border-radius: 8px; overflow: hidden; }
  .ramp div { flex: 1; padding: 24px 4px; color: #fff; }
  .l1 { background: hsl(212 81% 75%); color: #0b2545; }
  .l2 { background: hsl(212 81% 60%); }
  .l3 { background: hsl(212 81% 45%); }
  .l4 { background: hsl(212 81% 30%); }
</style>
<div class="ramp">
  <div class="l1">75%</div><div class="l2">60%</div><div class="l3">45%</div><div class="l4">30%</div>
</div>

Best practices

  • Build tints and shades by keeping the hue and saturation fixed and only changing the lightness.
  • Use the modern space syntax with a slash for alpha, e.g. hsl(212 81% 51% / 0.5).
  • Store a base hue in a custom property and derive a palette from it.
  • Reach for rgb() or hex when you are matching an exact brand color given in those formats.

Frequently asked questions

What is hsl() in CSS?
A way to define a color by hue (0–360°), saturation (%) and lightness (%), e.g. hsl(212 81% 51%). It often maps more closely to how people picture colors.
How do I make a lighter or darker shade with hsl()?
Keep the hue and saturation the same and change the lightness. Raise it for a lighter tint, lower it for a darker shade.
What is the difference between hsl() and rgb()?
rgb() mixes red, green and blue channels; hsl() uses hue, saturation and lightness, which makes adjusting brightness and building palettes more intuitive.
How do I add transparency to an hsl color?
Add a slash and an alpha, e.g. hsl(212 81% 51% / 0.5) for 50% opacity.
clamp() linear-gradient()