How do you calculate overlapping rgba values?

advertisements

Let's say I have this:

.example { 

  background-color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.5);

}

The background-color and border-color have the same rgba value, but are different colors because the border-color is calculated on top of the background-color.

(simple example: http://jsfiddle.net/BBdB3/)

What transparency value for the border-color would make it match the background-color? What's the math here?

Edit: thanks guys, using rgba(0, 0, 0, 0) or transparency is sufficient for my first example, but I still have a problem. (http://jsfiddle.net/CPK7L/2/). In this case I need to match the border-color of the first element with the border-color of the second element.

So how would I calculate the alpha value for the border of the first element based on the alpha value of the second element?


If you set the borders alpha channel to 0, it'll match the background-color. It's where no modifications are made to the underlying color; it's the transparent mode.

To calculate the sum of the alpha-channels it is basically:

alpha-channel of border * (1 - alpha-channel of background) + alpha-channel of background

So the border has effectively an alpha-channel value of 0.5 * (1 - 0.5) + 0.5 = 0.5 * 0.5 + 0.5 = 0.25 + 0.5 = 0.75.