JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<div class="cbox" id="1"></div>
<div class="cbox" id="2"></div>

CSS

.cbox { width:100px; height:30px;  margin:8px;}

JavaScript

function hex2hsv(h) {
    h = (h.charAt(0) == "#") ? h.substring(1, 7) : h;
    var r = parseInt(h.substring(0, 2), 16) / 255,
        g = parseInt(h.substring(2, 4), 16) / 255,
        b = parseInt(h.substring(4, 6), 16) / 255,
        result = {
            'h': 0,
            's': 0,
            'v': 0
        },
        minVal = Math.min(r, g, b),
        maxVal = Math.max(r, g, b),
        delta = (maxVal - minVal);
    result.v = maxVal;
    if (delta === 0) {
        result.h = 0;
        result.s = 0;
    } else {
        result.s = delta / maxVal;
        var del_R = (((maxVal - r) / 6) + (delta / 2)) / delta;
        var del_G = (((maxVal - g) / 6) + (delta / 2)) / delta;
        var del_B = (((maxVal - b) / 6) + (delta / 2)) / delta;
        if (r == maxVal) {
            result.h = del_B - del_G;
        } else if (g == maxVal) {
            result.h = (1 / 3) + del_R - del_B;
        } else if (b == maxVal) {
            result.h = (2 / 3) + del_G - del_R;
        }
        if (result.h < 0) {
            result.h += 1;
        }
        if (result.h > 1) {
            result.h -= 1;
        }
    }
    return [Math.round(result.h * 360), Math.round(result.s * 100), Math.round(result.v * 100)];
}


function hsv2rgb(H, S, V) {
        var h = H,
            s = S,
            v = V;   
    var s = s / 100,
        v = v / 100;
    var hi = Math.floor((h / 60) % 6);
    var f = (h / 60) - hi;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    var rgb = [];
    switch (hi) {
    case 0:
        rgb = [v, t, p];
        break;
    case 1:
        rgb = [q, v, p];
        break;
    case 2:
        rgb = [p, v, t];
        break;
    case 3:
        rgb = [p, q, v];
        break;
    case 4:
        rgb = [t, p, v];
        break;
    case 5:
        rgb = [v, p, q];
        break
    }
    return [Math.min(255, Math.floor(rgb[0] * 256)), Math.min(255, Math.floor(rgb[1] * 256)), Math.min(255, Math.floor(rgb[2] *...