<div class="container">
  <p>Hover over each item to see the color transition into a new one. The first item's color is set in hexadecimal rgb format, the second one in rgb() functional format, and the third one in hsl() functional format. The transition duration is set to 3s, so you can see the intermediate colors between the initial and final colors.</p>
  <ul class="items">
    <li class="item item-1"></li>
    <li class="item item-2"></li>
    <li class="item item-3"></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;
}

.item {
  display: inline-block;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
  width: 30%;
  height: 100px;
}

.item-1 {
  background-color: #ddd;
}

.item-1:hover {
  background-color: #333;
}

.item-2 {
  background-color: rgb(255, 0, 100);
}

.item-2:hover {
  background-color: rgb(200, 0, 0);
}

.item-3 {
  background-color: hsl(270, 100%, 30%);
}

.item-3:hover {
  background-color: hsl(170, 100%, 30%);
}