CSS HSL Colors

HSL value

In CSS, color can be specified using hue, saturation, and lightness (HSL) as follows:

hsla(hue, saturation, lightness)

Hue (hue）is the degrees from 0 to 360 on the color wheel. 0 is red, 120 is green, and 240 is blue.

Saturation (saturation）is a percentage value, 0% represents grey shadow, while 100% is full color.

Brightness (lightness）is also a percentage, 0% is black, 50% is neither bright nor dark, and 100% is white.

Please experiment by mixing the following HSL values:

　

HUE

0

SATURATION

100%

LIGHTNESS

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

Try It Yourself

Saturation

Saturation can be described as the intensity of the color.

100% is pure color, without any grey shadow

50% is 50% grey, but you can still see the color.

0% is completely grey, and you can no longer see any 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%)

Try It Yourself

Brightness

The brightness of the color can be described as how much light is to be given to the color, where 0% represents not bright (black), 50% represents 50% bright (neither dark nor bright), and 100% represents fully bright (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%)

Try It Yourself

Grey shadows are usually defined by setting the hue and saturation to 0, and adjusting the brightness from 0% to 100% to get darker/lighter shadows:

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

Try It Yourself

HSLA value

The HSLA color value is an extension of the HSL color value with an Alpha channel - it specifies the opacity of the color.

The HSLA color value is specified as:

hsla(hue, saturation, lightness, alpha)

alpha The parameters are numbers between 0.0 (completely transparent) and 1.0 (completely opaque):

Please experiment by mixing the following HSLA values:

　

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

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)

Try It Yourself