Calculating the opacity value mathematically

Question

How is transparency calculated mathematically?

In Photoshop, CSS has an opacity value. In fact, this opacity is the transparent behavior of the layer. This is all we know. But how is it mathematically calculated? Is there any equation for calculating opacity?

Having set the opacity value, what happens there?

Take the case with the usual color layers: layer 1 (foreground) and layer 2 (background layer)

Level 1 is red (for example, color A ), and level 2 is white (for example, color B ).

When we set the opacity (say p ) to level 1, we can put 0.5 or 50% and get a whitish red color (say, the color value is X ).

To get this value of X , what should I do mathematically?

t

 X = (things which will be a relation containing p, A and B) 

I want to find out the exact math equation to find X

Also, if I have an equation, and the color values ​​are hexadecimal in nature, why can I get the correct result with a hexadecimal calculator?

Answer 1

The combination formula is C1 = (R1,G1,B1) and C2 = (R2,G2,B2) in the new color C3, where C2 is superimposed on top of C1 with opacity p, usually ( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 ) .

See the Wikipedia article on transparency for more details.

Answer 2

The following javascript provides a method that you can use to manually calculate the opacity color value:

 // caculateTransparentColor(foreground, background, opacity) var theColor = caculateTransparentColor('#ff0000', '#00ff00', 0.5) console.log(theColor); Returns: #808000 

the code:

 var COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/; function colorHexToRGB(htmlColor) { arrRGB = htmlColor.match(COLOR_REGEX); if (arrRGB == null) { alert("Invalid color passed, the color should be in the html format. Example: #ff0033"); } var red = parseInt(arrRGB[1], 16); var green = parseInt(arrRGB[2], 16); var blue = parseInt(arrRGB[3], 16); return {"r":red, "g":green, "b":blue}; } function caculateTransparentColor(foregroundColor, backgroundColor, opacity) { if (opacity < 0.0 || opacity > 1.0) { alert("assertion, opacity should be between 0 and 1"); } opacity = opacity * 1.0; // to make it float var foregroundRGB = colorHexToRGB(foregroundColor); var backgroundRGB = colorHexToRGB(backgroundColor); var finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity); var finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity); var finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity); return colorRGBToHex(finalRed, finalGreen, finalBlue); } function colorRGBToHex(red, green, blue) { if (red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255) { alert("Invalid color value passed. Should be between 0 and 255."); } var formatHex = function(value) { value = value + ""; if (value.length == 1) { return "0" + value; } return value; } hexRed = formatHex(red.toString(16)); hexGreen = formatHex(green.toString(16)); hexBlue = formatHex(blue.toString(16)); return "#" + hexRed + hexGreen + hexBlue; } 

Answer 3

The formula for the result of mixing two transparent pixels:

C1 = [R1, G1, B1] - the color of the foreground pixel.

C2 = [R2, G2, B2] - background color.

p1 is the percentage of opacity of the foreground pixel.

p2 is the percentage of opacity of the background pixel.

New_Pixel_Color = (p1 * c1 + p2 * c2-p1 * p2 * c2) / (p1 + p2-p1 * p2)

New_Pixel_opacity = p1 + p2-p1 * p2

You can experience and enjoy it!