You can also increase and decrease the lightness of a color, resulting in tints and shades of a hue, respectively.
Tints occur when white is applied to a color, adding or increasing the lightness of a hue.
Shades are created when black is added to a color, which decreases the lightness of a hue.
In HSLA, tints and shades are determined by the third number, which is L for lightness. This starts at 0% (black) and ranges to 100% (white).
Understanding how to use tints and shades of a color can help in creating a wider range of colors you could apply to your websites.
In this exercise, we’ll keep the hue consistent (blue), and we will vary the lightness value to create increasingly lighter shades.
Change the lightness of the
.second-color class background color within the range of
45% to create a slightly lighter shade of blue.
Update the lightness of the
.third-color class background color within the range of
Make the lightness of the
.fourth-color fall within the range of
Finally, change the lightness of the
.fifth-color fall within the range of