View video tutorial

CSS HSL Colors

CSS

❮ 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%)

CSS 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 CSS Editor "Try it Now"

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

Example

<h2>CSS 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>