Ask someone to describe a colour and they will not say “61 red, 220 green, 132 blue.” They will say “a bright green, a bit on the mint side.” That is three ideas — which colour, how vivid, how bright — and it is exactly what the HSL and HSV models encode. This is why colour pickers, design tools and CSS-savvy developers reach for them: they match how humans actually reason about colour.
Convert any colour into HSL as you read with the RGB → HSL or HEX → HSL converter.
The three parts
- Hue (H) — the colour itself, as an angle from 0–360° around a wheel. 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta, then back to red. Rotating the hue walks through the rainbow.
- Saturation (S) — how vivid vs. grey, from 0% (a shade of grey) to 100% (fully pure colour).
- Lightness (L) — how bright, from 0% (black) through 50% (the vivid colour) to 100% (white).
So hsl(151, 68%, 55%) reads as “a green-cyan hue, fairly vivid, a little lighter than mid” — and it is the same colour as #3DDC84 and rgb(61, 220, 132) from the RGB & HEX article. The numbers are completely different, but they point to the same green; HSL just slices the colour space along axes people find natural.
Why it makes editing easy
The power of HSL is that common adjustments become single-number changes:
| You want to… | In HSL |
|---|---|
| Make a tint (lighter) | Raise L |
| Make a shade (darker) | Lower L |
| Mute / desaturate | Lower S |
| Recolour, same feel | Change H only |
| Build a complementary colour | Add 180° to H |
Try the same in RGB and every adjustment means juggling three numbers at once with no obvious relationship to the result. That is the gap HSL fills — it is a control panel for colour rather than a storage format.
HSL vs. HSV: the third number
HSL and HSV share hue and saturation but treat the brightness axis differently, which trips people up:
- HSL — Lightness. 0% = black, 50% = the pure vivid colour, 100% = white. Symmetric: it builds in both tints (toward white) and shades (toward black). Best for web, where you often want “the same colour, lighter/darker.”
- HSV — Value (brightness). 0% = black, 100% = the pure colour, with no white at the top. To get white you drop saturation to 0 at full value. This maps neatly onto the classic square-plus-hue-strip colour picker in image editors.
Same colours, different mental model. If you are tinting a UI, HSL feels right; if you are dialling a colour on a picker square, you are probably using HSV.
One honest limitation
HSL is intuitive but not perceptually uniform: “lightness 50%” does not look equally bright across hues — a 50% yellow looks far brighter than a 50% blue, even though the number is identical. So HSL is excellent for hand-tweaking but unreliable when you need colours that look evenly spaced or genuinely equal in brightness — for accessibility contrast or smooth gradients. That job belongs to the perceptual models like OKLCH, which keep the same intuitive hue/chroma/lightness idea but fix the “equal numbers should look equal” problem.
In practice
Design and adjust in HSL, then convert to hex to ship. The colour converters move any colour between HSL, RGB, HEX and the rest instantly and locally. For the full map of when to use which model, see Color Spaces Explained.
Frequently asked questions
What is the difference between HSL and HSV?
Both share hue and saturation; they differ in the third value. HSL uses Lightness, where 50% is the pure vivid colour, 100% is white and 0% is black. HSV uses Value (brightness), where 100% is the pure colour and there is no built-in white — you reduce saturation to get there. HSL is more intuitive for web tints/shades; HSV maps better to a classic colour-picker square.
What does hue mean in HSL?
Hue is the colour itself, expressed as an angle from 0 to 360 degrees around a colour wheel: 0 is red, 120 is green, 240 is blue, and back to red at 360. Changing only the hue rotates a colour through the rainbow while keeping its vividness and brightness.
How do I make a colour lighter without changing its hue?
In HSL, increase the lightness and leave hue and saturation alone. That is the whole appeal of HSL: tints and shades are a single-number change, which is awkward to do in RGB or hex.
Is HSL better than RGB?
Neither is better — they describe the same colours. RGB/HEX is best for storing and displaying a colour; HSL is best for adjusting one by hand. Tools convert between them freely, so you can design in HSL and ship the resulting hex.
How do I build a colour palette with HSL?
Use the hue angle. Keep saturation and lightness fixed and rotate the hue: +180° gives a complementary colour, three hues 120° apart give a triadic scheme, and a few hues within about 30° give a harmonious analogous set. Because only the hue changes, the colours feel like they belong together.
Can I use HSL directly in CSS?
Yes. CSS accepts hsl() and hsla() colour values, like hsl(151 68% 55%), so you can write colours in the form you reason about without converting to hex first. It is especially handy for generating tints and shades of a base colour by adjusting only the lightness.
Why does 50% lightness look brighter for yellow than for blue?
Because HSL is not perceptually uniform — the lightness number is a simple geometric value, not a measure of how bright a colour actually looks to the eye. Yellow is intrinsically brighter than blue at the same HSL lightness. When you need colours that look equally bright, use a perceptual model like OKLCH instead.