What is HSL?

HSL stands for Hue, Saturation, Lightness. It is an alternative color model that is often more intuitive than RGB or HEX because it maps closely to how humans think about color.

Instead of mixing red, green, and blue channels, HSL lets you think in terms of:

What color? (Hue)
How vivid? (Saturation)
How bright? (Lightness)

HSL Syntax

CSS

/* Format: hsl(hue, saturation, lightness) */
color: hsl(0, 100%, 50%);     /* Pure red */
color: hsl(120, 100%, 50%);   /* Pure green */
color: hsl(240, 100%, 50%);   /* Pure blue */
color: hsl(210, 70%, 50%);    /* Nice blue */

Understanding Hue

Hue is a degree on the color wheel from 0 to 360:

0° / 360° = Red
30° = Orange
60° = Yellow
120° = Green
180° = Cyan
240° = Blue
270° = Purple
300° = Magenta / Pink

CSS

.red { color: hsl(0, 100%, 50%); }
.orange { color: hsl(30, 100%, 50%); }
.yellow { color: hsl(60, 100%, 50%); }
.green { color: hsl(120, 100%, 50%); }
.blue { color: hsl(240, 100%, 50%); }

Understanding Saturation

Saturation controls the intensity or vividness of the color, from 0% (gray) to 100% (fully vivid):

CSS

/* All the same hue (blue), different saturation */
.gray-blue { color: hsl(210, 0%, 50%); }    /* Completely gray */
.muted-blue { color: hsl(210, 25%, 50%); }   /* Muted blue */
.medium-blue { color: hsl(210, 50%, 50%); }  /* Medium blue */
.vivid-blue { color: hsl(210, 100%, 50%); }  /* Fully vivid blue */

Lower saturation creates more muted, professional-looking colors. Higher saturation creates bold, attention-grabbing colors.

Understanding Lightness

Lightness controls how light or dark the color is, from 0% (black) to 100% (white):

CSS

/* All the same hue (blue, 210°), different lightness */
.dark { color: hsl(210, 70%, 10%); }    /* Very dark blue */
.medium-dark { color: hsl(210, 70%, 30%); }  /* Dark blue */
.medium { color: hsl(210, 70%, 50%); }  /* Medium blue */
.light { color: hsl(210, 70%, 70%); }   /* Light blue */
.very-light { color: hsl(210, 70%, 90%); }  /* Very light blue */

0% lightness = Always black
50% lightness = The pure color
100% lightness = Always white

HSLA: Adding Transparency

Just like RGBA, HSLA adds an alpha channel for transparency:

CSS

/* Format: hsla(hue, saturation, lightness, alpha) */
.overlay { background: hsla(0, 0%, 0%, 0.5); }      /* 50% black */
.highlight { background: hsla(60, 100%, 50%, 0.3); } /* 30% yellow */
.banner { background: hsla(210, 70%, 50%, 0.8); }    /* 80% blue */

Modern HSL Syntax

Modern CSS supports a simplified syntax without commas:

CSS

/* Modern syntax */
color: hsl(210 70% 50%);
color: hsl(210 70% 50% / 0.5);

/* Also valid */
color: hsl(210deg 70% 50%);

Why HSL is More Intuitive

Creating Color Variations

With HSL, creating lighter and darker versions of a color is simple — just change the lightness:

CSS

:root {
  --brand-color: hsl(210, 70%, 50%);
  --brand-light: hsl(210, 70%, 70%);
  --brand-lighter: hsl(210, 70%, 90%);
  --brand-dark: hsl(210, 70%, 30%);
  --brand-darker: hsl(210, 70%, 15%);
}

Doing this with HEX or RGB requires calculating entirely new values.

Building Color Palettes

Generate harmonious color palettes by adjusting the hue:

CSS

/* Complementary colors (opposite on color wheel) */
.primary { color: hsl(210, 70%, 50%); }
.complement { color: hsl(30, 70%, 50%); }  /* 210 + 180 = 30 */

/* Triadic colors (120° apart) */
.color-a { color: hsl(0, 70%, 50%); }
.color-b { color: hsl(120, 70%, 50%); }
.color-c { color: hsl(240, 70%, 50%); }

/* Analogous colors (next to each other) */
.color-1 { color: hsl(200, 70%, 50%); }
.color-2 { color: hsl(210, 70%, 50%); }
.color-3 { color: hsl(220, 70%, 50%); }

Creating Theme Variations

CSS

/* Same hue, different purposes */
.button-primary { background: hsl(210, 70%, 50%); }
.button-primary:hover { background: hsl(210, 70%, 40%); }
.button-primary:active { background: hsl(210, 70%, 35%); }
.button-primary:disabled { background: hsl(210, 20%, 70%); }

HSL vs RGB vs HEX

HEX: Most compact, widely used, but hard to read and manipulate
RGB: Easy to understand channels, but hard to create variations
HSL: Most intuitive for humans, easy to create palettes and variations

Practical HSL Patterns

Grayscale with HSL

CSS

/* Any hue at 0% saturation = gray */
.text-dark { color: hsl(0, 0%, 20%); }
.text-medium { color: hsl(0, 0%, 45%); }
.text-light { color: hsl(0, 0%, 65%); }
.border { border-color: hsl(0, 0%, 85%); }
.background { background: hsl(0, 0%, 97%); }

Accessible Color Contrast

HSL makes it easy to ensure sufficient contrast — just check the lightness difference between text and background:

CSS

/* Good contrast: large lightness difference */
.dark-on-light {
  color: hsl(210, 70%, 20%);       /* Lightness: 20% */
  background: hsl(210, 30%, 95%);  /* Lightness: 95% */
}

Summary

HSL is a powerful and intuitive color model that lets you define colors using hue (color), saturation (vividness), and lightness (brightness). It makes creating color variations, palettes, and themes significantly easier than RGB or HEX. Use HSLA for transparency, and take advantage of HSL's intuitive nature to build consistent, maintainable color systems.