<div class="container">
  <p>The following items have their <code>background-color</code> set using the rgb() equivalent of the hexadecimal colors used in the previous demo: #888, #069, and #20ff8a. </p>
  <ul class="colors">
    <li class="color-1">rgb(136, 136, 136)</li>
    <li class="color-2">rgb(0, 102, 153)</li>
    <li class="color-3">rgb(18, 255, 138)</li>
  </ul>
  <p>The following items have their <code>background-color</code> set using random rgb() color combinations, using percentages as values. </p>
  <ul class="colors">
    <li class="color-4">rgb(80%, 20%, 99%)</li>
    <li class="color-5">rgb(2%, 100%, 34%)</li>
    <li class="color-6">rgb(77%, 9%, 0%)</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: rgb(136, 136, 136);
}

.color-2 {
  background-color: rgb(0, 102, 153);
}

.color-3 {
  background-color: rgb(18, 255, 138);
}

.color-4 {
  background-color: rgb(80%, 20%, 99%);
}

.color-5 {
  background-color: rgb(2%, 100%, 34%);
}

.color-6 {
  background-color: rgb(77%, 9%, 0%);
}