CSS hsla() Function

CSS Functions

Example

Define HSL colors and set their transparency:

#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 */

Definition and Usage

The hsla() function defines colors using hue, saturation, lightness, and alpha (transparency).

HSLA stands for Hue, Saturation, Lightness, Alpha.

Hue (H) is the basic attribute of color, commonly known as the color name, such as red, yellow, etc.
Saturation (S) refers to the purity of the color; the higher the saturation, the purer the color, and the lower it becomes gray, with values ranging from 0-100%.
Lightness (L) ranges from 0-100%; increasing lightness makes the color approach white, while decreasing it makes the color approach black.
Alpha (A) ranges from 0 to 1, representing transparency.

Supported Version: CSS3

Browser Support

The numbers in the table indicate the first browser version that supports the function.

Function	Chrome	IE	Firefox	Safari	Opera
hsla()	1.0	9.0	1.0	3.1	9.5

CSS Syntax

hsla(hue, saturation, lightness, alpha)

Value	Description
hue	Defines the hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
saturation	Defines the saturation; 0% is gray, 100% is full color
lightness	Defines the lightness; 0% is dark, 50% is normal, 100% is white
alpha	Defines the transparency from 0 (completely transparent) to 1 (completely opaque)

CSS Functions

❮ Css3 Pr Border Radius Css3 Pr Nav Left ❯