<div class="container">
  <p>The following items have their <code>background-color</code> set using the hsl() color format. The color is set to a blue color lying on the angle 200 of the color wheel. The following show the result of how the color changes when its lightness is tweaked. </p>
  <ul class="colors">
    <li class="color-1">hsl(200, 100%, 10%)</li>
    <li class="color-2">hsl(200, 100%, 50%)</li>
    <li class="color-3">hsl(200, 100%, 90%)</li>
  </ul>
  <p>The following items have their <code>background-color</code> set using the hsl() color format. The color is set to a blue color lying on the angle 200 of the color wheel (same as the previous row). The following show the result of how the color changes when its saturation is tweaked. </p>
  <ul class="colors">
    <li class="color-4">hsl(200, 0%, 50%)</li>
    <li class="color-5">hsl(200, 40%, 50%)</li>
    <li class="color-6">hsl(200, 95%, 50%)</li>
  </ul>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.text {
  padding: 20px;
  background-color: #0099cc;
  color: white;
}

.colors li {
  display: inline-block;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  width: 200px;
  height: 100px;
  margin-bottom: 3px;
}

.color-1 {
  background-color: hsl(200, 100%, 10%);
}

.color-2 {
  background-color: hsl(200, 100%, 50%);
}

.color-3 {
  background-color: hsl(200, 100%, 90%);
}

.color-4 {
  background-color: hsl(200, 10%, 50%);
}

.color-5 {
  background-color: hsl(200, 50%, 50%);
}

.color-6 {
  background-color: hsl(200, 90%, 50%);
}