What Is HSL Color? Hue, Saturation, and Lightness Explained
- HSL stands for Hue, Saturation, Lightness — a way to describe colors that is more intuitive than RGB.
- Hue is the angle on a color wheel (0-360 degrees). Saturation is color intensity (0-100%). Lightness is brightness (0-100%).
- Use the converter above to get the HSL value for any hex code.
- HSL is most useful in CSS when you want to create color variations by adjusting one value at a time.
Table of Contents
HSL is a color model that describes colors the way humans think about them: as a base hue (what color), a saturation (how vivid), and a lightness (how bright or dark). The converter above shows the HSL value alongside RGB for any hex code you enter.
Unlike RGB, where you need to change all three channels to create a lighter version of a color, HSL lets you adjust just the lightness value. That makes it especially useful for generating color scales and design system tokens in CSS.
The Three HSL Components Explained
Hue (0-360 degrees)
Hue is the base color, expressed as a degree on a color wheel. 0 and 360 are both red. As the value increases, the color rotates: 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, back to 360 (red).
Saturation (0-100%)
Saturation controls color intensity. 100% is the most vivid version of that hue. 0% is a neutral gray regardless of the hue value — all the color drains away.
Lightness (0-100%)
Lightness controls brightness. 0% is always black. 100% is always white. 50% gives the purest, most normal version of the color. Values below 50% darken the color; values above 50% lighten it toward white.
How HSL Compares to RGB and Hex
All three formats describe the same colors — they are just different ways of expressing the same data.
- Hex (
#3B82F6) — compact, universal, standard for design tools and brand guidelines. No direct relationship to human perception. - RGB (
rgb(59, 130, 246)) — direct channel control, required for opacity in rgba(). Also not perceptually intuitive. - HSL (
hsl(217, 91%, 60%)) — most intuitive for humans. You can predict what changing one value will do: increase lightness to make it pastel, decrease saturation to mute it.
The hex code #3B82F6 converts to hsl(217, 91%, 60%) — a vivid blue at medium lightness. The converter above shows all three formats together.
Using HSL Colors in CSS
CSS accepts HSL natively:
.btn-primary {
background: hsl(217, 91%, 60%);
}
/* Lighter version — just increase lightness */
.btn-primary:hover {
background: hsl(217, 91%, 70%);
}
/* Darker version */
.btn-primary:active {
background: hsl(217, 91%, 50%);
}
CSS also supports hsla() for transparency, and the modern space-separated syntax: hsl(217 91% 60%) (no commas). Both are fully supported in current browsers.
This predictability — adjusting one value to generate a whole scale — is why many design systems define tokens in HSL and why tools like Tailwind CSS compute their color scales using HSL math internally.
When to Use HSL Instead of RGB or Hex
HSL is the right choice when:
- Generating color scales programmatically — create a 9-step lightness scale from a single hue by incrementing L from 10% to 90%
- Building theme systems — a dark mode can simply reduce L values across the board
- Creating color variations on the fly — hover states, focus rings, disabled states all come from adjusting L or S of the base color
Hex and RGB are better for static, exact colors from a design file. Use HSL when you need to reason about or generate color variations in code.
See the HSL Value for Any Hex Code
Paste any hex code into the converter above — RGB and HSL are shown side by side instantly.
Open Hex to RGB ConverterFrequently Asked Questions
What is the difference between HSL and HSV/HSB?
HSL (Hue, Saturation, Lightness) and HSV/HSB (Hue, Saturation, Value/Brightness) are related but not identical. In HSL, 50% lightness is the pure color and 100% is white. In HSV, 100% value is the pure color and 0% is black. Adobe tools use HSB; CSS uses HSL.
How do I convert hex to HSL manually?
Convert hex to normalized RGB (divide by 255), then apply the HSL formulas: find max and min of R, G, B; L = (max+min)/2; S = (max-min)/(1-|2L-1|) if L != 0 or 1; H depends on which channel is max. In practice, use the converter — it handles all this automatically.
Is HSL supported in all browsers?
Yes. hsl() and hsla() have been supported in all major browsers since 2010. The modern comma-free syntax (hsl(217 91% 60%)) is supported in browsers from 2019 onward.
What does hsl(0, 0%, 50%) look like?
A medium gray. When saturation is 0%, all hue information is stripped and the color becomes a neutral gray. Lightness 0% is black, 100% is white, and 50% is exactly mid-gray (#808080).
