Home »
CSS
hsla() Function with Example in CSS
CSS | hsla() function: Here, we are going to learn about the hsla() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 18, 2020
Introduction:
The use of functions is very beneficial for web development and one must learn as many functions as they can, therefore keep learning functions for improving your knowledge and coding skills. Besides, you should not just learn about them but instead, you should implement in your codes, this way you will get familiar with the behavior of that particular function and you will be habitual to use more functions in near future. As you might already know, the more you code the more your skills will get enhanced and more the chances of becoming professional coders. In today's world, it is really hard to find good coders. So code hard and become a successful coder.
Now, that we are talking about functions so much, why don't we talk about a very popular function known as the hsla() function and understand its behavior and values? Rest assured, while using this function your line of code will reduce and you would want to use this function again and again. So to get a better insight into this function to let us have a look at its definition and its syntax.
Definition:
The hsla() function could be referred to as an extension of the hsl() function, the hsl() function as you might already know that HSL stands for Hue Saturation and Light component while hsla stands for Hue Saturation Lightness and Alpha. The alpha is the extra factor in the Hsla function. Similar to hsl() function, the hsla() function is also used to specify different values of colors. Now, let us have a look at the syntax of this function:
Syntax:
element{
color: hsla(hue,saturation,lightness,alpha)
}
Values:
Let us understand each of these values one by one,
HUE: Hue is a container that lets you set the color from a color wheel.
SATURATION: Saturation, as the name suggests, specifies the saturation of the color. Its value varies between 0% too 100%.
LIGHTNESS: Lightness is not that tough to understand, it is used to set the lightness of the color. Its value varies between 0% too 100%.
ALPHA: Alpha value is used to set the opacity of a particular color. Its value varies between 0(fully transparent) to 1(fully opaque).
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: hsla(50, 90%, 50%, 0.5);
font-size: 50px;
color: hsla(0, 100%, 30%, 0.7);
}
</style>
</head>
<body>
<p>My name is Anjali Singh.</p>
</body>
</html>
Output
In the above example, the opacity of the background color is set to 0.5 and the font is set to 0.7.
Conclusion:
Now, that you have learned about the wonders of this function then what are you waiting for? You have the Syntax and the Example go ahead and start implementing it right away and don't forget to play with various colors and all of their shades. In case you fall in some doubt, just come back and go through the article once again.
CSS Functions »