HSL stands for Hue, Saturation, and Lightness (or Luminance). The a stands for Alpha, which is the alpha channel, with which we declare the transparency of the color.

The hsl() function supports three or four values separated by commas. The first value is the hue, which is the base color. This is declared with a unitless number. This number represents an angle in degrees (10 = 10º) in the color wheel from 0 to 360. So, 0 and 360 are Red, 90 is Yellow-Green, 180 is Cyan, and 270 is Blue-Magenta.

The second value is the saturation, which is basically the amount of the base color. This is declared with a percentage value. 0% means there is no base color at all and it shows gray. 100% means the base color is full.

The third value is the lightness, also known as luminance. This is basically the brightness of the base color. 0% means there is no lightness, hence it's black. 100% is full lightness, hence it looks white. 50% means the base color is full.

The fourth value is the alpha channel. This is the transparency of the color. It's declared with a unitless numeric decimal value from 0 to 1. Complete transparent is 0, and 1 is fully opaque.

The great advantage that HSL color naming system has over RGB is that it is more intuitive. Once we choose a base color, we can easily create a palette based on that color by only changing the saturation and lightness values.

You can see the HSL color wheel in CodePen: http://tiny.cc/hsl-color-wheel

CSS:

/*HSL*/
.element { background-color: hsl(240, 100%, 50%); }
/*HSLa*/
.element { background-color: hsla(10, 20%, 30%, .5); }

RGB stands for Red, Green and Blue. The a stands for Alpha, which is the alpha channel with which we declare the transparency of the color.

This supports three or four unitless numeric values separated by commas, or three percentage values and one unitless numeric value. The last value is for the alpha channel.

The numeric values range from 0 to 255. The percentage values range from 0% to 100%. For example, we can represent the color green as rgb(0, 255, 0) or rgb(0, 100%, 0).

As I just mentioned, the fourth value is the alpha channel. This is the transparency of the color. It's declared with a unitless numeric decimal value from 0 to 1. Complete transparent is 0, and 1 is fully opaque.

CSS:

/*RGB*/
.element { background-color: rgb(240, 100, 50); }
/*RGBa*/
.element { background-color: rgba(10, 20, 30, .5); }