FAQ: Color Theory - Tints and Shades

[wiki-bot]

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:

Learn Color Design

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.

Ask or answer a question about this exercise by clicking reply () below!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

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!

[mariani8997405043]

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)

[mariani8997405043]

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.

[mtf]

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.

[mariani8997405043]

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.

[mtf]

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.

[mtf]

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">
<head>
  <meta charset="UTF-8">
  <title>Saturated HSL Spectrum at 50% Luminosity</title>
  <meta name="viewport" content="width=device-width,initial-scale=1" >
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <canvas></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  background: #000;
  color: #fff;
  padding: 25px;
  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%:

Use the code above in your workspace to play with the S and L levels. Be sure to link back to this page as attribution.

[mtf]

A Luminosity spectrum with 100% Saturation…