View video tutorial



HSL colors are created with different combinations of Hue, Saturation and Lightness value.

Select and convert your color code in RGB | HEX | HSL

HSL color code.

Change Hue, Saturation, Lightness value to get HSL color code.


In HSL colors Hue,Saturation,Lightness values are given in decimal number.

Hue is a color range from minimum 0 to maximum 360 value. where 0 is red, 120 is green and 240 is blue color.

Saturation is the percentage value of colorfulness 0% means no color at all and 100% means full color of its value.

Lightness is the percentage value of light 0% means no light(black) and 100% means full light(white).

hsl(hue, saturation, lightness)is used where hue, saturation, lightness are the corresponding value of the parameter.

hsl(hue, saturation, lightness, alpha)is used where hue, saturation, lightness are the corresponding value of the parameter, and alpha is value of opacity from a range of 0 to 1

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.


<!DOCTYPE html>

    <title>HTML HSL Color Example</title>


    <h2>HTML HSL Color Example</h2>

    <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
    <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
    <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
    <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
    <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
    <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>


Try it Now »

Click on the "See output" button to see how it works.

Shades of gray color

Gray color in HSL is the color where Hue is set to 0 and Saturation is set to 0%, and Lightness value changes for different types of gray shades.