JSFiddle - React, Tailwind, and code Playground

HTML

<div id='box1'>base</div>
<div id='box2'>added</div>
<div id='box3'>result</div>

CSS

#box1,#box2,#box3 {
  display: inline-block;
  padding: 4em;
  width: 4em;
  text-align: center;
  background-color: orangered;
  margin: 1px;
  text-transform: uppercase;
}

JavaScript

var base = [260, 110, 40, 0.7];
var added = [220,170, 100,0.5];

var mix = [];
mix[3] = 1 - (1 - added[3]) * (1 - base[3]); // alpha
mix[0] = Math.round((added[0] * added[3] / mix[3]) + (base[0] * base[3] * (1 - added[3]) / mix[3])); // red
mix[1] = Math.round((added[1] * added[3] / mix[3]) + (base[1] * base[3] * (1 - added[3]) / mix[3])); // green
mix[2] = Math.round((added[2] * added[3] / mix[3]) + (base[2] * base[3] * (1 - added[3]) / mix[3])); // blue

box1.style['background-color'] = "rgba("+base.join(',')+")";
box2.style['background-color'] = "rgba("+added.join(',')+")";
box3.style['background-color'] = "rgba("+mix.join(',')+")";