The third and last consideration in creating an HSL color is the lightness. Lightness is also a percentage. The darkest is 0% (black) while 100% is white. In this example, we show the effects of the various percentages of lightness upon the hue of red with 100% saturation:
| HTML file: | Displayed by browser: |
|---|---|
|
<body>
<div style="background: hsl(0, 100%, 0%); color:white;">This is hsl (0, 100%, 0%);</div> <div style="background: hsl(0, 100%, 10%); color:white;">This is hsl (0, 100%, 10%);</div> <div style="background: hsl(0, 100%, 20%); color:white;">This is hsl (0, 100%, 20%);</div> <div style="background: hsl(0, 100%, 30%); color:white;">This is hsl (0, 100%, 30%);</div> <div style="background: hsl(0, 100%, 40%);">This is hsl (0, 100%, 40%);</div> <div style="background: hsl(0, 100%, 50%);">This is hsl (0, 100%, 50%);</div> <div style="background: hsl(0, 100%, 60%);">This is hsl (0, 100%, 60%);</div> <div style="background: hsl(0, 100%, 70%);">This is hsl (0, 100%, 70%);</div> <div style="background: hsl(0, 100%, 80%);">This is hsl (0, 100%, 80%);</div> <div style="background: hsl(0, 100%, 90%);">This is hsl (0, 100%, 90%);</div> <div style="background: hsl(0, 100%, 100%);">This is hsl (0, 100%, 100%);</div> </body> |
This is hsl (0, 100%, 0%);
This is hsl (0, 100%, 10%);
This is hsl (0, 100%, 20%);
This is hsl (0, 100%, 30%);
This is hsl (0, 100%, 40%);
This is hsl (0, 100%, 50%);
This is hsl (0, 100%, 60%);
This is hsl (0, 100%, 70%);
This is hsl (0, 100%, 80%);
This is hsl (0, 100%, 90%);
This is hsl (0, 100%, 100%);
|
