Colors are the most important components used to give a better look and feel to any application or website. You can add colors to the HTML elements using different CSS properties. In CSS, there are three advanced methods, such as RGB, Hex code, and HSL, that can be utilized to specify colors to HTML elements.

This post will guide you about the HSL and HSLA color methods. So, let’s dive in!

What are HTML HSL Colors?

The HTML colors can be used by specifying hue, saturation, and lightness using the hsl() method. The function format we use to indicate the HSL color is mentioned below:

Let’s discuss them one by one!

• “hue”: hue is the basic color on the color wheel. It is selected from the wheel by specifying the degree from 0 to 360 on the color wheel. For instance, 0 indicates red, 120 represents green, and 240 produces the blue color.
• “saturation”: The color intensity is known as saturation. It is the percentage value where 100% indicates the pure color, 50% indicates the color has a 50% shade of gray, and 0% represents the full gray, which means we cannot see any color.
• “lightness”: lightness shows how much light we want to add to the color. It is also a percentage value where 100% lightness defines white, 0% defines black color, and 50% defines the normal color.

Example

In the HTML file, first, add a div and add a heading, and a paragraph within it:

Now, we will style the <div> in the following way:

• The “width” property value of the div is set as “100%”.
• “height” as “200px”.
• Assign the “background-color” property as “hsl(233, 63%, 89%)”, where 233 indicates hue, 63% represents saturation, and 89% represents lightness.
• The “font-size” value is set as “30px”.
• The “text-align” property value is set as “center”.

Now, style the <h1> tag by providing HSL color to it. To apply color to the text, we will utilize the “color” property value as “hsl(273, 99%, 28%)”:

Let’s assign a different HSL color to the <p> tag. To do so, the “color” property value is set as “hsl(12, 94%, 25%)”:

Here is an outcome of the added HSL colors:

There is an extension of the HSL color method known as HSLA.

What are HSLA Colors?

The HSLA colors can be defined as the HSLA color model, as it is an extension of HSL. The syntax of the hsla() function is given as follows:

Here, the alpha value has a range between “0.0” to “1.0”, where 0.0 produces fully transparent, and 1.0 produces fully opaque.

Example

Let’s take an example to apply HSLA colors to the added headings:

Next, apply the HSLA colors as the background to the added headings with “0.5” and “1” alpha values, respectively. Note that the values of the other parameters are the same:

The below image represents the two same colors with different alpha values:

We have compiled the essential information related to HTML HSL and HSLA colors.

Conclusion

Using the hsl() method, the HTML HSL colors can be applied by specifying the value of the hue, saturation, and lightness. However, HSLA is an extension of HSL with the alpha channel. This color model can be applied with the help of the hsla() function. This blog explained what HTML HSL and HSLA colors are and how to apply them to the HTML components.