What Is HSL? The Hue, Saturation, Lightness Color Model Explained

If you have ever opened a design tool's color picker and seen three sliders instead of a string of letters and numbers, you have used HSL. It is one of the most common ways browsers, design apps, and CSS represent color, precisely because it maps onto how humans naturally talk about color: "a bit more red," "less washed out," "darker." This guide breaks down what each of the three values means, how HSL compares to hex and RGB, and where it is genuinely more useful.

The three parts of HSL

Every HSL color is written as three values, usually in the format hsl(hue, saturation%, lightness%). Each part controls a completely separate property of the color, which is what makes HSL so predictable to work with.

Hue: the base color (0 to 360 degrees)

Hue is your position on a color wheel, measured in degrees. It answers the question "what color is this, fundamentally?" before saturation or lightness change anything about its intensity or brightness. If you prefer to see this visually rather than as a table of numbers, our color wheel tool lets you drag around the full 360 degree range and watch the hue shift in real time.

Saturation: how intense the color is (0% to 100%)

Saturation controls how vivid or how muted a color looks. At 0% saturation, the hue is irrelevant, and you get a pure gray, since there is no color intensity left at all. At 100% saturation, the color is as bold and pure as that hue can be. Values in between produce the softer, muted, or pastel-leaning tones that show up constantly in real design work, where a fully saturated color often looks too loud next to body text or a neutral background.

Lightness: how close to black or white (0% to 100%)

Lightness is a scale from black to white, with the pure, saturated hue sitting exactly in the middle. At 0% lightness, every color becomes black, no matter what the hue or saturation say. At 100% lightness, every color becomes white. At 50% lightness, you see the hue at its truest, most saturated version. This is the property that makes HSL so practical: to make a color darker or lighter, you only touch this one number.

Why HSL is easier to reason about than hex or RGB

Hex codes like #3a6ea5 and RGB values like rgb(58, 110, 165) describe color in terms a computer's display hardware cares about: how much red, green, and blue light to mix. That is precise, but it is not how people think. If you want a darker version of that blue in hex or RGB, you cannot simply lower one number. You have to recalculate all three red, green, and blue channels together, usually by trial and error or with a hex to RGB converter.

HSL solves this by separating "what color" from "how bright." Darkening a color in HSL means lowering the Lightness value while keeping Hue and Saturation exactly the same. Want a lighter tint of the same blue for a hover state or a background? Raise the Lightness. Want a more muted, professional version of a bright brand color? Lower the Saturation. Nothing else has to change, which is exactly why HSL sliders are standard in design tools and why HSL shows up constantly in CSS custom properties when teams build color palettes and themes.

To see this in action, try converting a color you already use with the hex to HSL converter below and watch how a familiar hex code breaks down into a hue, a saturation, and a lightness value.

Building tints, shades, and palettes with HSL

This is where HSL earns its keep in real design work. A shade is a color mixed toward black, which in HSL just means lowering the Lightness. A tint is a color mixed toward white, which means raising the Lightness. A full palette built from one brand hue, at several lightness steps, keeps every color visibly related while still giving you the range you need for buttons, backgrounds, borders, and text.

• Consistent brand colors: keep Hue and Saturation fixed, vary only Lightness, for a button's default, hover, and active states.
• Accessible text on colored backgrounds: lowering Lightness on a background hue (or raising it for text) is a fast way to hit sufficient contrast; pair it with a contrast checker to confirm it passes.
• Dark mode palettes: many teams store a base Hue and Saturation per color role, then flip Lightness values for light versus dark themes instead of maintaining two unrelated color sets.
• Muted or pastel variants: dropping Saturation while keeping Hue and Lightness steady gives you a softer version of the same color family, useful for secondary UI elements.

HSL in CSS

Modern CSS supports HSL natively, written as hsl(hue saturation% lightness%) (or the older comma-separated syntax), and it also supports an optional alpha channel for transparency: hsl(210 48% 43% / 0.5). Because each value is independent, HSL pairs naturally with CSS custom properties. A team can define a base hue and saturation as custom properties, then reuse a single lightness scale across every component, so a full theme update is a matter of changing one or two numbers rather than hunting down dozens of hard-coded hex values.

If your codebase or design tool still outputs hex codes, you do not need to give those up. You can move between formats as needed. The tool below turns your adjusted HSL value back into the hex format most CSS files, image editors, and brand guidelines expect.

HSL, RGB, and hex are all the same color, described differently

It is worth being clear on one point: HSL is not a different set of colors than RGB or hex, it is a different way of describing the exact same colors. Every color a screen can display in RGB has a corresponding HSL value and a corresponding hex value, and converting between them never changes what color you end up with. The reason to reach for HSL specifically is workflow, not capability. If your task is picking a screen color for code, hex or RGB is fine, and the tool below converts between the two instantly. If your task is adjusting, comparing, or systematically varying colors, HSL is almost always the easier starting point. It is also worth knowing that HSL is a screen-only (RGB-based) model; if you are preparing colors for print, that is a separate conversion, covered in our guide on RGB vs CMYK.

Common mistakes and good to know

• Confusing Saturation with Lightness. Lowering Saturation makes a color gray and muted; lowering Lightness makes it dark. They are not interchangeable, and mixing them up is the most frequent HSL error.
• Forgetting Hue wraps at 360. Since Hue is an angle around a wheel, 0 and 360 are the same red. There is no "negative" hue, values simply cycle.
• Assuming 50% Lightness always looks vivid. At 50% Lightness with low Saturation, you still get a flat gray-ish tone. Lightness only shows the pure hue when Saturation is also high.
• Expecting HSL to match printed colors exactly. HSL describes light on a screen (it is derived from RGB), not ink on paper, so colors can shift when sent to print.

HSL is not a replacement for hex or RGB, it is a more human-friendly lens on the same underlying color. Once you get comfortable reading Hue as the color family, Saturation as the intensity, and Lightness as the brightness, adjusting any color by hand becomes far less guesswork and far more deliberate.