CSS Reference Function


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.

View this demo on the Codrops Playground

Browser Support

The hsl(), hsla(), rgba(), transparent, and currentColor keywords are supported in all major browsers and in Internet Explorer starting from version 9.

Written by

Last updated March 6, 2016 at 3:35 am by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.