Loading...

The syntax for HSL is similar to RGB’s, but the context for determining the color is quite different.

Using the HSL format for declaring color choices has become more prominent. It stands for hue, saturation and lightness. Instead of indicating the amount of each color being used, this approach chooses the desired base color, and then alters its intensity as well as its tint or shade. Click through the slideshow to see how HSL is broken down.

Hue

This is the base color. It is chosen based on its degree location on the color wheel. 0° is red, 120° is green, and 240° is blue.

hue wheel

Saturation

This represents the intensity of the hue, and is measured with a percentage. 100% is full intensity, while 0% would result in a gray.

0% 25% 50% 75% 100%

Lightness

This is how light or dark a color will display. This is also measured based on percentage. A lightness setting of 0% results in black, while 100% results in white. 50% is the average starting point, and you can determine how much you'd want to lighten or darken your color from there, if at all.

0% 25% 50% 75% 100%

Using the HSL approach can make it much easier to create variations on the same color with very little effort or calculation. It can be a convenient tool when trying to develop color schemes for designing your webpages.

And as with RGBA, you can use HSLA by adding an alpha value on the end of your color choice. This addition is handled in the same way as RGBA.

hsla(0,100%,50%,0.0) hsla(0,100%,50%,0.2) hsla(0,100%,50%,0.5) hsla(0,100%,50%,0.7) hsla(0,100%,50%,1.0)