JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<a id="next">click</a>

CSS

.wrap {
    clear:left;
}
.color {
    border: 1px solid silver;
    width: 56px;
    height: 56px;
    float: left;
    border-radius: 5px;
    margin: 1px 1px 1px 1px;
    position: relative;
    z-index: -1;
}
.color:hover {
    color:#FFF;
    width: 76px;
    height: 76px;
    margin: -11px -10px -11px -11px;
    position: relative;
    z-index: 3;
    overflow:hidden;
    opacity: .8;
}

.rgb {
    color: #FFF;
    width: 56px;
    height: 56px;
    opacity:0;   
}
.rgb:hover {
    padding: 10px 10px;
    opacity: 1;
}

JavaScript

function RandomColorSet () {
  this.h = Math.random();    
  this.s = .5;
  this.v = .95;
  this.i = 0;
}
RandomColorSet.gr = 0.618033988749895
RandomColorSet.hsvToRgb = function (h,s,v) {
    var	sec = ~~(h*6);
		var	f = h*6 - sec;
		var	p = v * (1-s);
		var	q = v * (1-f*s);
		var	t = v * (1-(1-f)*s);
		var	r = 0xFF,g = 0xFF,b = 0xFF;
		switch(sec) {
			case 0:	r = v; g = t; b = p;break;
			case 1:	r = q, g = v, b = p;break;
			case 2:	r = p, g = v, b = t;break;
			case 3:	r = p, g = q, b = v;break;
			case 4: r = t, g = p, b = v;break;
			case 5: r = v, g = p, b = q
		}
		return [~~(r*256),~~(g*256),~~(b*256)];
	};
RandomColorSet.prototype.getNextColor =  function (h,s,v) {
  this.h += RandomColorSet.gr, this.h %= 1;

  if (!!this.i && !(this.i % 10)) console.log ("a"),
      this.s = (( this.s + .125 ) % .5 ) + .25
  if (!!this.i && !(this.i % 30))
      this.v = (( this.v + .192 ) % .495 ) + .5
  this.i++
  return RandomColorSet.hsvToRgb (h||this.h,s||this.s,v||this.v);

}

var x = new RandomColorSet();

document.getElementById("next").addEventListener ("click",addColor.bind(null,10))


function addColor(n) {
    var wrap = document.createElement("div");
wrap.className = "wrap";
    n = n || 1;
    for ( var i = 0; i < n ; i++) {
        console.log (n)
        var color = x.getNextColor()
        var div = document.createElement ("div");
            div.style.background = "rgb(" + color + ")";
            div.className = "color";
        
        var rgb = document.createElement ( "div");
            rgb.className = "rgb";
            rgb.innerHTML = "<center>" + ["R:"+color[0],"G:"+color[1],"B:"+color[2]].join("<br>") + "</center>";

        div.appendChild (rgb);
        wrap.appendChild(div); 
    
    }
    document.body.appendChild (wrap);
}

for (var i = 0; i < 1 ; i++)
    addColor(10);