*{
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);
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.