CSS hsla() Function
Example
/* full opaque blue */
.example1 {
background: hsla(240, 100%, 50%, 0.75);
}
/* Whitespace syntax */
.example2 {
background: hsla(240 100% 50% / 0.75);
}
/* Percentage value for alpha */
.example3 {
background: hsla(240 100% 50% / 75%);
}Meaning
The hsla() css function specifies colors using the Hue-Saturation-Lightness-Alpha model.
Note: The legacy hsla() syntax is an alias for hsl(), accepting the same parameters and behaving in the same way.
Version: CSS3
Standard Syntax
hsla(hue, saturation, lightness / Alpha)
/* Whitespace syntax */
hsla(hue saturation lightness / Alpha)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. |
| Alpha | Specifies the opacity in percentage or a number between 0 and 1, where the number 1 corresponds to 100% and means full opacity, while 0 corresponds to 0% and means fully transparent. |
