CSS hsla() function
Example
Define HSL color and set transparency:
#p1 {background-color:hsl(120,100%,50%,0.3);} /*green*/
#p2 {background-color:hsl(120,100%,75%,0.3);} /*light green*/
#p3 {background-color:hsl(120,100%,25%,0.3);} /*dark green*/
#p4 {background-color:hsl(120,60%,70%,0.3);} /*soft green*/
Try it Yourself »
Definition and usage
The hsla() function uses hue, saturation, lightness, and alpha to define a color.
HSLA stands for Hue, Saturation, Lightness, Alpha.
- Hue (H)Hue is a basic property of color, which is the color name commonly referred to, such as red, yellow, etc.
- Saturation (S)Saturation refers to the purity of the color. The higher it is, the purer the color; the lower it is, the more it gradually turns gray, taking values from 0-100%.
- Lightness (L)It takes 0-100%. Increasing lightness shifts the color toward white; decreasing lightness shifts the color toward black.
- Opacity (A)It takes a value between 0 and 1, representing transparency.
Supported versions: CSS3
Browser Support
The numbers in the table represent the first browser version number that supports this function.
| Function | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
CSS Syntax
hsla(hue, saturation, lightness, alpha)
| Value | Description |
|---|---|
| hue - hue | Define hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. |
| saturation - saturation | Define saturation; 0% is gray, 100% is full color. |
| lightness - brightness | Define lightness; 0% is dark, 50% is normal, 100% is white. |
| alpha - opacity | Define transparency, from 0 (fully transparent) to 1 (fully opaque). |
other extensions