HSL
Hue, Saturation and Lightness — an intuitive way to describe colors that maps closely to how people actually think about them.
hsl(243 75% 59%).The three components
Hue (0–360°)
Hue is the position on the color wheel. 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue and 300° is magenta. Hue wraps around — 360° is the same as 0°.
Saturation (0%–100%)
Saturation controls how vivid the color is. At 0% the color is gray. At 100% it is fully saturated — the purest, most vivid version of that hue. Lower saturation values produce muted, subdued colors.
Lightness (0%–100%)
Lightness controls brightness. At 0% the color is always black. At 100% it is always white. At 50% the color is at its purest — the hue is fully visible, unaffected by black or white.
Why HSL is intuitive
RGB values (79, 70, 229) do not tell you much about how the color will look. HSL values (243°, 75%, 59%) do — you can immediately see that the color is a blue-violet hue, that it is fairly saturated, and that it is slightly lighter than mid-tone. This makes HSL useful for:
- Adjusting brightness — increase or decrease the L value without changing the hue or saturation.
- Building shade scales — hold H and S constant, vary L from 5% to 95%.
- Rotating hue — change one number to shift the color family.
- Muting a color — reduce saturation for a soft, desaturated variant.
The full hue wheel in HSL
| Hue | Color |
|---|---|
| 0° | Red |
| 30° | Orange |
| 60° | Yellow |
| 90° | Yellow-green |
| 120° | Green |
| 150° | Spring green |
| 180° | Cyan |
| 210° | Azure |
| 240° | Blue |
| 270° | Violet |
| 300° | Magenta |
| 330° | Rose |
HSL vs RGB vs HSV
| Model | Channels | Third channel meaning |
|---|---|---|
| RGB | R, G, B | Brightness of each primary light |
| HSL | H, S, L | Lightness — 0% black, 50% pure hue, 100% white |
| HSV / HSB | H, S, V | Value — 0% black, 100% brightest, most vivid |
In HSL, 100% lightness is always white. In HSV, 100% value is the vivid color with no white or black mixed in. HSV is common in image editors (Photoshop's "HSB" sliders); HSL is common in CSS and design tools.
Is HSL perceptually uniform?
No. HSL is a simple transformation of RGB, so its lightness axis is not perceptually uniform. A 50% lightness yellow looks much brighter than a 50% lightness blue, even though both have the same numerical lightness. This is because yellow light is intrinsically brighter than blue light at the same intensity.
For perceptually uniform work — building scales, generating palettes, matching contrast — use OKLCH or CIE Lab instead. HSL remains useful for its intuitive controls and simple mathematics, but it is not the right tool for perceptually even results.
Practical syntaxes in CSS
/* Classic comma syntax */
color: hsl(243, 75%, 59%);
color: hsla(243, 75%, 59%, 0.5);
/* Modern space-separated syntax */
color: hsl(243 75% 59%);
color: hsl(243 75% 59% / 0.5);
/* Adjusting lightness in a scale */
color: hsl(243 75% 90%);
color: hsl(243 75% 70%);
color: hsl(243 75% 50%);
color: hsl(243 75% 30%);Continue reading
Frequently asked questions
What is HSL?
HSL stands for Hue, Saturation and Lightness. It describes a color as an angle on the color wheel (0–360°), a saturation percentage and a lightness percentage. It is an intuitive alternative to RGB because the three values map to concepts people can reason about directly.
What is the difference between HSL and HSV?
Both use a hue angle. In HSL the third value is lightness — 0% is black, 100% is white, 50% is the purest hue. In HSV (also called HSB) the third value is value or brightness — 0% is black, 100% is the brightest version. HSV is common in image editors; HSL is more common in CSS.
Is HSL perceptually uniform?
No. HSL is a simple mathematical transformation of RGB, so its lightness axis is not perceptually uniform. A 50% lightness yellow looks much brighter than a 50% lightness blue. For perceptually uniform work, use OKLCH or Lab.
When should I use HSL in design?
Use HSL when you want to reason about colors as "this hue with these saturation and lightness values" — for example, when adjusting a color's brightness without changing its hue. Avoid HSL when you need perceptually even palettes; use OKLCH there instead.
How do I convert HSL to RGB?
The conversion is a well-defined algorithm that maps hue, saturation and lightness to red, green and blue channel values. Use our color converter to do it automatically — the math is not something most designers need to work through by hand.