CSS Click Chart

HSL, HSLA, and RGBA Colors

Allows colors to be defined in HSL (Hue, Saturation, and Lightness), HSLA format (Hue, Saturation, Lightness, and Alpha), or RGB plus Alpha format.

Specification

HSL, HSLA, and RGBA color values on W3C.

Example Code

.element {
  background: hsl(207, 38%, 47%);
  color: hsla(207, 38%, 47%, .8)
}

.element3 {
  background: rgba(25, 167, 200, .6);
}

Live Demonstration

The background color of this paragraph is defined using an RGBA setting of rgba(255, 43, 0, .2)

Browser Support

Can I Use css3-colors? Data on support for the hsla-rgba feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles