CSS3 HSL (Hue, Saturation, Lightness) Color Samples

Xah Lee, 2012-04-20, …, 2012-11-06

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

div.xyz {background-color:hsl(‹hue›, ‹saturation›, ‹lightness›)}

• ‹hue› is a integer from 0 to 360. (it's degree from color wheel, going thru rainbow hue)
• ‹saturation› should be a percentage (⁖ 50%). It specifies how heavy is the color. A value of 0% makes it gray.
• ‹lightness› is a percentage. 0% makes it black. 100% makes it white.

Example:

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

HSL Color Model

HSL Color Examples

Varying Hue

• (0 , 100%, 50%)
• (20 , 100%, 50%)
• (40 , 100%, 50%)
• (60 , 100%, 50%)
• (80 , 100%, 50%)
• (100 , 100%, 50%)
• (120 , 100%, 50%)
• (140 , 100%, 50%)
• (160 , 100%, 50%)
• (180 , 100%, 50%)
• (200 , 100%, 50%)
• (220 , 100%, 50%)
• (240 , 100%, 50%)
• (260 , 100%, 50%)
• (280 , 100%, 50%)
• (300 , 100%, 50%)
• (320 , 100%, 50%)
• (340 , 100%, 50%)

Varying Saturation

• (0 , 0%, 50%)
• (0 , 10%, 50%)
• (0 , 20%, 50%)
• (0 , 30%, 50%)
• (0 , 40%, 50%)
• (0 , 50%, 50%)
• (0 , 60%, 50%)
• (0 , 70%, 50%)
• (0 , 80%, 50%)
• (0 , 90%, 50%)
• (0 , 100%, 50%)

Varying Lightness

Lightness goes from black to white.

• (0 , 100%, 0%)
• (0 , 100%, 10%)
• (0 , 100%, 20%)
• (0 , 100%, 30%)
• (0 , 100%, 40%)
• (0 , 100%, 50%)
• (0 , 100%, 60%)
• (0 , 100%, 70%)
• (0 , 100%, 80%)
• (0 , 100%, 90%)
• (0 , 100%, 100%)

See also: CSS Color Transparency/Opacity.

Reference

http://www.w3.org/TR/css3-color/