The hsla function returns a color based on hue, saturation, lightness, and alpha.
The alpha value specifies the color's opacity or transparency.
This function can be used by any property that requires a color value.
An element with a background color calculated by the hsla function.
<style>
.hsla-example {
padding: 30px;
background-color: hsla(9, 65%, 90%, 50%);
}
</style>
<div class="hsla-example">An hsla background color</div>
hsla(hue, saturation, lightness, alpha);
| Value | Description |
|---|---|
hue |
An angle in the color wheel; 0 or 360 represents red, 120 is green, 240 is blue. |
saturation |
Color saturation; 0% is a shade of gray and 100% is full color. |
lightness |
Color lightness; 0% is dark, 50% is normal, and 100% is light. |
alpha |
Color opacity or transparency between 0 (transparent) to 1 (opaque). |
This table shows when hsla support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
9.5 | Jun 2008 |
 Safari
|
3.1 | Mar 2008 |
