CSS3 Click Chart

HSL and HSLA Colors

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


HSL and HSLA color values on W3C

Example Code

Live Demonstration

The background color of this paragraph is defined using an HSLA setting of hsla(10, 100%, 50%, 0.2)

Browser Support

Tools / Polyfills

Mother-Effing HSL
RGBa & HSLa CSS Generator for Internet Explorer
HSL to RGB / RGB to HSL / Hex Colour Converter

Tutorials / Articles

Coding Colors Easily Using CSS3 hsl() Notation
Screencast: Why HSL Colors are Awesome

Fork me on GitHub