HSL is an abbreviation of hue, saturation, and lightness. It is a color model used to describe colors in a way that is easier for humans to interpret than the straight RGB color model.
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.
HSL is a color system that is available in CSS 3. To use it, you separate the three values as numbers like you would in RGB colors:
Red: hsl(0,100%,100%)
Green: hsl(120,100%,100%)
Blue: hsl(240,100%,100%)
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


