div {
  height: calc(10vh + 16px);
  width: calc((10vw + 16px) * 10);
  margin: 8px;
}


div div {
  margin: 8px;
  width: 10vh;
  height: 10vh;
  display: inline-block;
  border-radius: 10px;
}
let hue = 0,
  sat = 0;

for (hue = 0; hue <= 360; hue += 36) {
  let div = "";
  div += `<div>`;
  div += `<div style="background-color: hsl(${hue}, 100%, 50%)">hsl(${hue}, 100%, 50%)</div>`
  div += `</div>`;
  document.body.innerHTML += div;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.