HSL stands for Hue, Saturation and Lightness. The hue of an HSL color value is the degree on the color wheel with a range from 0 to 360. The syntax to create any HSL color is done this way:
The following example defines different HSL colors, using different hue parameters all with 100% saturation and 50% lightness:
| HTML file: | Displayed by browser: |
|---|---|
|
<body>
<div style="background-color: hsl(0, 100%, 50%);">This is hsl (0, 100%, 50%): Red</div> <div style="background-color: hsl(60, 100%, 50%);">This is hsl (60, 100%, 50%): Yellow</div> <div style="background-color: hsl(120, 100%, 50%);">This is hsl (120, 100%, 50%): Green</div> <div style="background-color: hsl(180, 100%, 50%);">This is hsl (180, 100%, 50%): Skyblue</div> <div style="background-color: hsl(235, 100%, 50%);color: white;">This is hsl (235, 100%, 50%): Blue</div> <div style="background-color: hsl(290, 100%, 50%);">This is hsl (290, 100%, 50%): Violet</div> <div style="background-color: hsl(340, 100%, 50%);">This is hsl (340, 100%, 50%): Pink</div> </body> |
This is hsl (0, 100%, 50%): Red
This is hsl (60, 100%, 50%): Yellow
This is hsl (120, 100%, 50%): Green
This is hsl (180, 100%, 50%): Skyblue
This is hsl (235, 100%, 50%): Blue
This is hsl (290, 100%, 50%): Violet
This is hsl (340, 100%, 50%): Pink
|
