19

How is opacity calculated mathematically?

There is opacity value in Photoshop, CSS etc. Actually this opacity is the transparent behavior of a layer. That we all know. But how is it calculated mathematically? Is there any equation to calculate opacity?

By setting opacity value what is happening there?

Take the case of plain color layers: Layer 1 (Foreground Layer) and Layer 2 (background layer)

Layer 1 is red (say color value A) and Layer 2 is white (say color value B).

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

For getting this value X what should I do mathematically?

ie.

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

I want to know the exact mathematical equation to find X.

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

JJJ
  • 32,902
  • 20
  • 89
  • 102
spider
  • 320
  • 1
  • 2
  • 10

3 Answers3

31

The formula for combining C1 = (R1,G1,B1) and C2 = (R2,G2,B2) into a new color C3, where C2 is overlayed on top of C1 with opacity p is usually ( (1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2 ).

See Wikipedia article on transparency for more information.

ipavlic
  • 4,906
  • 10
  • 40
  • 77
  • Also remember to multiply the overlay color alpha value with the layer alpha value if your individual colors have an alpha channel (i.e. RGBA / ARGB) to get the actual opacity for that specific pixel. – Haapavuo Jul 02 '22 at 11:12
  • good to note that opacity ranges from 0-1 in the context of this formula. red, green blue can be any range that you wish. – user13947194 Sep 27 '22 at 01:57
6

The following javascript gives a method that can be used to calculate the opacity color value manually:

    function calculateTransparentColor(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
        let foregroundRGB = colorHexToRGB(foregroundColor);
        let backgroundRGB = colorHexToRGB(backgroundColor);
        let finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity);
        let finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity);
        let finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity);
        return colorRGBToHex(finalRed, finalGreen, finalBlue);
    }

    var COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/;
    function colorHexToRGB(htmlColor) {
         
        let arrRGB = htmlColor.match(COLOR_REGEX);
        if (arrRGB == null) {
            alert("Invalid color passed, the color should be in the html format. Example: #ff0033");
        }
        let red = parseInt(arrRGB[1], 16);
        let green = parseInt(arrRGB[2], 16);
        let blue = parseInt(arrRGB[3], 16);
        return {"r":red, "g":green, "b":blue};
    }

    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.");
        }

        let hexRed = formatHex(red.toString(16));
        let hexGreen = formatHex(green.toString(16));
        let hexBlue = formatHex(blue.toString(16));

        return "#" + hexRed + hexGreen + hexBlue;
    }

    function formatHex(value) {
        value = value + "";
        if (value.length == 1) {
            return "0" + value;
        }
        return value;
    }

    // Now we test it!
    let theColor = calculateTransparentColor('#ff0000', '#00ff00', 0.5)
    console.log("The color #ff0000 on a background of #00ff00 with 50% opacity produces: " + theColor);
Ryan Shillington
  • 23,006
  • 14
  • 93
  • 108
Basil Musa
  • 8,198
  • 6
  • 64
  • 63
  • Thanks! http://jsbin.com/OxEPEqo/2/edit -- I needed the opposite, which is the 2nd set of inputs. – Langdon Aug 28 '13 at 20:02
  • The `caculateTransparentColor` method appears to have foreground and background flipped. It's `foreground * opacity`, not `foreground * (1 - opacity)`. Submitted edit. – Brian Jordan May 05 '14 at 19:06
3

Formula for Result of mixing two transparent pixels:

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

C2=[R2,G2,B2] is the background pixel color.

p1 is the opacity percentage of the foreground pixel.

p2 is the opacity percentage 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 test and enjoy it!

joseantgv
  • 1,943
  • 1
  • 26
  • 34
Majid Parbaleh
  • 41
  • 2