How HSL works:
- Hue
- measured in an angle from 0 to 360 where
- 0 is red, 120 is green, and 240 is blue
- Saturation
- 0% is completely desaturated (gray)
- 100% is at its most pure vibrancy
- Lightness
- 0% is black
- 100% is white
- 50% is the “normal” color lightness
Example colors:
- white: #ffffff = hsl(0 0% 100%)
- black: #000000 = hsl(0 0% 0%)
- red: #ff0000 = hsl(0 100% 50%)
- green: #008000 = hsl(120 100% 25.1%)
- blue: 0000FF = hsl(240, 100%, 50%)