Log in from a computer to take this course

You'll need to log in from a computer to start Learn Color Design. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

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%.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?