Why convert to HSL at all?
HEX and RGB are good at naming a colour and bad at changing it. To make #2563EB lighter, you would have to adjust three numbers at once. In HSL the same blue is hsl(221, 83%, 53%):
- Hue (221) is the position on the colour wheel: 0 red, 120 green, 240 blue.
- Saturation (83%) is how vivid it is; 0% is grey.
- Lightness (53%) runs from black at 0% to white at 100%.
Change just the lightness and you get tints and shades that still look like the same blue. That is how many design systems build their colour scales.
A colour scale from one brand colour
| Lightness | HSL | HEX | Typical use |
|---|---|---|---|
| 95% | hsl(221, 83%, 95%) | #E8EEFD | Tinted background |
| 85% | hsl(221, 83%, 85%) | #B9CDF8 | Borders, hover fills |
| 53% | hsl(221, 83%, 53%) | #2563EB | The brand colour itself |
| 40% | hsl(221, 83%, 40%) | #1147BB | Pressed buttons |
| 30% | hsl(221, 83%, 30%) | #0D358C | Text on light backgrounds |
Questions
Why doesn't HSL to HEX give back exactly my original code?
HSL values are rounded to whole numbers, so converting back can shift a channel by 1 or 2: #2563EB becomes hsl(221, 83%, 53%), which converts back to #2463EB. The difference is invisible, but keep the original HEX as the master value in your brand guide.
Is a lightness of 50% the same brightness for every hue?
No. HSL lightness is a formula, not how bright a colour looks. Yellow at 50% looks much lighter than blue at 50%. For accessible text colours, always check actual contrast.