CSS hsl() Function

Example

Define different HSL colors:

#p1 {background-color:hsl(120,100%,50%);} /* green */
#p2 {background-color:hsl(120,100%,75%);} /* light green */
#p3 {background-color:hsl(120,100%,25%);} /* dark green */
#p4 {background-color:hsl(120,60%,70%);} /* pastel green */

Try it Yourself »

Definition and Usage

The hsl() function define colors using the Hue-saturation-lightness model (HSL).

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

Version:	CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
hsl()	1.0	9.0	1.0	3.1	9.5

CSS Syntax

hsl(hue, saturation, lightness)

Value	Description
hue	Defines a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
saturation	Defines the saturation; 0% is a shade of gray and 100% is the full color (full saturation)
lightness	Defines the lightness; 0% is black, 50% is normal, and 100% is white

❮ CSS Functions Reference