How do you calculate overlapping rgba values?

Question

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?

Answer 1

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.

Answer 2

A transparency (alpha) value of 0 for the border-color will make it match the background-color. See: http://en.wikipedia.org/wiki/RGBA_color_space

.example {
    display: inline-block;
    padding: 50px;
    background: rgba(0, 0, 0, 0.5);
    border: 25px solid rgba(0, 0, 0, 0);
}

Fiddle: http://jsfiddle.net/BBdB3/2/