Adjust the Hue of a Color?

Adjust the Hue of a Color?
0

#1

Tell us what’s happening:

Your code so far


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

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


#2

You have background-color properties twice.
So, get rid of the background-color using hex-codes and keep the hsl() ones.
That should help.


#3

This should help:

<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>