0

For a JavaScript program I am making, I need to find the alpha value of an overlay layer (#7F7F7F) on top of a color (For example, #4A6CD4), which then had created an output color (For example, #6380DA). So it would look like this:

From top to bottom:
#7F7F7F (The alpha is unknown)
#4A6CD4

Which will output #6380DA. All I need to know is the alpha value of the overlay and how to find it. Can someone please help me?

J. Doe
  • 1

2 Answers2

0

If the alpha of the bottom layer is 1 then you can calculate the alpha value easily like this:

var top = 0x7F7F7F;
var bottom = 0x4A6CD4;
var actual = 0x6380DA;
var alpha = (actual - bottom)/(top-bottom);
console.log(alpha);
Stefan Berger
  • 423
  • 6
  • 11
  • When I calculate it (the variable 'top' is already used, so I used topLayer), I get a result, but if I set the top layer to the color black, I get a negative alpha value. – J. Doe Apr 22 '16 at 14:53
  • Just change minus to plus with an if alpha < 0. – Stefan Berger Apr 23 '16 at 06:35
0

The "official" blending formula should be

resulting color = alpha * overlay color + (1 - alpha) * background color

The equation has to be calculated for each channel (Red, Green and Blue, each represented by two digits of the color Code in hexadecimal representation)

You can solve this for alpha (or use Excel and solve it numerically)

The formula does not match with the example values you have given, though - are that actual values or some random example?

Charlie
  • 21
  • 3
  • All the values are actual except for the overlay, which will be either (#FFFFFF) or (#000000) – J. Doe Apr 22 '16 at 14:57