<div class="container">
  <p>The following items have their <code>background-color</code> set using the hsla() color format. The color is set to a blue color lying on the angle 200 of the color wheel. This example shows the result of how the color changes when its opacity is changed by changing the alpha value in the function. The items start from a lower opacity up. </p>
  <ul class="colors">
    <li class="color-1">hsla(200, 100%, 50%, .1)</li>
    <li class="color-2">hsla(200, 100%, 50%, .3)</li>
    <li class="color-3">hsla(200, 100%, 50%, .5)</li>
    <li class="color-4">hsla(200, 100%, 50%, .7)</li>
    <li class="color-5">hsla(200, 100%, 50%, .85)</li>
    <li class="color-6">hsla(200, 100%, 50%, 1)</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: 800px;
  padding: 30px;
}

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

.color-1 {
  background-color: hsla(200, 100%, 50%, .1);
}

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

.color-3 {
  background-color: hsla(200, 100%, 50%, .5);
}

.color-4 {
  background-color: hsla(200, 100%, 50%, .7);
}

.color-5 {
  background-color: hsla(200, 100%, 50%, .85);
}

.color-6 {
  background-color: hsla(200, 100%, 50%, 1);
}