Calculating opacity value mathematically

colors opacity equation mathematical-expressions
spider picture spider · Jan 5, 2012 · Viewed 14.6k times · Source

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?

Answer

ipavlic picture ipavlic · Jan 5, 2012

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.

Related questions

Opaque white background with rgba displays grey over white background?

I added a transparent background on a div, over a white background with like that: body { background: white; } .opaque-white { background: rgba(255,255,255,0.95); height: 300px; width: 300px; } <body> <div class="opaque-white"> Area with opaque (opacity: 0.95) background. </div&…

Read More
How to fill a flot line graph without opacity?

How can i fill a flot line graph with no opacity? lines: { show: true, fill: true, lineWidth:1 }

Read More
Flutter: Best way to change a widget opacity and color on scroll

My goal is to change the color and the opacity of the appbar when user scrolls down. My logic is: scroll offset = 0 : appbar is red with opacity = 1 0 < scroll offset < 40 : appbar is blue with opacity = 0.4 40 <= scroll offset : appbar …

Read More