Aren't shades of gray between black and white?

Tell us what’s happening:

I mean, I know it’s a colloquialism, and I’m kind of new to design and color, so I’m not really understanding what the difference between Saturation and Lightness are even though the lesson describes it. If I toy with the percentages of hsl, I can see the difference, but I don’t understand why it works that way… is it even possible for someone to explain better to a color-illiterate person why Saturation is not a part of Lightness?

"Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.

Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color."

Your code so far

  body {
    background-color: #FFFFFF;
  .green {
    background-color: hsl(120, 100%, 50%);
  .cyan {
    background-color: 	hsl(180, 100%, 50%);
  .blue {
    background-color: hsl(240, 100%, 50%);
  div {
    display: inline-block;
    height: 100px;
    width: 100px;
<div class="green"></div>
<div class="cyan"></div>
<div class="blue"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:

Have a play on this interactive HSL colour chart (ignore the opacity option at the bottom).

Does it help to visually see how the changes work?

I found the topic a little confusing, which is why I googled it and landed on Wikipedia, which has a good picture to explain it

Edit: In the image for HSL, notice that fully desaturated = grayscale, but there can be variation in the lightness of a black-and-white TV, or no meaningful image could be displayed.

1 Like