hsl() Function with Example in CSS

CSS | hsl() function: Here, we are going to learn about the hsl() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 17, 2020

Introduction:

It is no wonder that we can make use of various CSS functions to ease our coding and shorter our coding. Instead of writing long lethargic codes we can simply make use of functions and avoid writing those codes. Besides, it is considered good practice to make use of functions while developing a website or webpage as it shows how much you know about web development, it represents your knowledge regarding coding skills as well as how you can optimize your code. So, learn as much as functions as you can and never forget to implement them in your code just like any professional coder.

Definition:

Now, that we are familiar with why various functions are important and how they can be implemented in our code. So why don’t we take this discussion further and learn more about a very specific function called hsl() function? This function is very beneficial for your code, so let us understand this function in detail by looking at its definition and its usage. The hsl() function is mainly used for providing color values when it is used in CSS. With the help of this function, you can specify specific color values by specifying the hue, saturation, and even light component of colors. Well, you would be amazed to know that the full form of HSL is "Hue Saturation Lightness", which is nothing but the representation of the RGB color space of computer graphics.

Well, let us have a look at the syntax of this function,

Syntax:

    element{
        color : hsl(hue,saturation,lightness);
    }

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. It is determined within a percent.
LIGHTNESS: Lightness is not that tough to understand, it is used to set the lightness of the color. It is also determined within a percent.

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        p {
            background-color: hsl(50, 90%, 50%);
            font-size: 50px;
            color: hsl(0, 100%, 30%);
        }
    </style>
</head>

<body>
    <p>My name is Anjali Singh.</p>
</body>

</html>

Output

Conclusion:

So, as you must have noticed that this property is pretty helpful when it comes to coding and it helps you reduce the line of codes. So, go ahead and start implementing this function right away and don't forget to have fun with the various shades of the colors. Never forget to learn more and more functions and whenever you fall in doubt then you know there are articles just like these to help you overcome every doubt. Also, if you still face issues, we are here to help you at https://ask.includehelp.com/.

CSS Functions »

CSS | calc() Function

CSS | hsla() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples