const debug = false;

​

var rgbaColor = 'rgba(1,12,123,0.33)';

// var rgbaColor = '#999';

// var rgbaColor = 'rgb(30, 20, 200)';

​

if (debug) console.log(`rgbaColor: ${rgbaColor}`);

​

var rgbColor = convertRGBAtoRGBIfNeeded(rgbaColor)

​

if (debug) console.log(`rgbColor: ${rgbColor}`);

​

var rgbaElement = document.getElementById("rgba");

var rgbElement = document.getElementById("rgb");

setColor(rgbaElement, rgbaColor)

setColor(rgbElement, rgbColor)

​

function setColor(element, color) {

  if (!element) return;

  element.style.backgroundColor = color;

}

​

function convertRGBAtoRGBIfNeeded(colorCssString) {

  if (debug) console.log(`colorCssString: ${colorCssString}`)

​

  const isRGBA = function(colorCssString) {

    return colorCssString.match(/rgba/gi);

  }

​

  if (!isRGBA(colorCssString)) return colorCssString;

​

  var colorArray = colorCssString.match(/\d+\.*\d*/g); 

  if (debug) console.log(colorArray);

  if (debug) console.log(`colorArray: ${colorArray}`);

  var rgb = colorCssString.match(/\d+\.*\d+/g);

  if (debug) console.log(`rgb: ${rgb}`);

​

  let Source = {};

  Source.R = colorArray.shift()/255;

  Source.G = colorArray.shift()/255;

  Source.B = colorArray.shift()/255;

  Source.A = colorArray.shift()/1;

  if (debug) console.log(colorArray);

  if (debug) console.log(Source);

  let BGColor = {

    R: 1,

    G: 1,

    B: 1

  };

​

//    Credits to:

//    https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb

  let Target = {};

  Target.R = parseInt(255 * (((1 - Source.A) * BGColor.R) + (Source.A * Source.R)));

  Target.G = parseInt(255 * (((1 - Source.A) * BGColor.G) + (Source.A * Source.G)));

  Target.B = parseInt(255 * (((1 - Source.A) * BGColor.B) + (Source.A * Source.B)));

  if (debug) console.log(Target);

  const rgbColor = `rgb(${Target.R}, ${Target.G}, ${Target.B})`  

  return rgbColor;

​

}

​