How to Use HSL Color Values in CSS

Understanding the Three HSL Parameters

HSL stands for Hue, Saturation, and Lightness — a color representation method more intuitive to humans than HEX or RGB.

• Hue: An angle from 0–360 representing position on the color wheel. 0°/360° = red, 120° = green, 240° = blue.
• Saturation: A percentage from 0%–100%, where 0% is gray and 100% is the most vivid pure color.
• Lightness: A percentage from 0%–100%, where 0% is black, 100% is white, and 50% is the standard color of that hue.

hsl(H,   S%,  L%)
hsl(220, 80%, 50%)  /* Medium blue */
hsl(0,   0%,  50%)  /* Middle gray */
hsl(45,  100%, 60%) /* Golden yellow */

HSL Syntax in CSS

Use the hsl() function in CSS to specify colors. Modern CSS spec also supports space-separated values without commas:

/* Traditional comma syntax */
color: hsl(220, 80%, 50%);
background: hsla(220, 80%, 50%, 0.5);

/* Modern space syntax (CSS Color Level 4) */
color: hsl(220 80% 50%);
color: hsl(220 80% 50% / 0.5); /* with alpha */

Both syntaxes are valid in modern browsers. Recommend comma syntax for broader compatibility, or space syntax to align with the CSS Color Level 4 specification.

HSL's Biggest Advantage: Predictable Color Adjustments

HSL's most powerful characteristic is that you can predictably change a color's appearance by modifying just one parameter — something nearly impossible with HEX or RGB formats:

• Change only H (hue): get different color families with the same "feel" (equally vivid, equally bright)
• Change only S (saturation): transition between vivid color and gray
• Change only L (lightness): transition between black and white, creating light/dark variants

Using HSL Variables in Design Systems

Splitting HSL's three components into independent CSS custom properties is a powerful technique for building flexible design systems:

:root {
  --primary-h: 220;
  --primary-s: 80%;
  --primary-l: 50%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-light: hsl(var(--primary-h), var(--primary-s), 70%);
  --primary-dark:  hsl(var(--primary-h), var(--primary-s), 30%);
  --primary-muted: hsl(var(--primary-h), 30%, 60%);
}

/* Dark mode override: just change lightness */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-l: 60%; /* Slightly lighter in dark mode */
  }
}

Implementing Theme Switching with HSL

HSL is ideal for implementing dark/light mode switching. Since the color's "feel" (hue and saturation) stays the same, you only need to adjust lightness values to achieve harmonious theme switching without jarring color-feel shifts:

:root {
  --bg: hsl(220, 20%, 98%);
  --text: hsl(220, 20%, 10%);
  --surface: hsl(220, 20%, 94%);
}

[data-theme="dark"] {
  --bg: hsl(220, 20%, 8%);
  --text: hsl(220, 20%, 92%);
  --surface: hsl(220, 20%, 14%);
}

Limitations of HSL

Although HSL is very intuitive for humans, it is not a perceptually uniform color space. This means colors of different hues can appear to have significantly different brightness even with the same L value. For example, hsl(60, 100%, 50%) (yellow) appears much brighter than hsl(240, 100%, 50%) (blue), even though both have an L value of 50%.

For perceptually uniform color adjustments, consider using the oklch() function from CSS Color Level 4, which is gaining increasingly broad support in modern browsers.

Key Hue Values on the Color Wheel

• 0° / 360° = Red
• 30° = Orange
• 60° = Yellow
• 90° = Yellow-green
• 120° = Green
• 180° = Cyan
• 210° = Sky blue
• 240° = Blue
• 270° = Purple
• 300° = Magenta
• 330° = Rose