Adjust the Hue of a Color

Tell us what’s happening:
Your code should use the hsl() property to declare the color green.
Your code should use the hsl() property to declare the color cyan.
Your code should use the hsl() property to declare the color blue.
The div element with class green should have a background-color of green.
The div element with class cyan should have a background-color of cyan.<<<<working
The div element with class blue should have a background-color of blue. <<<<working

Your code so far


<style>
  body {
    background-color: #FFFFFF;
  }
  
  .green {
    background-color: green;
    color: hsl(120, 100%, 50%);
  }
  
  .cyan {
    background-color: cyan;
    color: hsl(180, 100%, 50%);
  }
  
  .blue {
    background-color: blue;
    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 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color

1 Like

Hi,

you have to apply HSL colors for background, not for text-color.

.green {
    background-color: hsl(120, 100%, 50%);
  }
  
  .cyan {
    background-color: hsl(180, 100%, 50%);
  }
  
  .blue {
    background-color: hsl(240, 100%, 50%);
  }
1 Like

Wow thank you so much not sure why I was not able to understand that but I was stuck on that one for a long time. Thank you so much !

1 Like

Thanks man! Helped me too!

Thanks A lot !!! Helped me out as well !