The second consideration of an HSL color is saturation, which is a percentage value. Full color is 100% while 0% makes it grey. In this example, we show the various percentages of saturation, using the hue of 0 (red) with the lightness set to 50%:
| HTML file: | Displayed by browser: |
|---|---|
|
<body>
<div style="background: hsl(0, 100%, 50%);">This is hsl (0, 100%, 50%);</div> <div style="background: hsl(0, 90%, 50%);">This is hsl (0, 90%, 50%);</div> <div style="background: hsl(0, 80%, 50%);">This is hsl (0, 80%, 50%);</div> <div style="background: hsl(0, 70%, 50%);">This is hsl (0, 70%, 50%);</div> <div style="background: hsl(0, 60%, 50%);">This is hsl (0, 60%, 50%);</div> <div style="background: hsl(0, 50%, 50%);">This is hsl (0, 50%, 50%);</div> <div style="background: hsl(0, 40%, 50%);">This is hsl (0, 40%, 50%);</div> <div style="background: hsl(0, 30%, 50%);">This is hsl (0, 30%, 50%);</div> <div style="background: hsl(0, 20%, 50%);">This is hsl (0, 20%, 50%);</div> <div style="background: hsl(0, 10%, 50%);">This is hsl (0, 10%, 50%);</div> <div style="background: hsl(0, 0%, 50%);">This is hsl (0, 0%, 50%);</div> </body> |
This is hsl (0, 100%, 50%);
This is hsl (0, 90%, 50%);
This is hsl (0, 80%, 50%);
This is hsl (0, 70%, 50%);
This is hsl (0, 60%, 50%);
This is hsl (0, 50%, 50%);
This is hsl (0, 40%, 50%);
This is hsl (0, 30%, 50%);
This is hsl (0, 20%, 50%);
This is hsl (0, 10%, 50%);
This is hsl (0, 0%, 50%);
|
