CSS hsl() Function
Example
/* full opaque blue */
.example1 {
background: hsl(240, 100%, 50%);
}
/* Whitespace syntax */
.example2 {
background: hsl(240 100% 50%);
}Meaning
The hsl() css function specifies colors using the Hue-Saturation-Lightness model.
Basic Colors
| hsl(0, 100%, 50%) | red | |
| hsl(30, 100%, 50%) | orange | |
| hsl(60, 100%, 50%) | yellow | |
| hsl(90, 100%, 50%) | lime green | |
| hsl(120, 100%, 50%) | green | |
| hsl(150, 100%, 50%) | blue-green | |
| hsl(180, 100%, 50%) | cyan | |
| hsl(210, 100%, 50%) | sky blue | |
| hsl(240, 100%, 50%) | blue | |
| hsl(270, 100%, 50%) | purple | |
| hsl(300, 100%, 50%) | magenta | |
| hsl(330, 100%, 50%) | pink | |
| hsl(360, 100%, 50%) | red |
Note: The legacy hsla() syntax is an alias for hsl(), accepting the same parameters and behaving in the same way.
Version: CSS3
Standard Syntax
hsl(hue, saturation, lightness)
/* Whitespace syntax */
hsl(hue saturation lightness)Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
| Argument | Description |
|---|---|
| hue | Specifies a degree on the color from 0 to 360. 0 (or 360) is red, 120 is green, 240 is blue.
This color wheel helps finding the angle associated with a color: |
| saturation | Specifies the saturation. 0% is a shade of gray and 100% is the full color. |
| lightness | Specifies the lightness. 0% is black, 100% is white and 50% is normal. |
