CSS: HSL Color
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 from0%
(grey) to100%
(full color).lightness
is from0%
(black) to100%
(white).
Example
span.xyz {color:hsl( 0, 100%, 50%)}
HSL Syntax with Opacity
hsla(hue, saturation, lightness, opacity)
- opacity is from 0 to 1.
Example
div {background-color:hsla(120, 100%, 50%, 0.3)}
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%)