CSS: HSL Color

By Xah Lee. Date: 2012-04-20. Last updated: 2025-04-10.

HSL Color Generator

Hue:

Saturation:

Lightness:

hsl(hue, saturation, lightness)

hue is a integer from 0 to 360. (it's degree from color wheel. Ranges of rainbow hue)
saturation is from 0% (grey) to 100% (full color).
lightness is from 0% (black) to 100% (white).

span.xyz {color:hsl( 0, 100%, 50%)}

hsla(hue, saturation, lightness, opacity)

div {background-color:hsla(120, 100%, 50%, 0.3)}

hsl(0 , 100%, 50%)
hsl(20 , 100%, 50%)
hsl(40 , 100%, 50%)
hsl(60 , 100%, 50%)
hsl(60 , 100%, 50%)
hsl(80 , 100%, 50%)
hsl(100 , 100%, 50%)
hsl(120 , 100%, 50%)
hsl(140 , 100%, 50%)
hsl(160 , 100%, 50%)
hsl(180 , 100%, 50%)
hsl(200 , 100%, 50%)
hsl(220 , 100%, 50%)
hsl(240 , 100%, 50%)
hsl(260 , 100%, 50%)
hsl(280 , 100%, 50%)
hsl(300 , 100%, 50%)
hsl(320 , 100%, 50%)
hsl(340 , 100%, 50%)

hsl(0 , 0%, 50%)
hsl(0 , 10%, 50%)
hsl(0 , 20%, 50%)
hsl(0 , 30%, 50%)
hsl(0 , 40%, 50%)
hsl(0 , 50%, 50%)
hsl(0 , 60%, 50%)
hsl(0 , 70%, 50%)
hsl(0 , 80%, 50%)
hsl(0 , 90%, 50%)
hsl(0 , 100%, 50%)

hsl(0 , 100%, 0%)
hsl(0 , 100%, 10%)
hsl(0 , 100%, 20%)
hsl(0 , 100%, 30%)
hsl(0 , 100%, 40%)
hsl(0 , 100%, 50%)
hsl(0 , 100%, 60%)
hsl(0 , 100%, 70%)
hsl(0 , 100%, 80%)
hsl(0 , 100%, 90%)
hsl(0 , 100%, 100%)