CSS hsla() Function

The CSS hsla() function can be used to add transparency to a color when using the HSL model. It allows you to specify a color value by specifying the hue, saturation, and light components of the color, as well as an alpha layer.

The hsla() function is an alias for the hsl() function. It accepts an HSL value as well as an optional alpha channel.

The hsla() function is based on the HSL color model. HSL (which stands for Hue Saturation Lightness) is a hue-based representation of the RGB color space of computer graphics.

The hsla() function accepts the HSLA value as a parameter. The HSLA value is provided as a list of four values — the three HSL values (which provide the hue, saturation, and light components respectively), and a fourth value, which provides the alpha channel. The list for the HSL portion can be space separated (modern syntax), or comma-separated (legacy syntax). When using the space-separated syntax, the HSL and alpha channel portions are separated by a forward slash (/).

Here's an example of what I mean:

The first of the four values — the hue component — represents an angle of the color circle.

You can specify the value as an angle in degrees (e.g. 180deg) or simply as a number (e.g. 180). For example, if you look at the color circle, blue is at 240 degrees, so it could be written as either 240deg or 240.

The second value is expressed as a percentage. It represents the amount of saturation in the color. For example, 100% is fully saturated (more colorful and intense), while 0 is a fully-unsaturated gray.

The third value is also expressed as a percentage. It represents the amount of light in the color. For lightness, 50% is the "normal" setting, while 100% is white and 0% is black.

The fourth value is the alpha value. It determines how transparent the color is. A value of 1 is fully opaque, while a value of 0 is fully transparent. A value of 0.5 is semi-transparent.

Example

Here's a working example of using the hsla() function to define colors for a web page:

Examples of Alpha Variations

Here's an example of the same color repeated multiple times (across a background image), but each one with a different alpha value.

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

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

Blue

Setting the HSL Part

The HSL color model is much more intuitive for setting colors than the RGB model. Especially once you know how HSL works.

I've written about the hsl() function, which explains the HSL part of the hsla() function in more detail than what's written here. Check it out if you're not sure how to set amd adjust the base color.