worldofitech
HTML HSL and HSLA Colors: HSL represents hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).
In this article, you will learn-
Defining HTML Colors
There is no special HTML color tag, as the design isn’t the main function of HTML. Coloring your site is a piece of CSS inline styling. This means you need to use the style attribute in the opening tag you wish to add HTML color to.
You may use the color property to change the color of your text, or background color to change the color of the background. Both of these properties take color names, RGB, RGBA, HEX, HSL, or HSLA values.
HTML HSL Color Values
In HTML, a color can be determined using hue, saturation, and lightness (HSL) in the structure:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% methods a shade of gray, and 100% is the full color.
Lightness is additionally a percentage value, 0% is black, and 100% is white.
Test by mixing the HSL values underneath:
hsl(0, 100%, 50%)
Example
Saturation
Saturation can be depicted as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, however you can in any case see the color.
0% is totally gray, you can at this point don’t see the color.
Example
Lightness
The lightness of a color can be portrayed as how much light you need to give the color, where 0% methods no light (black), 50% means 50% light (neither dark nor light) 100% methods full lightness (white).
Example
Shades of Gray
Shades of gray are frequently defined by setting the hue and saturation to 0, and change the lightness from 0% to 100% to get darker/lighter shades:
Example
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.
