Color calculations: increase alpha but maintain the same color appearance over a white background

Question

General question:

How can I calculate RGB values for a color in a way that if I change the alpha component, the color appears to remain the same over a white background?

Additional question:

How can I do the same but with an non-white background color?

Notes:

1. I am aware of the fact, that this is not possible for all colors. For example the first parameter of rgba(1,0,0,1) can't be increased to compensate an alpha like that rgba(1.1,0,0,0.9)

2. this is trivial for monochrome colors like in this example:

My current use case:

I am working on an iOS app with a slightly transparent status bar / navigation bar. The bar should appear to have the same color as some (opaque) objects in the content view. If I apply the same color, to the bars but with alpha of 95% as to the content, of course the bars appear to be lighter.
I'll also need a solution with css for a similar web app.

Answer 1

So I know this question is now almost a year old, but I had the same problem and found the solution so I thought I'd share it. The term for this is "alpha compositing" and wikipedia has a great article on it.

http://en.wikipedia.org/wiki/Alpha_compositing

In your case you are compositing your color with a fully opaque white rgba(255,255,255,1).

I made an excel calculator to do this. I couldn't figure out how to put the cell values themselves into StackOverflow, so here's a screenshot of the forumulas. Orange cells are for your input.

You can then change A10-A13 to define your initial color and D10 to specify your desired alpha.

Combined known colors           
    Color 1 Color 2 Combined
A   0.15    1   =$B$3+$C$3*(1-$B$3)
R   255 255 =(1/($D$3))*(B4*$B$3+C4*$C$3*(1-$B$3))
G   0   255 =(1/($D$3))*(B5*$B$3+C5*$C$3*(1-$B$3))
B   0   255 =(1/($D$3))*(B6*$B$3+C6*$C$3*(1-$B$3))

1 Known Color, Known result Alpha           
    Color 1 Color 2 Combined
A   0.15    =(D10-B10)/(1-B10)  0.85
R   255 255 =(1/($D$10))*(B11*$B$10+C11*$C$10*(1-$B$10))
G   255 255 =(1/($D$10))*(B12*$B$10+C12*$C$10*(1-$B$10))
B   0   255 =(1/($D$10))*(B13*$B$10+C13*$C$10*(1-$B$10))

Answer 2

Use [UIColor colorWithRed:191.0/255.0 green:127.0/255.0 blue:127.0/255.0 alpha:1.0]

If you want opacity value as 90% set alpha to 0.9

Edit : You cannot get the exact color of another color with opacity, instead it is always good to have the RGB of solid color and add the opacity Value.

Answer 3

Instead of setting the .95 alpha color to emulate the opaque color, maybe you should try doing the reverse and set the opaque color using the view with transparency as your guide.

That way you could combine two views using a CG image context -- one with a solid white background color below one of the .95 alpha background color -- then take the color of a pixel of that resulting view, which you could then set as the color of your opaque views.

Here's a nice answer about how to get the color of a pixel: How to get the color of a pixel in an UIView?

Answer 4

Ok, I have a workaround for my use-case, which I'd like to share.

This is nevertheless not the answer to my original question which is about the mathematical calculation needed to adapt the color.
I'd still be very interested in the 'real' answer!

Anyway, here is my solution:
I am setting the background color property of all my viewController's views to the original color without alpha. I am using a patternImageColor for this with the dimensions 1x2048 px, with its top 64 pixels being in the original bar color and the rest being in the table background color. The original bar color shines through the translucent bar color which results, again in the original color. Content that is scrolled "between" bar an background still shines through the bar.