JSFiddle - React, Tailwind, and code Playground

by XGundam05

CSS

body{
  background-color:#2e2e2e;
}
div{
  width:20px;
  height:20px;
  display:inline-block;
}

JavaScript

var Util = {
    lerp: function(t, a, b){
        return b * t + a * (1 - t);
    }
};

function Palette(){
    this.colors = [];
}

function RGBA(r,g,b,a){
    this.R = r;
    this.G = g;
    this.B = b;
    this.A = a;
}

function HSLA(h,s,l,a){
    this.H = h;
    this.S = s;
    this.L = l;
    this.A = a;
}

function Color(obj){
    this.rgba = null;
    this.hsla = null;
    
    if(obj){
        if(obj.hasOwnProperty('R'))
            this.rgba = obj;
        else if(obj.hasOwnProperty('H'))
            this.hsla = obj;
    }
}

RGBA.prototype = {
    getByteRGBA: function(){
        var tmp = new RGBA(0,0,0,0);
        tmp.R = this.R | 0;
        tmp.G = this.G | 0;
        tmp.B = this.B | 0;
        tmp.G = this.G | 0;
        return tmp;
    }
};

Color.prototype = {
    compute: function(){
        if(this.hsla == null){
            if(this.rgba == null)
                this.rgba = new RGBA(0,0,0,0);
            
            var R_ = this.rgba.R / 255;
            var G_ = this.rgba.G / 255;
            var B_ = this.rgba.B / 255;
            
            var Cmax = R_ > G_ ? (R_ > B_ ? R_ : B_) : (G_ > B_ ? G_ : B_);
            var Cmin = R_ < G_ ? (R_ < B_ ? R_ : B_) : (G_ < B_ ? G_ : B_);
            var delta = Cmax - Cmin;
            
            var L = (Cmax + Cmin) / 2;
            L = L > 1 ? 1 : (L < 0 ? 0 : L);
            
            var H = 0;
            if(delta != 0){
                if(Cmax == R_)
                    H = 60 * (((G_ - B_) / delta) % 6);
                else if(Cmax == G_)
                    H = 60 * (((B_ - R_) / delta) + 2);
                else if(Cmax == B_)
                    H = 60 * (((R_ - G_) / delta) + 4);
            }
            
            H = (H % 360) * (H < 0 ? -1 : 1);
            
            var S = 0;
            if(delta != 0)
                S = delta / (1 - Math.abs(2 * L - 1));
            
            S = S > 1 ? 1 : (S < 0 ? 0 : S);
            
            this.hsla = new HSLA(H, S, L,...