Adjust the Tone of a Color1

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  header {
    background-color: hsl(180, 90%, 35%);
    color: #FFFFFF;
  }
  
  nav {
    background-color: hsl(180, 90%, 35%);
  }
  
  h1 {
    text-indent: 10px;
    padding-top: 10px;
  }
  
  nav ul {
    margin: 0px;
    padding: 5px 0px 5px 30px;
  }
  
  nav li {
    display: inline;
    margin-right: 20px;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
</style>
  
<header>
  <h1>Cooking with FCC!</h1>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Classes</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>

Your browser information:

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

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

2

You’re on the right track. Now that you have targeted the nav element, adjust you hsl to what the exercise has asked for. Remember, hsl is an acronym for hue, saturation, and lightness.

3

The navigation bar on this site currently inherits its background-color from the header element. Starting with that color as a base, add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.

4

@aysha1 you should change the light to 25% instead of 35% and saturation to 80% and everything is perfect. background-color: hsl(180, 80%, 25%);

1 Like