HSL Colors

You can define CSS colors using hue, saturation, and lightness so related colors are easier to theme and adjust.

What it is

HSL stands for hue, saturation, and lightness. It is a way to describe a color using three values that match how people often think about color. Hue is the color family, such as red, green, or blue, and is written as an angle from 0 to 360. Saturation is the intensity of the color, from 0% gray to 100% fully vivid. Lightness is how bright or dark the color is, from 0% black to 100% white.

The mental model is a color wheel. Instead of mixing red, green, and blue amounts, you choose a position on the wheel, then decide how vivid and how light it should be. Related terms include rgb(), hex colors, and hsla(), which adds an alpha value for transparency.

Why it matters

• It makes theming easier because a brand color can be adjusted by changing one value, such as making a hover state darker by reducing lightness.
• It helps create color palettes: related buttons, borders, and backgrounds can share the same hue while varying saturation and lightness.
• It can be more readable than hex codes when you want to reason about color changes.
• It supports accessible design when used with contrast checking, because lightness changes are easier to predict than RGB changes.
• It works well with CSS custom properties for dynamic themes, such as light and dark modes.

Syntax or steps

The smallest useful pattern is the hsl() function with three comma-separated values:

hsl(hue, saturation, lightness)

Use a number for hue, and percentages for saturation and lightness. For transparency, use hsla() with a fourth value from 0 to 1:

hsla(hue, saturation, lightness, alpha)

Example values:

hsl(0, 100%, 50%)   /* red */
hsl(120, 100%, 50%)  /* green */
hsl(240, 100%, 50%)  /* blue */
hsl(210, 70%, 40%)   /* blue-gray button color */

Example

.btn {
  background: hsl(210, 70%, 40%);
  color: hsl(0, 0%, 100%);
  border: 1px solid hsl(210, 70%, 30%);
}

.btn:hover {
  background: hsl(210, 70%, 30%);
}

.btn:active {
  background: hsl(210, 70%, 25%);
}

Part by part: hsl(210, 70%, 40%) creates a medium blue button. The hover rule keeps the same hue and saturation but lowers lightness from 40% to 30%, making it darker. The active state lowers lightness again to 25%. The border uses the same hue family but a darker lightness, so the button looks cohesive.

Common mistakes

• Forgetting the percent sign on saturation or lightness. Use hsl(210, 70%, 40%), not hsl(210, 70, 40).
• Treating hue as a percentage. Hue is a number from 0 to 360, not 0% to 100%.
• Assuming 0 and 360 are different colors. They both represent red because hue is circular.
• Using HSL without checking contrast. A color may look pleasant but fail accessibility. Test text and background pairs with a contrast checker.

When to use it

Use HSL when you want to adjust colors by relationship, such as making a button darker on hover or building a palette from one brand hue. Use hex or RGB when you need to copy exact colors from a design tool or when a color system already uses those formats.

Practice

Guided exercise: create a card with a light green background and dark green text.

.card {
  background: hsl(150, 40%, 95%);
  color: hsl(150, 60%, 20%);
}

Challenge: add a hover state that keeps the same hue and saturation but reduces lightness by 10%. Expected output: a slightly darker green background on hover.

.card:hover {
  background: hsl(150, 40%, 85%);
}

Quick check

Question: Which HSL value controls the color family, such as red, green, or blue?

Answer: Hue. It is the first value in hsl() and is written as a number from 0 to 360.

Summary

HSL colors let you describe CSS colors by hue, saturation, and lightness instead of by red, green, and blue channels. This makes theming easier because related colors can share a hue while only saturation or lightness changes. Use HSL when you want predictable color adjustments, and use hex or RGB when exact copied values are more important.