<div class="container">
  <p>The following items have their <code>background-color</code> set using hexadecimal color values.</p>
  <ul class="colors">
    <li class="color-1">#888</li>
    <li class="color-2">#ff00aa</li>
    <li class="color-3">#069</li>
    <li class="color-4">#20ff8a</li>
    <li class="color-5">#123456</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: 100px;
  height: 100px;
}

.color-1 {
  background-color: #888;
}

.color-2 {
  background-color: #ff00aa;
}

.color-3 {
  background-color: #006699;
}

.color-4 {
  background-color: #20ff8a;
}

.color-5 {
  background-color: #123456;
}