Home
CSS
CSS Colors
HSL
Tryit: Lightness
Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <body> <h1>HSL Lightness</h1> <p>The third parameter of hsl() defines the lightness. 0% means black, and 100% means white:</p> <h2 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h2> <h2 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h2> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h2> <h2 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h2> <h2 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h2> </body> </html>
