CSS hsla() Function

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.

Example

#

An element with a background color calculated by the hsla function.

An hsla background color
<style>
  .hsla-example {
    padding: 30px;
    background-color: hsla(9, 65%, 90%, 50%);
  }
</style>

<div class="hsla-example">An hsla background color</div>

Syntax

hsla(hue, saturation, lightness, alpha);

Values

#

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).

Browser support

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

You may also like

Guides