HTML HSL Colors

RGB and HEX describe colors as a mix of light channels, which is precise but not very intuitive to hand-tune -- there is no obvious way to make an RGB color "a bit lighter" without recalculating three separate numbers. HSL solves this by describing color the way a human would: as a Hue (which color on the color wheel), a Saturation (how vivid or washed-out), and a Lightness (how close to black or white).

In this page:

The Hue Wheel
Controlling Vividness with Saturation
Controlling Tone with Lightness
Building Tints and Shades
Adding Transparency with hsla()

The Hue Wheel

Hue is a value from 0 to 360 representing a position on the color wheel: 0 is red, 120 is green, 240 is blue, and 360 loops back around to red again. Hue alone determines which color you are looking at, independent of how vivid or light it appears.

Note: Rotate the hue value by a fixed amount (like +180) to quickly find a color's complementary opposite on the wheel.

Warning: A hue value outside 0-360 simply wraps around the wheel rather than producing an error, since the wheel has no true start or end.

Example: The Hue Wheel

markup

<p style="color: hsl(0, 100%, 50%);">Hue 0 = red</p>
<p style="color: hsl(240, 100%, 50%);">Hue 240 = blue</p>

Controlling Vividness with Saturation

Saturation is a percentage from 0% to 100% controlling how vivid or muted a color appears -- 100% saturation gives a pure, intense hue, while 0% saturation removes all color entirely, leaving only a shade of gray regardless of the hue value.

Note: Lower the saturation on a bright accent color to create a softer, more muted variant for secondary UI elements.

Warning: At 0% saturation, the hue value stops mattering entirely, since every hue collapses to the same neutral gray.

Example: Controlling Vividness with Saturation

markup

<p style="color: hsl(200, 100%, 50%);">Fully saturated</p>
<p style="color: hsl(200, 0%, 50%);">Zero saturation = gray</p>

Controlling Tone with Lightness

Lightness is a percentage from 0% to 100% controlling how close a color sits to black or white -- 0% is always pure black, 100% is always pure white, and 50% shows the hue at its purest, most saturated-looking form.

Note: Keep hue and saturation fixed while sliding only lightness up or down to generate a matching set of tints and shades for a UI color palette.

Warning: At 0% or 100% lightness, the color becomes pure black or white regardless of whatever hue or saturation value is set.

Example: Controlling Tone with Lightness

markup

<p style="color: hsl(200, 100%, 0%);">0% lightness = black</p>
<p style="color: hsl(200, 100%, 50%);">50% lightness = pure hue</p>
<p style="color: hsl(200, 100%, 100%);">100% lightness = white</p>

Building Tints and Shades

Because HSL separates the "which color" question (hue) from the "how light" question (lightness), it is the easiest notation for generating a coordinated palette -- keep hue and saturation locked, then vary only lightness to produce a smooth ramp of shades for hover states, borders, and backgrounds that all clearly belong to the same color family.

Note: Define a base hue and saturation once, then create hover and active states by simply adjusting the lightness value up or down by 10%.

Warning: Changing hue slightly instead of only lightness when trying to create a "shade" will produce a visibly different, mismatched color rather than a true tint.

Example: Building Tints and Shades

markup

<div style="background-color: hsl(210, 80%, 40%);">Dark</div>
<div style="background-color: hsl(210, 80%, 60%);">Medium</div>
<div style="background-color: hsl(210, 80%, 80%);">Light</div>

Adding Transparency with hsla()

hsla(hue, saturation, lightness, alpha) adds the same fourth alpha value used in rgba(), ranging from 0 (fully transparent) to 1 (fully opaque), letting an HSL color blend with the content behind it.

Note: Use hsla() over hsl() whenever a color overlay needs to let background content partially show through.

Warning: Forgetting the alpha value entirely and using hsla() with only three arguments will cause the color declaration to be invalid.

Example: Adding Transparency with hsla()

markup

<div style="background-color: hsla(210, 80%, 50%, 0.5);">Semi-transparent overlay</div>

Common Mistakes

Confusing saturation and lightness, when saturation controls color intensity/vividness while lightness controls how close the color sits to black or white.
Forgetting that hue is measured in degrees around a 360-degree color wheel, so 0 and 360 both point to red.
Setting lightness to 0% or 100% and expecting to still see the hue, when those extremes always produce pure black or pure white regardless of hue or saturation.

Chapter Summary

HSL describes color as Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%).
Keeping hue and saturation fixed while only changing lightness is the easiest way to generate a consistent set of tints and shades of one color.
hsla() adds the same alpha transparency channel found in rgba(), as a fourth value from 0 to 1.

Browser Support

hsl() and hsla() color notation is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML HEX Colors Next Lesson → HTML CSS

HTML HSL Colors

The Hue Wheel

Controlling Vividness with Saturation

Controlling Tone with Lightness

Building Tints and Shades

Adding Transparency with hsla()

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code