JSFiddle - React, Tailwind, and code Playground

by roberkules

HTML

r <input type="text" id="rr" maxlength="3" />
g <input type="text" id="gg" maxlength="3" />
b <input type="text" id="bb" maxlength="3" />
a <input type="text" id="aa" maxlength="3" />

bg: 
r<input type="text" id="bgrr" maxlength="3" value="255" />
g<input type="text" id="bggg" maxlength="3" value="255" />
b<input type="text" id="bgbb" maxlength="3" value="255" />

<input type="button" value="&raquo;" onclick="check();return false;" />

CSS

input {
    width: 30px;
    text-align: center;
}

#aa {
    margin-right: 10px;
}

JavaScript

function val(n) {
    var value = document.getElementById(n).value.replace(/\s/g, '');
    if ('' == value) {
        return 0;
    }

    if (!/^\d{1,3}$/.test(value)) {
        return -1;
    }

    value = parseInt(value);

    if (value > 255) {
        return -1;
    }

    return value;
}

function check() {
    var rgba = {
        r: val('rr'),
        g: val('gg'),
        b: val('bb'),
        a: val('aa')
    };

    var bg = {
        r: val('bgrr'),
        g: val('bggg'),
        b: val('bgbb')
    };

    alert(rgba2rgb(rgba, bg));
}

function rgba2rgb(rgba, bg) {
    if (!bg) {
        bg = {
            r: 255,
            g: 255,
            b: 255
        };
    }
    
    console.log('convert rgba', rgba, 'on bg', bg);
    
    var rgb = {
        r: normalize(rgba.r, rgba.a, bg.r),
        g: normalize(rgba.g, rgba.a, bg.g),
        b: normalize(rgba.b, rgba.a, bg.b)
    };
    
    function normalize(source, alpha, bg) {
        source = source / 255;
        alpha = alpha / 255;
        bg = bg / 255;
        console.log('normalize', source, alpha, bg);
        var x = Math.round((((1 - alpha) * source) + (alpha * bg)) * 255);
        return x > 255 ? 255 : x;
    }
    
    var hex = {
        r: rgb.r.toString(16),
        g: rgb.g.toString(16),
        b: rgb.b.toString(16)
    };
    
    console.log('rgb', rgb, 'hex', hex);
    return rgb;
}