# FAQ: Color Theory - Tints and Shades

This community-built FAQ covers the “Tints and Shades” exercise from the lesson “Color Theory”.

Paths and Courses
This exercise can be found in the following Codecademy content:

## FAQs on the exercise Tints and Shades

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

## Join the Discussion. Help a fellow learner on their journey.

Agree with a comment or answer? Like () to up-vote the contribution!

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

How are the lightness ranges determined? It starts at 30%, then 40% and 50%. The Browser has range that is 5% higher and lower to choose from?

.first-color {

background-color: hsla(240, 100%, 30%, 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.
.second-color {

background-color: hsla(240, 100%, 40%, 1);

}

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

background-color: hsla(240, 100%, 50%, 1)

I also have the same issue with Hues. How is the value for the first color between 0 and 8, when I haven’t specified it like this → <=8. Is it determined by the pattern by the following class numbers: (15, 45, 60)? The browser notices the pattern and assumes the first color to follow the same range?

Update the hue of the `.first-color` class to a value between 0 and 8.
.first-color {
background-color: hsla(0, 100%, 50%, 1);
}

Update the hue of the `.second-color` class to a value between 8 and 15.
.second-color {
background-color: hsla(15, 100%, 50%, 1);
}

.third-color` class to a number between 15 and 30. .fourth-color` hue a value between 30 and 45.
.fifth-color` hue a value between 45 and 60.

The midpoint (50%) is where the base hue begins to take on its perceived ‘true color’, below which it is darker. Zero luminosity means no lightness, aka, black. 100% luminosity means total lightness, aka, white.

The hues are distributed around the cylinder, with each of R, G, B spread over 120 degrees, each. The central Red is at zero degrees, the central Green is at 120 degrees, and the central Blue is at 240 degrees.

Saturation begins in the center and increases as we move outward.

Lightness starts at the bottom of the cylinder and increases as we move upward.

Open Paint on your machine and play with the color picker. Set the values in the HSL and note the RGB hex values of each.

Open Paint on your machine and play with the color picker. Set the values in the HSL and note the RGB hex values of each. → How do I do that? I tried on VS code using the Color Picker Extension. I haven’t found much luck. I’m using a Macbook, if that matters.

Paintbrush is the closest alternate to Paint for the Mac. If it doesn’t come installed, it should be easy to get. Any basic imaging program will have a color picker.

GIMP is free, and very capable. Not sure if it is available for Mac, but don’t see why not.

Here is a color spectrum with each hue given a 1 pixel width, starting at zero degrees. The saturation is 100% and luminosity is 50%.

It was rendered in HTML with CANVAS.

HTML
``````<!DOCTYPE html>
<html lang="EN">
<meta charset="UTF-8">
<title>Saturated HSL Spectrum at 50% Luminosity</title>
<meta name="viewport" content="width=device-width,initial-scale=1" >
<body>
<canvas></canvas>
<script src="script.js"></script>
</body>
</html>
``````
CSS
``````body {
background: #000;
color: #fff;
font-family: sans-serif;
}
canvas {
width: 360px;
height: 100px;
}
``````
JS
``````const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const k = 0
const y = 99
for (let x = 0; x < 360; x++) {
ctx.fillStyle = `hsl(\${x}, 100%, 50%)`;
ctx.fillRect(x, k, x, y);
}
``````

This rendering is with saturation set to 50%: