JSFiddle - React, Tailwind, and code Playground

by Scelesto

HTML

<table>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td></tr>
</table>

CSS

td{
    height:100px;
    width:100px;
    display:inline-block;
    margin:0 1px;
}

JavaScript

var generateRandomColors=function(number){
/*
This generates colors using the following algorithm:
Each time you create a color:
	Create a random, but attractive, color{
		Red, Green, and Blue are set to random luminosity.
		One random value is reduced significantly to prevent grayscale.
		Another is increased by a random amount up to 100%.
		They are mapped to a random total luminosity in a medium-high range (bright but not white).
	}
	Check for similarity to other colors{
		Check if the colors are very close together in value.
		Check if the colors are of similar hue and saturation.
		Check if the colors are of similar luminosity.
		If the random color is too similar to another,
		and there is still a good opportunity to change it:
			Change the hue of the random color and try again.
	}
	Output array of all colors generated
*/
	//if we've passed preloaded colors and they're in hex format
	if(typeof(arguments[1])!='undefined'&&arguments[1].constructor==Array&&arguments[1][0]&&arguments[1][0].constructor!=Array){
		for(var i=0;i<arguments[1].length;i++){ //for all the passed colors
			var vals = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(arguments[1][i]); //get RGB values
			arguments[1][i]=[parseInt(vals[1], 16),parseInt(vals[2], 16),parseInt(vals[3], 16)]; //and convert them to base 10
		}
	}
	var loadedColors=typeof(arguments[1])=='undefined'?[]:arguments[1],//predefine colors in the set
		number=number+loadedColors.length,//reset number to include the colors already passed
		lastLoadedReduction=Math.floor(Math.random()*3),//set a random value to be the first to decrease
		rgbToHSL=function(rgb){//converts [r,g,b] into [h,s,l]
			var r=rgb[0],g=rgb[1],b=rgb[2],cMax=Math.max(r,g,b),cMin=Math.min(r,g,b),delta=cMax-cMin,l=(cMax+cMin)/2,h=0,s=0;if(delta==0)h=0;else if(cMax==r)h=60*((g-b)/delta%6);else if(cMax==g)h=60*((b-r)/delta+2);else h=60*((r-g)/delta+4);if(delta==0)s=0;else...