JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<div>
    color index<br />
    rgb<br />
    resolved color<br />
    hsv<br />
    hsl
</div>

JavaScript

function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}
function rgb2hsv () {
    var rr, gg, bb,
        r = arguments[0] / 255,
        g = arguments[1] / 255,
        b = arguments[2] / 255,
        h, s,
        v = Math.max(r, g, b),
        diff = v - Math.min(r, g, b),
        diffc = function(c){
            return (v - c) / 6 / diff + 1 / 2;
        };

    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {
            h = bb - gg;
        }else if (g === v) {
            h = (1 / 3) + rr - bb;
        }else if (b === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: Math.round(s * 100),
        v: Math.round(v * 100)
    };
}

var colorArrays = {
		red: [0, 16, 32, 112, 128, 144, 160, 176, 192, 208, 14, 30, 46, 62, 78, 94, 110, 126, 142, 158, 174, 190, 206, 222, 15, 31, 47, 79, 95, 111, 127, 143, 159, 175, 191, 207, 223],
		pink: [48, 63, 64, 80, 96],
		turqouise: [7, 23, 39, 55, 71, 87, 103, 119],
		purple: [1, 17, 33, 49, 65, 81, 97, 113, 129, 145, 161, 177, 193, 209, 2, 18, 34, 50, 66, 82, 98, 114, 130, 146, 162, 178, 194, 210],
		blue: [3, 19, 35, 51, 67, 83, 99, 115, 131, 147, 163, 179, 195, 211, 4, 20, 36, 52, 68, 84, 100, 116, 132, 148, 164, 180, 196, 212, 5, 21, 37, 53, 69, 85, 101, 117, 133, 149,...