CSS HSL Colors

HSL describes a color the way a person naturally thinks about it -- pick a base hue like blue, then decide how vivid and how bright it should be -- rather than mixing raw light channels.

In this page:

The hsl() Function
Understanding Saturation
Understanding Lightness
Why HSL Is Easier to Adjust
Adding Transparency with hsla()

The hsl() Function

hsl(hue, saturation, lightness) takes a hue as a degree on the color wheel (0-360, where 0 is red, 120 is green, 240 is blue), then saturation and lightness as percentages. hsl(0, 100%, 50%) is pure red, and rotating just the hue value moves smoothly around the color wheel without touching saturation or lightness.

Example: The hsl() Function

css

<style>
.red { background: hsl(0, 100%, 50%); }
.green { background: hsl(120, 100%, 50%); }
.blue { background: hsl(240, 100%, 50%); }
</style>
<div class="red">hue 0</div>
<div class="green">hue 120</div>
<div class="blue">hue 240</div>

Understanding Saturation

Saturation controls how vivid or muted a color is: 100% is the fully saturated, vibrant version of that hue, while 0% is a gray with no color at all regardless of the hue value. Lowering saturation is the easiest way to create a muted, pastel, or desaturated variant of a brand color.

Example: Understanding Saturation

css

<style>
.vivid { background: hsl(210, 100%, 50%); }
.muted { background: hsl(210, 20%, 50%); }
.gray { background: hsl(210, 0%, 50%); }
</style>
<div class="vivid">100% saturation</div>
<div class="muted">20% saturation</div>
<div class="gray">0% saturation — gray</div>

Understanding Lightness

Lightness controls how close a color sits to black or white: 0% is always black, 100% is always white, and 50% is the pure, undiluted hue. Because lightness works this way, generating a full tint-and-shade palette from one hue is as simple as sweeping the lightness value while holding hue and saturation constant.

Example: Understanding Lightness

css

<style>
.black { background: hsl(210, 100%, 0%); }
.pure { background: hsl(210, 100%, 50%); }
.white { background: hsl(210, 100%, 100%); }
</style>
<div class="black">0% lightness</div>
<div class="pure">50% lightness</div>
<div class="white">100% lightness</div>

Why HSL Is Easier to Adjust

Because hue, saturation, and lightness are independent, HSL makes common design tweaks trivial that are awkward in RGB or hex -- darkening a color means lowering lightness by a fixed amount, and desaturating it means lowering saturation, without needing to recompute three separate channel values by hand.

Example: Why HSL Is Easier to Adjust

css

<style>
.base { background: hsl(210, 80%, 50%); }
.darker { background: hsl(210, 80%, 30%); }
.desaturated { background: hsl(210, 30%, 50%); }
</style>
<div class="base">Base color</div>
<div class="darker">Darker: lightness lowered</div>
<div class="desaturated">Desaturated: saturation lowered</div>

Adding Transparency with hsla()

hsla(hue, saturation, lightness, alpha) adds the same 0-to-1 alpha channel as rgba(), letting a color be made semi-transparent while keeping HSL's intuitive hue/saturation/lightness controls. This is the natural choice when you need both easy color tweaking and transparency in the same declaration.

Example: Adding Transparency with hsla()

css

<style>
.overlay {
  background: hsla(210, 100%, 50%, 0.4);
}
</style>
<div class="overlay">Semi-transparent HSL color</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS HEX Colors Next Lesson → CSS Color Keywords