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: -10px -9px -10px -10px;
    position: relative;
    z-index: 3;
    overflow:hidden;
    opacity: .8;
}

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

JavaScript

function Color (h,s,v) {
    this.h = h % 1;
    this.s = s % 1;
    this.v = v % 1;
}
Color.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;
    sec<1?(r=v,g=t,b=p):sec<2?(r=q,g=v,b=p):sec<3?(r=p,g=v,b=t):sec<4?(r=p,g=q,b=v):sec<5?(r=t,g=p,b=v):(r=v,g=p,b=q);

    console.log( [r,g,b].map(function (a) {return (a=0|a*256)<16?0:""+a.toString(16)}));
};
Color.prototype.rgb = function () {
     return Color.hsvToRgb (this.h,this.s,this.v );   
}
Color.prototype.adjust = function (h,s,v) {
    return new Color (
        this.h + h,
        this.s + s,
        this.v + v
    );
}
function RandomColorSet (color) {
    this.color = color instanceof Color?color:new Color (Math.random (),.5,.95);
  this.i = 0;
}
RandomColorSet.gr = 0.618033988749895

RandomColorSet.prototype.getNextColor =  function () {
  this.color.h += RandomColorSet.gr, this.color.h %= 1;
  if (!!this.i && !(this.i % 10)) console.log ("a"),
      this.color.s = (( this.color.s + .125 ) % .5 ) + .25
  if (!!this.i && !(this.i % 30))
      this.color.v = (( this.color.v + .192 ) % .495 ) + .5
  this.i++
  return new Color (this.color.h,this.color.s,this.color.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++) {
        var color = x.getNextColor();
        var rgb = color.rgb();
        var div = document.createElement ("div");
            div.style.background = "rgb(" + rgb + ")";
            div.className = "color";
        
        var textColor = color.adjust (0,0,- RandomColorSet.gr).rgb();
        var text = document.createElement ( "div");
            text.style.color = "rgb(" + textColor + ")";
            text.className = "rgb";
           ...