CSSHSL Colors

HSL Value

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.

Lightness is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.

Experiment by mixing the HSL values below:

Saturation

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.

0% is completely gray; you can no longer see the color.

Lightness

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

Shades of Gray

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:

HSLA Value

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:

Video: CSS Colors HSL