body {
  margin: .25em;
}

div {
  float: left;
  width: 2em;
  height: 2em;
  margin: .25em;
  border: thin solid black;
}
div:nth-child(10n + 1) {
  clear: both;
}
div:nth-child(1) {
  background: #4e79a7;
}
div:nth-child(2) {
  background: #f28e2c;
}
div:nth-child(3) {
  background: #e15759;
}
div:nth-child(4) {
  background: #76b7b2;
}
div:nth-child(5) {
  background: #59a14f;
}
div:nth-child(6) {
  background: #edc949;
}
div:nth-child(7) {
  background: #af7aa1;
}
div:nth-child(8) {
  background: #ff9da7;
}
div:nth-child(9) {
  background: #9c755f;
}
div:nth-child(10) {
  background: #bab0ab;
}
div:nth-child(11) {
  background: #253a50;
}
div:nth-child(12) {
  background: #954f09;
}
div:nth-child(13) {
  background: #9d1c1e;
}
div:nth-child(14) {
  background: #3c726e;
}
div:nth-child(15) {
  background: #2a4b25;
}
div:nth-child(16) {
  background: #a68510;
}
div:nth-child(17) {
  background: #6a405f;
}
div:nth-child(18) {
  background: #ff1e35;
}
div:nth-child(19) {
  background: #4d3a2f;
}
div:nth-child(20) {
  background: #7e6f68;
}
div:nth-child(21) {
  background: #a1b9d3;
}
div:nth-child(22) {
  background: #f9cea4;
}
div:nth-child(23) {
  background: #f4c3c4;
}
div:nth-child(24) {
  background: #cae3e1;
}
div:nth-child(25) {
  background: #a5d09f;
}
div:nth-child(26) {
  background: #f8ebbd;
}
div:nth-child(27) {
  background: #dfcad9;
}
div:nth-child(28) {
  background: #ffdfe3;
}
div:nth-child(29) {
  background: #cdb9ad;
}
div:nth-child(30) {
  background: #e8e5e3;
}