View video tutorial

HTML HSL Colors

HTML

❮ Prev Next ❯

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

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

Color 1

Color 2

HSL color code.

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

hsl(0, 100%, 50%)

hsl(147, 50%, 47%)

HTML HSL Colors

➔ 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.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML HSL Color Example</title>
</head>
<body>
    <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>
</body>
</html>