Hue-Saturation-Lightness hsl() Functional Notation

The hsl model uses the rainbow color circle (hue) combined with color
saturation and lightness in the format: hsl(H,S,L)H (Hue) = Angle of
the color circle from 0 to 360S (Saturation) = Color saturation from
0% to 100% (100% is full saturation, 0% is a shade of grey)L (Lightness)
= Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)

Samples:

HTML: <div style="color:hsl(240,100%,50%);">

CSS: .classname {color:hsl(240,100%,50%);}

hsl(0,0%,0%)
(black)

hsl(0,100%,50%)
(red)

hsl(120,100%,50%)
(green)

hsl(240,100%,50%)
(blue)

Saturation Sample (normal 50% lightness):

hsl(240,100%,50%)
(blue 100% saturation)

blue

hsl(240,75%,50%)
(blue 75% saturation)

hsl(240,50%,50%)
(blue 50% saturation)

hsl(240,25%,50%)
(blue 25% saturation)

hsl(240,0%,50%)
(blue 0% saturation)

shade of gray

Lightness Sample (100% saturation):

hsl(240,100%,100%)(blue 100% lightness)

white

hsl(240,100%,75%)
(blue 75% lightness)

hsl(240,100%,50%)
(blue 50% lightness)

normal

hsl(240,100%,25%)
(blue 25% lightness)

hsl(240,100%,0%)
(blue 0% lightness)

black

Hue-Saturation-Lightness-Alpha hsla() Functional Notation

The hsla model uses the rainbow color circle (hue) combined with color
saturation, lightness and alpha in the format: hsla(H,S,L,A).H (Hue)
= Angle of the color circle from 0 to 360S (Saturation) = Color saturation
from 0% to 100% (100% is full saturation, 0% is a shade of grey)L (Lightness)
= Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)
A (Alpha) = Alpha (transparency) value between 0.0 (fully-transparent/invisible)
and 1.0 (non-transparent)

Disclaimer: The information on this page is provided "as is" without warranty of any kind.
Further, Arclab Software does not warrant, guarantee, or make any representations
regarding the use, or the results of use, in terms of correctness, accuracy, reliability, currentness, or otherwise.
See: License Agreement