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

The HSLA color value is an extension of the HSL color value, 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 ການສະແດງຄວາມພາວະສີຫົວ (ຈາກ 0 ຫາ 360) - 0 (ຫລື 360) ສະແດງຄວາມສະຫລາຍສີສີນິວຍາກຫລາຍ, 120 ສະແດງຄວາມສະຫລາຍສີສີນິວຍາກຫລາຍ, 240 ສະແດງຄວາມສະຫລາຍສີສີນິວຍາກຫລາຍ.
saturation ການສະແດງຄວາມສະຫລາຍ - 0% ສະແດງຄວາມສະຫລາຍສີສີນິວຍາກຫລາຍ (ສະແດງຄວາມສະຫລາຍສີສີນິວຍາກຫລາຍໄດ້)
lightness 定义亮度 - 0％ 是黑色、50％ 为正常、100％ 是白色。
alpha 定义不透明度，介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。