Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.
Hue is measured in degrees, where 0° is red, 120° is green, and 240° is blue.
Saturation is how colorful or vivid a color looks. 0% saturation is grey (no color), and 100% saturation is vibrant and intense.
Lightness measures how close a color is to black or to white.
The Chrome DevTools colour picker supports HSL, shows contrast ratio.
True grey has a saturation of 0% — it doesn’t have any actual color in it at all.
But in practice, a lot of the colors that we think of as grey are actually saturated quite heavily.
If you want your greys to feel cool, saturate them with a bit of blue:
To give your greys a warmer feel, saturate them with a bit of yellow or orange:
Use other visual cues to communicate important information to the user.
1. Ditch hex for HSL
2. Greys don't have to be grey
3. Don't rely on colour alone