Another color format is HSL. This stands for hue, saturation, and lightness. The format is similar to the RGB color value format, but 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.
hsl(hue value, saturation value, lightness value);
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.
Saturation
This represents the intensity of the hue and is measured with a percentage. 100% is full intensity, while 0% results 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 a setting of 100% results in white. 50% is the average starting point. 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 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.
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( ); values | ||||
|---|---|---|---|---|
| (0,100%,50%,0.0) | (0,100%,50%,0.2) | (0,100%,50%,0.5) | (0,100%,50%,0.7) | (0,100%,50%,1.0) |
