Horje
How to create HTML Lightness Color

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light), and 100% means full lightness (white).


Full Example of HTML Lightness Color

With HSL colors, 0% lightness means black, and 100 lightness means white.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>
</html>

Output should be:

Full Example of HTML Lightness Color





Related Articles
What is HTML HSL and HSLA Colors HTML HSL Colors
How to create HTML HSL Color Values HTML HSL Colors
How to create HTML Saturation Color HTML HSL Colors
How to create HTML Lightness Color HTML HSL Colors
How to create HTML Shades of Gray HTML HSL Colors
How to create HTML HSLA Color Values HTML HSL Colors

Single Articles
Full Example of HTML Lightness ColorHTML HSL Colors

Read Full:
HTML HSL Colors
Category:
Web Tutorial
Sub Category:
HTML HSL Colors
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
64


Reffered: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_hsl_lightness

Share on: