How to match an element's background colour with 2 semi-transparent element background colours

Question

I have made a jsfiddle

In the fiddle there are 3 divs.

1. The one on the left is purple.
2. The one on the right is blue.
3. The one above the blue div has a yet unknown colour

The desired colour of the third div (the one laying over the blue div to the right) is that of the div on the left (the purple one).

The issue is that all the divs have an opacity of 0.7, and must remain (in order to see the content behind them).

My question, then, is how do I calculate the difference between the purple colour on the left and the blue colour on the right so that I may give give the third div a colour so that it matches the colour of the purple div on the left when it overlays the blue div on the right.

I am not asking for you to guess by eye, as I have many other colours to do this for, I would simply like to know if there is a calculation that allows me to do this using JQuery or Javascript?

I do not have any JS code to date as I have no idea where to even start.


HTML

<div id="target" class="opacity purple"></div>
<div id="actualBackground" class="opacity blue"></div>
<div id="sameColourAsTarget" class="opacity purple2"></div>

CSS

div{
    position:absolute;
}
#target{
    left:0px;
    top:0px;
    height:150px;
    width:150px;
}
#actualBackground{
    left:150px;
    top:0px;
    height:150px;
    width:150px;
}
#sameColourAsTarget{
    left:150px;
    top:50px;
    height:50px;
    width:50px;
}
.opacity{
    opacity:0.7;
}
.purple{
    background-color:rgb(152, 3, 214);
}
.blue{
    background-color:rgb(10, 127, 188);
}
.purple2{
    background-color:rgb(175, 3, 150);
}

Any help with this is greatly appreciated,

Thank you

Answer 1

Check the fiddle here for a pure Javascript solution.

/**
 * Gets the mixed color obtained by overlaying a front color
 * with the specified opacity over a solid back color.
 */
function mix(back, front, opacity) {
    var mixed = {
        r: (1 - opacity) * back.r + opacity * front.r,
        g: (1 - opacity) * back.g + opacity * front.g,
        b: (1 - opacity) * back.b + opacity * front.b
    }

    return mixed;
}

/**
 * Gets the front color that can be overlaid with the specified
 * opacity over a solid back color to get the same color as the
 * mixed color.
 */
function unmix(mixed, back, opacity) {
    var front = {
        r: (mixed.r - back.r) / opacity + back.r,
        g: (mixed.g - back.g) / opacity + back.g,
        b: (mixed.b - back.b) / opacity + back.b
    }

    return front;
}

/**
 * Converts an rgb string to a color object in the following form
 * {r: 255, g: 255, b: 255}
 */
function rgbToColor(rgb) {
    var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

    return {
        r: parseInt(matches[1]),
        g: parseInt(matches[2]),
        b: parseInt(matches[3])
    }
}

/**
 * Converts a color object of from {r: 255, g: 255, b: 255} to
 * an rgb string
 */
function colorToRgb(color) {
    var r = Math.round(color.r);
    var g = Math.round(color.g);
    var b = Math.round(color.b);

    return "rgb(" + r + "," + g + "," + b + ")";
}

// get properties of the back element
var backEl = document.getElementById("actualBackground");
var backStyle = window.getComputedStyle(backEl);
var backColor = backStyle.backgroundColor;
var backOpacity = backStyle.opacity;

// get properties of the target element
var mixedEl = document.getElementById("target");
var mixedStyle = window.getComputedStyle(mixedEl);
var mixedColor = mixedStyle.backgroundColor;
var mixedOpacity = mixedStyle.opacity;

// calculate the actual back color by mixing the back element's
// properties with solid white
var back = mix({
    r: 255,
    g: 255,
    b: 255
}, rgbToColor(backColor), backOpacity);

// calculate the actual target color by mixing the target element's
// properties with solid white
var mixed = mix({
    r: 255,
    g: 255,
    b: 255
}, rgbToColor(mixedColor), mixedOpacity);

// calculate the overlay's color by unmixing the back and the target
// colors with an opacity of 0.7 (could also be retrieved from the overlay element
var front = unmix(mixed, back, 0.7);

// get the overlay's element and apply the calculated color
var frontEl = document.getElementById("sameColourAsTarget");
frontEl.style.backgroundColor = colorToRgb(front);
frontEl.style.opacity = 0.7;