// Safari and Firefox only... no Chrome support at time of this post

Object.assign(document.body.style, { 

  margin: 0,

  display: 'grid',

  'grid-template-columns': '1fr 1fr 1fr',

});

const hwbBlock = () => {

  const hue = Math.round(Math.random() * 360)

  const white = Math.round(

    Math.random() * Math.random() * 100)

  const black = Math.round(

    Math.random() * Math.random() * 100)

  const col = `hwb(${hue} ${white}% ${black}%)`

  document.body.innerHTML += `

    <div 

      style="

        width: 100%;

        height: 4em;

        font-family: sans-serif;

        text-align: center;

        line-height: 2.3;

        color: white;

        text-shadow: 1px 1px 5px black;

        background:${col}">${col}</div>

  `

}

Array(102).fill(0).map(hwbBlock);