body {
  font-size: 1.1em;
  background-color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

.container p {
  text-align: center;
}

.colors {
  margin: 50px auto;
  word-spacing: 0;
  padding: 1px 0;
}

.color {
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
  color: white;
  border: 1px solid #aaa;
}

.color-1 {
  background-color: aqua;
}

.color-2 {
  background-color: black;
}

.color-3 {
  background-color: blue;
}

.color-4 {
  background-color: fuchsia;
}

.color-5 {
  background-color: gray;
}

.color-6 {
  background-color: green;
}

.color-7 {
  background-color: lime;
}

.color-8 {
  background-color: maroon;
}

.color-9 {
  background-color: navy;
}

.color-10 {
  background-color: olive;
}

.color-11 {
  background-color: orange;
}

.color-12 {
  background-color: purple;
}

.color-13 {
  background-color: red;
}

.color-14 {
  background-color: silver;
}

.color-15 {
  background-color: teal;
}

.color-16 {
  background-color: white;
}

.color-17 {
  background-color: yellow;
}