Web Developer's Reference Guide

Colors

Colors can make or break a design, there are many ways to go about creating palettes and all that good stuff.

Let's take a look at HSL(a) and RGB(a).

hsl() and hsla()

The hsl() and hsla() CSS functional notations set the color in HSL/HSLa formats, and they look like this:

background-color: hsl(10, 20%, 30%);
background-color: hsla(10, 20%, 30%, .5);

Description

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 ...