JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<div id="results"></div>

CSS

.color {
    width:60px;
    height:60px;
    overflow:hidden;
    float:left;
    margin:10px;
    color:#eee;
    letter-spacing:2px;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

JavaScript

//convert
(function(f){function j(a,b,c){a/=255;b/=255;c/=255;var g=Math.max(a,b,c),d=Math.min(a,b,c),e,f=(g+d)/2,h;if(g===d)e=d=0;else{h=g-d;d=0.5<f?h/(2-g-d):h/(g+d);switch(g){case a:e=(b-c)/h+(b<c?6:0);break;case b:e=(c-a)/h+2;break;case c:e=(a-b)/h+4}e/=6}return[Math.floor(360*e),Math.floor(100*d),Math.floor(100*f)]}function k(a){a=parseInt(a,16);return[a>>16,a>>8&255,a&255]}f.rgb2hsl=j;f.hex2rgb=k;f.hex2hsl=function(a){a=k(a);return j(a[0],a[1],a[2])}})("undefined"===typeof exports?this.convert={}:exports);
//classify
(function(d){function e(a,b,c){return 97<c?"white":12>c?"black":8>b?"gray":11>a||335<a?"red":42>a?45>b?"brown":"orange":63>a?"yellow":170>a?"green":260>a?"blue":300>a?"purple":"pink"}function f(a,b,c){a=convert.rgb2hsl(a,b,c);return e(a[0],a[1],a[2])}d.hex2hue=function(a){a=convert.hex2rgb(a);return f(a[0],a[1],a[2])};d.rgb2hue=f;d.hsl2hue=e})("undefined"===typeof exports?this.classify={}:exports);
//run test
(function(){for(var d=convert,e=classify,a,b=[],c=0;1E3>c;c++)a=(16777216+16777215*Math.random()).toString(16).substr(1,6),b.push('<div class="color" style="background-color:#',a,'" title="',d.hex2hsl(a).join(","),'">',e.hex2hue(a),"</div>");document.getElementById("results").innerHTML=b.join("")})();