CSS3 HSL (Hue, Saturation, Lightness) Color Samples

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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

css selector {background-color: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.

Random Color Generator

(click the button to see a random color)



blog comments powered by Disqus