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);} /* Soft green */

Try it yourself

Definition and usage

The hsla() function uses the Hue-saturation-lightness-alpha model (HSLA) to define colors.

HSLA color values are an extension of HSL color values, with an Alpha channel - this channel specifies the opacity of the color.

Version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this feature.

Function
hsla() 1.0 9.0 3.0 3.1 10.0

CSS syntax

hsla(hue, saturation, lightness, alpha)
Value Description
hue Define the degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, and 240 is blue.
saturation Define saturation - 0% is grayscale, while 100% is full color (fully saturated).
lightness Define brightness - 0% is black, 50% is normal, 100% is white.
alpha Define opacity as a number between 0.0 (completely transparent) and 1.0 (completely opaque).