HTML HSL Colors
HSL( Hue, Saturation, and Lightness ) color -
You can also use HSL color values to represent any colors you want. HSL stands for Hue, Saturation, Lightness. hsl() is a alternative representation of RGB (red, Green, Blue ) color model. We use hsl() functional notation to define a color.
HSL colors format -
HSL color values -
hsl() takes three values - Hue, Saturation, and Lightness.
Hue - Hue is represented as an angle of the color circle and the value of Hue is a degree from 0 to 360. The angle 0deg or 360deg represents red, 120deg represents green, and 240deg represents blue.
Saturation - The value of Saturation is a percentage. 100% means full color and 0% means completely unsaturated ( a shade of gray ).
Lightness -Lightness is also a percentage value, 100% lightness means white, 0% lightness means black, and 50% lightness means normal.
Let's understand the format now what exactly it is.
| color | HSL color values |
|---|---|
| Red | hsl(0, 100%, 50%) |
| orange | hsl(30, 100%, 50%) |
| yellow | hsl(60, 100%, 50%) |
| lime green | hsl(90, 100%, 50%) |
| green | hsl(120, 100%, 50%) |
| blue-green | hsl(150, 100%, 50%) |
| Cyan | hsl(180, 100%, 50%) |
| sky blue | hsl(210, 100%, 50%) |
| blue | hsl(240, 100%, 50%) |
| purple | hsl(270, 100%, 50%) |
| Magenta | hsl(300, 100%, 50%) |
| pink | hsl(330, 100%, 50%) |
| red | hsl(360, 100%, 50%) |
In the above table as you can see keeping the value of saturation and lightness 100% and 50% respectively, we can make different colors. If you need full color then the value of saturation and lightness must be 100% and 50% respectively. You can use our hsl color mixer below to see the differences.
Random HSL color values generator-
Click on the box below to generate random HSL color values.
Why don't you try to get the same color with the mixer of HSL color values below ?
Play with HSL color codes and experiment -
Mix the HSL color values to get the desired colors.
HSL ( hue, saturation, lightness ) color values-
Example of changing color of a webpage using HSL color values-
Here you can see that to change the colors of the webpage we used HSL color values instead of color names, hex values, and rgb values.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example of changing color of a webpage using color names.</title>
</head>
<body style="color:red;background-color:hsl(60, 100%, 50%)">
<p> I am red and my background color is yellow. </p>
<table style="background-color:hsl(240, 100%, 50%)">
<tr>
<td style="color:hsl(120, 100%, 100%)">
I am white and my background color is blue.
</td>
</tr>
</table>
</body>
</html>Result
You'll see the same color if you use color names.
HSLA ( Hue, Saturation, Lightness, Alpha ) Color -
HSLA stands for Hue Saturation Lightness Alpha. Alpha is just an extension of HSL color model. Now see the format of HSLA below -
HSLA colors format -
HSLA color values -
hsla() takes four values. The first, second, and third values are used for the hue, saturation, and lightness respectively that you already know. (see above)
Alpha, fourth and last value of hsla(), uses for transparency/opacity of a color. The value 0.0 represents fully transparent and the value 1.0 represents not transparent at all (see above).