Create multiple div elements with different background colors.

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

CSS

.swatch {
  width: 50px;
  height: 50px;
  display: inline-block;
}

JavaScript

let colors = ["#4667a6", "#ea9f2f", "#529b57", "#925a92", "#35869f", "#de5c5c", "#009cd0", "#34684e", "#ffb668", "#4e73ba", "#ffb134", "#5bad61", "#a264a2", "#3b95b1", "#f86767", "#00aee8", "#3a7457", "#ffcb74", "#567ecd", "#ffc33a", "#65be6b", "#b36eb3", "#42a5c3", "#ff7272", "#00c0ff", "#408060", "#ffe080", "#5f8ae0", "#ffd63f", "#6ed075", "#c479c4", "#48b4d6", "#ff7c7c", "#00d2ff", "#468c69", "#fff58c", "#6796f3", "#ffe844", "#78e27f", "#d583d5", "#4ec4e8", "#ff8787", "#00e4ff", "#4c9872", "#ffff98", "#6fa2ff", "#fffa4a", "#81f489", "#e68de6", "#54d3fa", "#ff9292", "#00f6ff", "#52a47b", "#ffffa4"];

for(let i=0;i<colors.length;i++){

  $('body').append(`<div class="swatch" style="background-color:${colors[i]};"></div>`);

}