CSS hsla() Function
Example
Define different HSL colors with opacity:
#p1 {background-color:hsla(120,100%,50%,0.3);} /* green */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* light green */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* dark green */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* pastel green */
Try it Yourself »
Definition and Usage
The CSS hsla() function define colors using the Hue-saturation-lightness-alpha model (HSLA).
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the color.
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 3.0 | 3.1 | 10.0 |
CSS Syntax
hsla(hue, saturation, lightness, alpha)
| Value | Description |
|---|---|
| hue | Defines a degree on the color circle (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 |
| alpha | Defines the opacity as a number between 0.0 (fully transparent) and 1.0 (fully opaque) |
