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.
Instructions
Change the lightness of the .second-color class background color within the range of 35% and 45% to create a slightly lighter shade of blue.
Update the lightness of the .third-color class background color within the range of 45% and 55%.
Make the lightness of the .fourth-color fall within the range of 55% and 65%.
Finally, change the lightness of the .fifth-color fall within the range of 65% and 75%.