JSFiddle - React, Tailwind, and code Playground

by Eric Wu

HTML

<div class="master"><div id='cores' class="cores"></div>
<div id='cores1'class="cores"></div>
    <div id='cores2'class="cores"></div></div><br>
<div  style="position:fixed">
    <div id='res'></div>
    <div id='resCol'  class='resCol'>&nbsp;</div>
</div>
<script>
    function retornaCor(obj){
    bg = $(obj).css("background-color")
       $("#res").html(bg)
    $("#resCol").css("background-color",bg)
    }</script>

CSS

.point{
    width:3px;
    height:20px;
    float:left
}
.point:hover{
    border:1px solid black
}
.cores
{
   width:770px;
    height:20px; 
     float:left
}
.master{
    width:2310px;     
}
.resCol{
 width:10px;   
    height:10px;
}

JavaScript

counter = 0;
var tb = $('#cores');
var tb1 = $('#cores1');
var tb2 = $('#cores2');
for(x=0;x<=256;x++)
{
    var hexColor = "#ff"+(x<16?"0"+(x).toString(16):(x).toString(16))+"00";
   // console.log(hexColor);
    var n = $(document.createElement("div")).addClass("point").css("background-color",hexColor);
    //console.log(n);
    tb.append(n);
}
for(x=255;x>=0;x--)
{
    var hexColor = "#"+(x<16?"0"+(x).toString(16):(x).toString(16))+"ff00";
    //console.log(hexColor);
    var n = $(document.createElement("div")).addClass("point").css("background-color",hexColor);
   // console.log(n);
    tb1.append(n);
}
for(x=0;x<=256;x++)
{
    var hexColor = "#00ff"+(x<16?"0"+(x).toString(16):(x).toString(16))+"";
    //console.log(hexColor);
    var n = $(document.createElement("div")).addClass("point").css("background-color",hexColor);
    //console.log(n);
    tb2.append(n);
}
$(".point").attr("onMouseOver","retornaCor(this)");