*{
  margin: 0;
  padding:0;
}

body {
  display: flex;
  flex-wrap: wrap;
}

.tile{
  font-size:12px;
  width:12.5%;
  text-transform: uppercase;
  font-weight: bold;
  font-family: Verdana;
  padding:10px 0;
  text-align:center;
}
function betterContrastColor(hex) {
  let threshold = 130; // about 256/2 - lower values results into darker text on dark background
  let colorBrightness = ((hexToRed(hex) * 299) + (hexToGreen(hex) * 587) + (hexToBlue(hex) * 114)) / 1000;

  function cleanHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
  function hexToRed(h) {return parseInt((cleanHex(h)).substring(0,2),16)}
  function hexToGreen(h) {return parseInt((cleanHex(h)).substring(2,4),16)}
  function hexToBlue(h) {return parseInt((cleanHex(h)).substring(4,6),16)}

  return (colorBrightness > threshold) ? "#000000" : "#ffffff"	
}

const columns = ["00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee","ff"];

for (i=0; i < columns.length; i++) {
    for (j = 0; j < columns.length; j++) {
        for (k=0; k < columns.length; k++) {
            const colorTile = "#" + columns[i] + columns[j] + columns[k];
            const textcolor = betterContrastColor(colorTile)
            let element = document.createElement('div')
            element.setAttribute('class', 'tile');
            element.setAttribute('style', `background-color:${colorTile}; color:${textcolor};`)
            element.innerText = colorTile;
            document.body.insertAdjacentElement('beforeend', element);
        }
    }
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.