All colors have a warmth value assigned to them, which can be classified as warm or cool.

Warm colors range between red and yellow, which include various versions of those colors in addition to orange. This also comprises colors such as brown and tan. These are considered to be “warm” colors in that they evoke a sense of warmth. For instance, fire is associated with warmth, and it typically burns between the spectrum of reds and yellows. Warm colors can also promote a feeling of aggression and are considered bold.

In the style.css file, we’ve created a layout consisting of five blocks. Let’s explore warm colors by creating a spectrum of them within the browser.

Note: We’ll be using HSL color properties to adjust our colors. You can refer to this list of HSL color codes if you want to discover more.



In the style.css file, update the hue of the .first-color class to a value between 0 and 8.


Next, update the hue of the .second-color class to a value between 8 and 15.


Change the value of the hue of the .third-color class to a number between 15 and 30.


Make the .fourth-color hue a value between 30 and 45.


Finally, change the .fifth-color hue a value between 45 and 60.

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?