You can assign an HSL value wherever you use colors on your HTML5 and CSS3 web page. The code for HSLcolors shows how the HSL scheme can be used on your page:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>HSLcolors.html</title>
<style type = "text/css">
body {
background-color: HSL(180, 75%, 75%);
}
h1 {
color: HSL(180, 75%, 25%);
background-color: HSL(180, 75%, 90%);
}
p {
color: HSL(0, 75%, 25%);
}
</style>
</head>
<body>
<h1>This is a headline</h1>
<p>
This is a paragraph
</p>
</body>
</html>
To specify a color using the HSL scheme, do this:
Set up your selectors as usual.
In the CSS, set up a selector for each element you wish to color.
Add the color rule.
Apply one or both to each selector.
Use the HSL function.
Using HSL followed by parentheses indicates you wish to calculate the color using the HSL technique.
Indicate the hue.
Imagine a color wheel with red at the top. The hue is the angle (in degrees) of the color you want to pick. Hue should have a value between 0 and 360.
Determine the saturation.
Saturation is measured as a percentage. Saturation of 0% indicates a grayscale (somewhere between black and white) whereas Saturation of 100% is a fully saturated color with no grayscale. You need to include the percent sign as part of the saturation value.
Specify the lightness.
Lightness is also indicated as a percentage, with 0% being completely black and 100% being completely white. A lightness value of 50% will determine a balanced color between white and black. Lightness values should also include the percent sign.
The HSL model is a relatively recent addition to CSS, so it may not work with older browsers, but it can be extremely helpful. HSL makes it easier to predict whether colors will look good together. If you keep any two of the HSL values the same and change the third, the two colors are likely to fit together well.