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

❮ CSS Functions Reference