CSS Reference Manual

CSS @rules (RULES)

Complete list of CSS properties

CSS @charset Rule CSS Functions (Functions)

CSS hsla() function

Online Example

Define HSL color and set opacity:

Example

<!DOCTYPE html>
<title>Basic Tutorial(oldtoolbag.com)</title>　
<style>
body {
　　　　background: url('/run/images/bg2.png'); beige;
　　　　color: hsla(0, 0%, 0%,　1);
　　　　font-size:　2em;
　}
article {　
　　　　background-color: hsla(30,　100%,　50%, 0.5);
　　　　border:　5px solid darkorange;
　　　　margin:　20px;
　　　　text-align: center;
　　　　}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>

Test and see ‹/›

Definition and Usage

The hsla() function uses hue, saturation, lightness, and transparency to define color.

HSL is hue, saturation, lightness, and transparency (in English: Hue, Saturation, Lightness, Alpha).

Hue (H)It is the basic attribute of color, which is what is commonly called the color name, such as red, yellow, etc.
Saturation (S)It refers to the purity of color, the higher the purity of color, the purer the color, and the lower it gradually turns gray, take 0-10The value of 0%.
Brightness (L) Take 0-100%, increases brightness, the color changes towards white; decreases brightness, the color changes towards black.
Transparency (A) Value range 0~1 between, representing transparency.

Supported version: CSS3

Browser Compatibility

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

Function
hsla()	1.0	9.0	1.0	3.1	9.5

CSS Syntax

hsla(hue, saturation, lightness, alpha)

Value	Description
hue - Hue	Define hue (0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
saturation - Saturation	Define saturation; 0% is gray, 100% full color
lightness - Brightness	Define brightness 0% as dark, 50% is normal, 100% is white
alpha - Transparency	Define transparency 0 (completely transparent) ~ 1(Completely Opaque)

Alpha Variations

Here is an example of the same color repeated multiple times (on the background image), but each color has a different alpha value.

All other values are the same (i.e., all rows have the same hue, saturation, and brightness), only the alpha channel changes.

This indicates that as the alpha value increases, the background image becomes less visible (the stars are the background image).

Blue

`hsla(240, 100%, 50%, 0)`
`hsla(240, 100%, 50%, 0.1)`
`hsla(240, 100%, 50%, 0.2)`
`hsla(240, 100%, 50%, 0.3)`
`hsla(240, 100%, 50%, 0.4)`
`hsla(240, 100%, 50%, 0.5)`
`hsla(240, 100%, 50%, 0.6)`
`hsla(240, 100%, 50%, 0.7)`
`hsla(240, 100%, 50%, 0.8)`
`hsla(240, 100%, 50%, 0.9)`
`hsla(240, 100%, 50%, 1)`

Set HSL

Compared to the RGB color model, the HSL color model is more intuitive in setting colors. Especially once you know how HSL works.

I have written about hsl() The content of the function explains hsla()The function has more details than what is written here. If you are unsure how to set and adjust the base color, please check it out.

CSS Function

CSS @charset Rule CSS Functions (Functions)