Color
Hue · Saturation · Lightness
Hue · Saturation · Lightness (HSL) is a way of describing a color through three axes, rearranging RGB into terms closer to how people picture color.
Definition
HSL is a way of describing a single color through three separate axes: hue, saturation, and lightness. Hue is the kind of color — red, blue, green — laid out as an angle from 0 to 360 degrees around a color wheel. Saturation is how vivid the color is, or how far it sits from plain gray. Lightness is simply how bright or dark it appears. RGB, the format computers use to store color under the hood, mixes amounts of red, green, and blue light — it's a machine-first language. HSL rearranges that same information into something much closer to how a person actually pictures a color in their head.
Why does it matter?
HSL matters because it makes color intuitive to adjust. In RGB, nudging a blue to feel calmer means recalculating three values at once. In HSL you just lower the saturation. Want the same color brighter? Raise the lightness. Want a completely different color? Rotate the hue angle. Because the axes move independently, you can dial in exactly the change you want by touching a single control. That predictability builds real confidence with color, so even a developer who dreads design can make decisions by rule instead of by gut. This is why HSL is such a dependable foundation when you extend a palette systematically or line up the tones of several colors in a design system — and in code the meaning of each value stays visible, which makes everything far easier to maintain.
Common mistakes
- Expecting that changing only the lightness will hand you a pretty ladder of shades. In practice the saturation stays put, so very light tones can glow almost neon while dark tones go muddy. When you shift brightness, you usually need to nudge saturation too for the steps to feel even and natural.
- Believing that HSL's lightness matches the brightness your eyes actually perceive. At the same lightness of 50, yellow reads as dazzlingly bright while blue reads much darker. When you judge how well two colors contrast, don't trust the lightness number alone — always confirm with your eyes.
- Assuming a color is only good when you crank saturation all the way up. When an over-saturated color fills the screen, eyes tire quickly and the element you actually wanted to highlight gets buried.
Practical tips
- Lean into the fact that HSL is easier for a human to adjust than RGB. Framing a change as "just lower the saturation to calm it down" or "just raise the lightness to brighten it" turns color work into single-axis moves — more predictable for you, and easier to describe out loud to a teammate.
- Lock a brand color's hue angle and build your steps by adjusting only saturation and lightness. When the hue never drifts, everything from the lightest tint to the deepest shade reads as one family.
- If you need finer control over brightness, take a look at newer color models built around human perception. Knowing HSL's limits makes it easy to judge when it's time to reach for a different tool.
Ask your AI
Take my brand color [brand color — e.g. #3B82F6 or hsl(217 91% 60%)], convert it to HSL, then keep the hue angle fixed and adjust only saturation and lightness to build a 5–6 step scale from light tints to deep shades. Don't just step the lightness down at a constant saturation — pull the saturation down a bit on the very light steps so they don't glow neon, and nudge it on the dark steps so they don't go muddy. Output each step as an hsl() value plus a token like --color-500, and add a one-line reason for the saturation and lightness you picked.
Find every color hardcoded as #hex or rgb() in the code below and rewrite it using hsl() notation. Write hue as an angle from 0–360 and saturation and lightness as percentages, so later I can tweak one axis at a time — 'just lower the saturation to calm it' or 'just raise the lightness to brighten it.' Pull the colors into meaningful --color-* variables and give me a mapping table of original value → hsl equivalent.
In the colors below, find the ones cranked to full saturation and dial them back to hsl() values that won't tire the eyes when they fill the screen. Also remember that at the same lightness number yellow reads dazzlingly bright while blue reads much darker, so don't judge contrast by the HSL lightness value alone — check the real contrast of each pairing. Keep the high-saturation colors only where I genuinely need emphasis so nothing important gets buried, and note why you toned the rest down.