CSS: HSL Color

By Xah Lee. Date: 2012-04-20. Last updated: 2022-02-23.

HSL Color Generator

Hue:

Saturation:

Lightness:

HSL Color Syntax

hsl(hue, saturation%, lightness%)

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

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

HSL Color Examples

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

CSS Color