HSL stands for hue, saturation, and lightness. For HSL you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue.
The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness.
HSL(hue, saturation, lightness)
Monitors display colors as RGB, the browser simply converts the HSL value you give it into one the monitor can display.
The
hsl() declaration accepts three values:
| hue | in degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between. |
| saturation | as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored. |
| lightness | A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black. |
