HSL Color « htmlUI

CSS3 HSL Color

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