JSFiddle - React, Tailwind, and code Playground

by tmtron

HTML

<table id="colors"></table>

JavaScript

//var threshold = 186;
var threshold = 149;
// var threshold = 179;
var r,g,b;

function hex2(val) {
  return ('0' + val.toString(16).toUpperCase()).slice(-2);
}

function hexify() {
  return hex2(r) + hex2(g) + hex2(b);
}

function contrast() {
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

var table = document.getElementById('colors');
var row;
for (b = 0; b <= 0xFF; b += 0x33) {
	for (g = 0; g <= 0xFF; g += 0x33) {
    if (!(g % 0x66)) {
    	row = document.createElement('tr');
    	table.appendChild(row);
    }
		for (r = 0; r <= 0xFF; r += 0x33) {
    	var col = document.createElement('td');
      col.style.background = '#' + hexify();
      col.style.color = contrast();
      col.innerText = hexify();
      row.appendChild(col);
    }
  }
}