JSFiddle - React, Tailwind, and code Playground

by Ramana Yalla

HTML

<div></div>

CSS

body{
    background:red;
}

div{
    width:200px;
    height:200px;
    background:rgba(197,13,183,0.9);
}

JavaScript

function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}


function rgbToHex(r, g, b, a) {
    

var colorString = $('body').css('background-color'),
    colorsOnly = colorString.substring(colorString.indexOf('(') + 1, colorString.lastIndexOf(')')).split(/,\s*/),
    red = colorsOnly[0],
    green = colorsOnly[1],
    blue = colorsOnly[2];

    
    var alpha = 1-a;
    var x = Math.round((a * (r / 255) + (alpha * (red / 255))) * 255);
    var y = Math.round((a * (g / 255) + (alpha * (green / 255))) * 255);
    var z = Math.round((a * (b / 255) + (alpha * (blue / 255))) * 255);
    
    return "#" + componentToHex(x) + componentToHex(y) + componentToHex(z);
}

var colorDivString = $('div').css('background-color'),
    colorsDivOnly = colorDivString.substring(colorDivString.indexOf('(') + 1, colorDivString.lastIndexOf(')')).split(/,\s*/),
    redDiv = colorsDivOnly[0],
    greenDiv = colorsDivOnly[1],
    blueDiv = colorsDivOnly[2],
    opacityDiv = colorsDivOnly[3];

alert(rgbToHex(redDiv,greenDiv,blueDiv,opacityDiv));