Combine 2 colors in JavaScript-CodePudding

If I have a div with a red background, and over it I have a div with a blue background with 0.4 opacity, for example. How could I programmatically calculate the resulting color that the div appears to be in rgb format?

.red {
  width: 100px;
  height: 100px;
  background-color: rgba(204, 51, 0, 1)
}

.blue-transparent {
  width: 100px;
  height: 100px;
  background-color: rgba(77, 148, 255, 0.4)
}

<div >
  <div >

  </div>
</div>

https://jsfiddle.net/xfjw3r0b/2/

CodePudding user response：

Adapting from Mixing two colors "naturally" in javascript, here's the "formula" for combining 2 colors.

//colorChannelA and colorChannelB are ints ranging from 0 to 255
function colorChannelMixer(colorChannelA, colorChannelB, amountToMix) {
  var channelA = colorChannelA * amountToMix;
  var channelB = colorChannelB * (1 - amountToMix);
  return Math.round(channelA   channelB);
}
//rgbA and rgbB are arrays, amountToMix ranges from 0.0 to 1.0
//example (red): rgbA = [255,0,0]
function colorMixer(rgbA, rgbB, amountToMix) {
  var r = colorChannelMixer(rgbA[0], rgbB[0], amountToMix);
  var g = colorChannelMixer(rgbA[1], rgbB[1], amountToMix);
  var b = colorChannelMixer(rgbA[2], rgbB[2], amountToMix);
  // return "rgb("   r   ","   g   ","   b   ")";
  return [r, g, b]
}

function colorize(rgb) {
  return "rgb("   rgb[0]   ","   rgb[1]   ","   rgb[2]   ")";
}

var color = colorMixer([204, 51, 0], [77, 148, 255], 1 - 0.4);
// console.log(color)
// expected: 153, 90, 102

document.querySelector(".result").style.backgroundColor = colorize(color)

// second test:
var color1 = [50, 200, 120]
var color2 = [175, 22, 200]
var white = [255, 255, 255]
var color1white = colorMixer(color1, white, 0.75)
var result2 = colorMixer(color2, color1white, 0.4)
document.querySelector(".result2").style.backgroundColor = colorize(result2)

// so final function for rgba
function color_mix_rgba(rgba1, rgba2, background) {
  background = background || [255, 255, 255]
  var color1bg = colorMixer(rgba1, background, rgba1[3])
  var result = colorMixer(rgba2, color1bg, rgba2[3])
  return result;
}


// final test
var result3 = color_mix_rgba([255, 200, 255, 0.75], [0, 255, 100, 0.5], [0, 0, 0])
document.querySelector(".result3").style.backgroundColor = colorize(result3)

.square {
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.red {
  background-color: rgba(204, 51, 0, 1)
}

.blue-transparent {
  background-color: rgba(77, 148, 255, 0.4)
}

.result,
.result2,
.result3 {
  background: black;
}

<div >
  <div >
  </div>
</div>
<div ></div>

<div  style="background-color: rgba(50, 200, 120, 0.75)">
  <div  style="background-color: rgba(175, 22, 200, 0.4)">
  </div>
</div>
<div ></div>

<div style="clear:both"></div>

<div  style="background-color: black">
  <div  style="background-color: rgba(255, 200, 255, 0.75)">
    <div  style="background-color: rgba(0, 255, 100, 0.5)">
    </div>
  </div>
</div>
<div ></div>