HSL Converter (hue, saturation, lightness)

HSL — hue, saturation, lightness

HSL describes a color the way people tend to think about one: which color it is, how vivid, and how light. That makes it far easier to adjust by hand than RGB, where changing a color's brightness means juggling three numbers at once.

What each value means

Hue is an angle around the color wheel: 0° red, 120° green, 240° blue, back to red at 360°. Saturation runs from 0% (grey) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the pure hue) to 100% (white) — note that 100% lightness is always white regardless of hue, which surprises people expecting "bright".

Why designers reach for it

Building a palette is straightforward in HSL: keep the hue and saturation fixed and vary lightness to get a consistent set of tints and shades. Rotate the hue by 180° for a complementary color, or by ±30° for neighbouring analogous ones. Doing the same in raw RGB means guesswork.

Worked example

#3B82F6 is hsl(217, 91%, 60%) — a strongly saturated blue, slightly lighter than the pure hue. Drop the lightness to 40% and you get a darker blue of the same character; drop saturation to 20% and it fades toward grey while staying blue-ish. CSS acceptshsl() directly, so you can use these values as-is.

Related

For plain hex ⇄ RGB conversion see thehex to RGB converter, and check any pair for readability with thecontrast checker.

HSL lightness is not perceived lightness

HSL is a convenient way to reason about colour, and its lightness axis does not correspond to how bright a colour looks. Pure yellow and pure blue both sit at 50% lightness in HSL, yet yellow appears far brighter — because the model is a simple geometric transform of RGB rather than anything based on human vision. That is why adjusting lightness alone can produce unbalanced palettes, and why accessibility work uses theluminance-based contrast ratioinstead.