JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>

CSS

.box {
    padding: 50px;
    border: 1px solid #ccc;
    
    background: #f2f2f2;
}

JavaScript

function hex2rgba(hex, opacity)
{
    //extract the two hexadecimal digits for each color
    var patt = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;
    var matches = patt.exec(hex);
    
    //convert them to decimal
    var r = parseInt(matches[1], 16);
    var g = parseInt(matches[2], 16);
    var b = parseInt(matches[3], 16);
    
    //create rgba string
    var rgba = "rgba(" + r + "," + g + "," + b + "," + opacity + ")";
    
    //return rgba colour
    return rgba;
}

$(".box").css("background-color", hex2rgba("#ABCDEF", 0.6));