hsla()

The hsla() functional notation is used to set colors in the HSL format, and it takes 4 comma-separated values: hue, saturation, lightness (or luminance) and alpha transparency.

Just as the rgb() functional notation has the rgba() alpha counterpart, the hsl() functional notation has the hsla() alpha counterpart, which, just like the rgba() function, takes in an additional fourth value, the alpha value, which is a decimal number between 0 and 1 representing the opacity of a color, where 1 means the color is fully opaque, and 0 means the color is fully transparent.

This following example will set the background color on an element to a semi-transparent purple color, so the background of the element’s container would show through.

          .modal {
            background-color: hsl(270, 100%, 0.5);
          }
        

The following is a live demo showing how the color changes when its opacity is changed by changing the alpha value in the function.