Horje
How to create HTML Saturation Color

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray.

50% is 50% gray, but you can still see the color.

0% is completely gray; you can no longer see the color.


Full Example of HTML Saturation Color

With HSL colors, less saturation mean less color. 0% is completely gray.
index.html
Example: HTML
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>

Output should be:

Full Example of HTML Saturation 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 Saturation ColorHTML HSL Colors

Read Full:
HTML HSL Colors
Category:
Web Tutorial
Sub Category:
HTML HSL Colors
Uploaded by:
Admin
Views:
74


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