FAQ: CSS Color - Hue, Saturation, and Lightness

This community-built FAQ covers the “Hue, Saturation, and Lightness” exercise from the lesson “CSS Color”.

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

Web Development

Learn CSS

FAQs on the exercise Hue, Saturation, and Lightness

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 (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 (reply) below!

Agree with a comment or answer? Like (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!

Isn’t the colorwheel used as an example missing saturation?
"If you imagine a line segment drawn from the center of the color wheel to the perimeter, the saturation is a point on that line segment. "
There is no difference from the center to te perimeter in the circle given in the example

3 Likes

Confused me, too.

If anything, the colours look slightly more vivid in the centre, but only if I squint and then I’m probably imagining it. Hard to pick out any real difference from the edge to the centre.

Where I can get the HSL Color Wheel?

1 Like

Can you use hsl in conjunction with hex, rgb or named colors?

Generally, it’s best to be consistent so that it’s much easier to read the colors. But in a way, yes, you could mix up hsl with hex, rgb, and named colors. Hope this helped!

If you mean by getting the chart that shows the colors, you can visit HSL Color Wheel

2 Likes

Easier to use and more applicable for a 4 color web page lay-out in my opinion.Color Picker.Another web-site where you can learn a bit about color theory and really see what different colors do to the appearance of a web-page Color Chooser. This second one gives you the ability to change the HSL then automatically tells you what the HEX equivalent is. I like it.

2 Likes

how do you finish the last question?

It says:

Change the hue of the body selector’s background color to 240 degrees.

So that’s what you have to do. Find the body selector and change its background color hue (the first number) to 240

It can be a bit confusing, but keep in mind that the higher the saturation, the more concentrated or pure the color is

You’re absolutely right. Some color wheels ARE gray at the center and saturated at the perimeter, but this example color wheel is NOT set up that way. This one only shows the circle of hues.
The tutorial is incorrect about the saturation in this example. It’s a nice explanation, it just doesn’t apply to the example wheel presented.
(I reported it as a bug, BTW.)

What do vh and vw mean in this code?

.midground, .foreground {
position: absolute;
top: 0;
left: 0;
display: inline-block;
margin: 15vh 0 0 15vw;
padding: 0;
width: 35vw;
height: 59vh;
}

Please answer me.

Common Length units

There are several units used by CSS to express length. The older ones, supported by all browsers, are:

  • rem - “r” stands for “root”: “root em” -, which is equal to the font size fixed to the root element (almost always <html> ).
  • vh and vw - Many responsive web design techniques rely heavily on percentage rules. However, CSS percentage measures are not always the best solution for all problems. The measure vh is equal to 1/100 of the height of the viewport. So, for example, if the height of the browser is 800px, 1vh equals 8px and, similarly, if the width of the viewport is 650px, 1vw is equivalent to 6.5px.
  • vmin and vmax - These units are related to the maximum or minimum value of vh and vw . For example, if the browser was set to 1200px wide and the height 600px, 1vmin would be 6px and 1vmax would be 12px. However, if the width was set to 700px and the height set to 1080px, vmin would equal 7px and vmax 10.8px.
  • ex and ch - These units, similar to em and rem , rely on the current font and font size. However, unlike em and rem , these units also rely on font-family as they are determined based on measures specific to each font. The ch unit (“character unit”) is defined as the width of the character zero (“0”). The ex unit is defined as “the current x-height of the current font or the half of 1em”. The height-x of a given font is the height of the lowercase “x” of that font. It is often the middle mark of the font.

There are two general kinds of units used for length and size in CSS: relative and absolute.

Relative Units

Relative units change relative to the element’s current font-size or other settings. Some relative units are

em

  • the width of a capital letter M of the font-size of the current element.
  • Font sizes are inherited from parent elements.

Example:

div {
font-size: 16px;
}
div h3 {
font-size: 2rem;
}

Here the <h3> will equal 32px since the font-size of the current or parent element is 16px .

rem

  • root em , or the width of a capital letter M of the default base font-size .
  • Parent font sizes will have no effect.

Example:

body {
font-size: 16px;
}
p {
font-size: 1.5rem;
}

Here the <p> will equal 24px since the default base font-size is 16px .

%

  • the percent size relative to a parent’s size.

Example:

div {
width: 400px;
}
div p {
width: 75%;
}

Since the parent’s width is 400px , the width of the inner pargraph would be 300px , or 75% of 400px .

vw

  • view width, or 1/100th of the width of the viewport

Example:

body {
width: 100vw;
}

The body fill the width of the viewport, whether that is 417px, 690px, or any width.

vh

  • view height, or 1/100th of the height of the viewport

Example:

div {
height: 50vh;
}

This div will fill half the height of the viewport, whether that is 1080px, 1300px, or any height.

Absolute Units

Absolute units will be the same regardless of screen size or other settings. Some absolute units are

px

  • pixel
  • pixel counts are relative to the quality of the viewing device’s screen

in , cm , mm

  • inch, centimeter, millimeter
  • An inch is an inch on a small screen or a big screen

pt , pc

  • points (1/72 of an inch) and picas (12 points)

Example

p {
  font-size: 24px;
}
div {
  width: 3in;
  border-width: 3pt;
}

A paragraph with font-size: 24px will show up as 24px on a phone, tablet, or desktop screen.

The div will show up as 3 inches wide, and the border on the div will be 3/72 of an inch thick, regardless of the screen size.

1 Like

There is no HTML Code for this Lesson?

Thank you very much.

is there a reason why the hue does not get a % ?

Hi All,

Just wondering which is the best colour format to use? I’ve always used hex but the lesson mentioned the browsers usr RGB so would that be the best option for overall accurate colour representation?

Thanks in advance :slight_smile:

Hi, there!

The color format you decide to use is purely up to your choice. However, RGB and HSL have the ability to change alpha (or opacity), which is why you will see these formats used most regularly.

Personally, I use HSL because of its “human readability.” It find it much easier to manipulate shades, tints, hues, etc. with hue, saturation, and lightness versus red, green, and blue.

2 Likes

The Color Chooser is great! :heart: