HSL colors are described with three values, in order:
- hue - a number representing an angle on the color circle (a rainbow of color represented in a circle). This is what we typically think of when we think of a “color”.
- saturation - how pure the hue is. A pure color is 100% saturated, while grays are unsaturated.
- lightness - how light or dark the hue is. White is 100% lightness, while black is 0% lightness.
To pick a color using HSL, first choose the hue you want to use. Red is 0 or 360°, green is 120° and blue is 240°. Then decide how saturated and light or dark you want it.
The benefit to HSL colors is that they are a lot easier to guess at. You simply start with a hue on the color wheel and then adjust the saturation and lightness until you've got the one you want.
HSL is sometimes called HSB for hue, saturation, and brightness. And sometimes HSV for hue, saturation, and value.
Some Commonly Used Hue Numbers
- red: 0 or 360
- orange: 30
- yellow: 60
- yellow-green: 90
- green: 120
- green-cyan: 150
- cyan: 180
- cyan-blue: 210
- blue: 240
- blue-magenta: 270
- magenta: 300
- magenta-red: 330