CSS HSL Color Samples

, , …,

Random Color Generator

(click the button to see a random color)

CSS HSL Color Syntax

You can use HSL color model to specify a color. Here's the syntax:

hsl(hue, saturation%, lightness%)


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

HSL Color Examples

Changing Hue

Changing Saturation

Changing Lightness

Lightness goes from black to white.

See also: CSS Color Transparency/Opacity.


CSS Color Module Level 3

Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.
blog comments powered by Disqus