HSL and HSLa

One of two new color models introduced with CSS3, HSL (Hue Saturation Lightness) allows you to define any color in the spectrum by providing:

1. Hue - In degrees, 1 - 360 (larger values "loopback", i.e. 720 = 360)
2. Saturation - In percent, 0% - 100%
3. Lightness - In percent, 0% - 100%

HSLa adds an alpha channel to control the transparency of the color, defined as a value between 0 (transparent) and 1 (opaque).

Color Themes with HSL