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
<style>
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;
}
</style>
<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:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color