HSL Color Codes Explained: Hue, Saturation and Lightness

A hex or RGB code tells you how much of each channel a color contains, which is perfect for a computer and awkward for a person. An HSL color code answers a different question: which hue is it, how strong is it, and how light is it? That is how most designers actually think about color, which is why HSL shows up everywhere in design tools, theme systems and CSS.

The three HSL numbers

An HSL value has three parts:

• Hue (0–360°) — the position on the color wheel. Red is 0, then yellow 60, green 120, cyan 180, blue 240 and magenta 300. Hue wraps around, so 360 is red again.
• Saturation (0–100%) — how much color is in the mix. At 0% you get a gray, at 100% the most vivid version of that hue.
• Lightness (0–100%) — how much light you add. At 0% every color is black, at 100% every color is white, and 50% is the "full" version of the hue.

So hsl(240, 100%, 50%) is pure blue, hsl(240, 100%, 75%) is a pastel blue, and hsl(240, 20%, 75%) is a muted gray-blue.

Reading a real HSL value

A common brand blue, #3498DB, is hsl(204, 70%, 53%). That reads as: a blue 24° past cyan (204 sits between 180 cyan and 240 blue), strongly saturated but not neon (70%), and just above the middle of the lightness scale (53%).

Crimson at #DC143C is hsl(348, 83%, 47%) — a red hue nudged toward pink (348 instead of 0), very saturated, and slightly darker than a mid red.

Two useful anchors: hsl(0, 0%, 50%) is mid gray (the hue is irrelevant at zero saturation), and hsl(0, 0%, 100%) is white — lightness alone is enough to reach the ends of the scale.

Lightness is not the same as brightness

HSL is not the only hue-based model. HSV/HSB (value or brightness) puts all the saturated colors at V = 100%, which makes it great for picking a color but poor for comparing two. HSL instead spreads lightness evenly from black to white, so L = 50% gives you the most saturated rendition of a hue.

One catch: HSL is not perceptually uniform. hsl(60, 100%, 50%) is yellow and hsl(240, 100%, 50%) is blue, yet the yellow looks far lighter. Designers who need evenly spaced lightness steps now reach for OKLCH — but HSL remains the simplest model for reasoning about a single hue.

Tints, shades and harmonies in HSL

Because HSL separates the three ideas, common color work becomes arithmetic:

• Lighter (tint): raise L — hsl(204, 70%, 53%) → hsl(204, 70%, 80%).
• Darker (shade): lower L — the same hue at L = 30%.

• Muted or desaturated: lower S toward 0%.
• Complementary: rotate H by 180° (204 → 24).
• Triadic: rotate by 120° and 240°, keeping S and L identical.
• Analogous: nudge H by ±30°.

That last trick — holding S and L constant while rotating hue — is exactly how the color wheel and palette tools keep a scheme balanced. If you only need tints and shades of one color, the shades generator walks the same lightness ramp for you.

HSL in CSS

The comma syntax you will see in older code still works, including hsla() for alpha:

.card {
  color: hsl(204, 70%, 53%);
  background: hsl(204, 70%, 96%);
  border: 1px solid hsla(204, 70%, 53%, 0.35);
}

Modern CSS uses space-separated values with a slash for alpha, which makes the alpha channel explicit:

.tag {
  background: hsl(204 70% 53% / 35%);
  color: hsl(204 70% 20%);
}

white and black can even be expressed directly — hsl(0 0% 100%) and hsl(0 0% 0%) — and newer browsers support relative colors such as hsl(from var(--brand) h s calc(l - 20%)) for deriving shades from an existing variable.

When to use HSL instead of hex or RGB

• Use HSL when you are choosing or adjusting a color, generating palettes, or building a theme where "20% darker" must mean something predictable.
• Use hex when you need the shortest, most portable way to write a color that must not change — brand codes, design hand-offs, design tokens.
• Use RGB when numbers matter more than meaning: canvas, WebGL and image APIs want separate channels.

In practice you will bounce between them. The color picker shows every value as HEX, HSL and RGB at once, and the Hex to RGB converter translates any code into the other formats so you can see the hue and lightness behind it.

Try it: type hsl(204, 70%, 53%) into the color picker and drag the lightness slider. Watching the color slide from near-black to near-white without the hue shifting is the fastest way to understand why HSL exists.

Once hue, saturation and lightness are separate, color stops being a pile of mysteries and becomes three dials you can turn on purpose.