How to match the background color of an element with 2 semi-transparent background colors of an element
I made a jsfiddle
There are 3 divs in the violin.
- On the left is purple .
- The one on the right is blue .
- There is a still unknown color above the blue div
The desired color of the third div (the one above the blue div on the right) is the color of the div on the left (purple).
The problem is that all divs have an opacity of 0.7 and must stay (to view the content behind them).
So my question is how to calculate the difference between the purple on the left and blue on the right, so that I can give a third color to match the color of the purple div on the left when it overlays the blue div on the right.
I am not asking you to guess because I have many other colors for this, I just would like to know if there is a calculation that allows me to do this with JQuery or Javascript?
I have no JS code as of today as I have no idea where to 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
source to share
Check out 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 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 element and apply the calculated color
var frontEl = document.getElementById("sameColourAsTarget");
frontEl.style.backgroundColor = colorToRgb(front);
frontEl.style.opacity = 0.7;
source to share
According to your Fiddle, I believe you get the color by doing this:
var temp = $("#target").css('background-color');
temp = temp.substring(4,14);
temp = temp.split(",");
var temp2 = $("#actualBackground").css('background-color');
temp2 = temp2.substring(4,14);
temp2 = temp2.split(",");
var result = [0,0,0]
for(var i=0; i < result.length; i++){
result[i] = (parseInt(temp[i]) + parseInt(temp2[i])) / 2
}
result = "rgb("+result[0]+", "+result[1]+", "+result[2]+")";
$("#sameColourAsTarget").css("background-color", result);
source to share