JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dark red"></div>
<div class="dark yellow"></div>
<div class="dark green"></div>
<div class="dark cyan"></div>
<div class="dark blue"></div>
<div class="dark purple"></div>
<div class="dark gray"></div>
<br class="light" />

CSS

div { display: inline-block; width: 20px; height: 20px;
    cursor: pointer; color: #fff }

.red { background: rgb(128, 25, 0) }
.yellow { background: rgb(128, 128, 0) }
.green { background: rgb(0, 128, 25) }
.cyan { background: rgb(0, 128, 128) }
.blue { background: rgb(25, 0, 128) }
.purple { background: rgb(128, 0, 128) }
.gray { background: rgb(128,128,128) }

JavaScript

function RgbToHsv(r, g, b) {
    var min = Math.min(r, g, b),
        max = Math.max(r, g, b),
        delta = max - min,
        h, s, v = max;

    v = Math.floor(max / 255 * 100);
    if (max == 0) return [0, 0, 0];
    s = Math.floor(delta / max * 100);
    var deltadiv = delta == 0 ? 1 : delta;
    if( r == max ) h = (g - b) / deltadiv;
    else if(g == max) h = 2 + (b - r) / deltadiv;
    else h = 4 + (r - g) / deltadiv;
    h = Math.floor(h * 60);
    if( h < 0 ) h += 360;
    return { h: h, s:s, v:v }
}
function HsvToRgb(h, s, v) {
    h = h / 360;
    s = s / 100;
    v = v / 100;
    
    if (s == 0)
    {
        var val = Math.round(v * 255);
        return {r:val,g:val,b:val};
    }
    hPos = h * 6;
    hPosBase = Math.floor(hPos);
    base1 = v * (1 - s);
    base2 = v * (1 - s * (hPos - hPosBase));
    base3 = v * (1 - s * (1 - (hPos - hPosBase)));
    if (hPosBase == 0) {red = v; green = base3; blue = base1}
    else if (hPosBase == 1) {red = base2; green = v; blue = base1}
    else if (hPosBase == 2) {red = base1; green = v; blue = base3}
    else if (hPosBase == 3) {red = base1; green = base2; blue = v}
    else if (hPosBase == 4) {red = base3; green = base1; blue = v}
    else {red = v; green = base1; blue = base2};
        
    red = Math.round(red * 255);
    green = Math.round(green * 255);
    blue = Math.round(blue * 255);
    return {r:red,g:green,b:blue};
} 

function AppendColor(light) {
    $(".dark").each(function(i){
        var color = $(this).css("background-color");
        color = color.replace(/[^0-9,]+/g, "");
        var red = color.split(",")[0];
        var gre = color.split(",")[1];
        var blu = color.split(",")[2];
        
        var hsv = RgbToHsv(red,gre,blu);
        var rgb = HsvToRgb(hsv.h, hsv.s, light);
        
        color = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
        $("<div />")
            .css("background", color)
            .attr("title", color)
           ...