Learn
Color Theory

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

1.

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.

2.

Update the lightness of the `.third-color` class background color within the range of `45%` and `55%`.

3.

Make the lightness of the `.fourth-color` fall within the range of `55%` and `65%`.

4.

Finally, change the lightness of the `.fifth-color` fall within the range of `65%` and `75%`.