CSS HSL Colors

HSL stands for hue, saturation, and lightness. In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form: hsl( hue, saturation, lightness ) Hue is a degree on the color wheel (from 0 to 360): 0 (or 360) is red 120 is green 240 is blue Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color.

Experiment by mixing the HSL values below:

100%

50%

Example hsl(0, 100%, 50%) hsl(240, 100%, 50%) hsl(147, 50%, 47%) hsl(300, 76%, 72%) hsl(39, 100%, 50%) hsl(248, 53%, 58%)

Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray. 50% is 50% gray, but you can still see the color.

Example hsl(0, 100%, 50%) hsl(0, 80%, 50%) hsl(0, 60%, 50%) hsl(0, 40%, 50%) hsl(0, 20%, 50%) hsl(0, 0%, 50%)

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) and 100% means full lightness (white).

Example hsl(0, 100%, 0%) hsl(0, 100%, 25%) hsl(0, 100%, 50%) hsl(0, 100%, 75%) hsl(0, 100%, 90%) hsl(0, 100%, 100%)

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:

Example hsl(0, 0%, 0%) hsl(0, 0%, 24%) hsl(0, 0%, 47%) hsl(0, 0%, 71%) hsl(0, 0%, 94%) hsl(0, 0%, 100%)

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla( hue, saturation, lightness, alpha ) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all): Experiment by mixing the HSLA values below:

100%

50%

0.5

Example hsla(9, 100%, 64%, 0) hsla(9, 100%, 64%, 0.2) hsla(9, 100%, 64%, 0.4) hsla(9, 100%, 64%, 0.6) hsla(9, 100%, 64%, 0.8) hsla(9, 100%, 64%, 1)