Formula for finding out the result of a color after applying x% opacity to it?

Question

I have 2 colors

1. #a1a2a4
2. black (#000000)
3. white (#ffffff)

Now I need to know how much opacity (in a percent) must I apply to the second color (black) against a background of the third color (white) to achieve a color "closest" (as determined by the eye) to the first color (#a1a2a4).

How do I go about doing it?

Answer 1

This case is more or less simple (you're dealing with black and white).

After applying the color (#a1a2a4), check the RGB levels:

You can see it has approximately 162 (average), and knowing that it can go from 0 to 255, you just need to find out the percent:

162 * 100 / 255 = ~63,5%

Now, because RGB works in the opposite way compared to CMYK (in terms of colour mixing, ie full colour mix means white and with CMYK full colour mix means black), the actual percent in this case is the difference between 100% and the value that we got:

100 - 63,5 = 36,5%

So if you apply 36% of opacity, it will have this colour, I just tested it.

Of course in cases with more complex colours, this method doesn't work and I don't know of a way to get the percent, I would do the classic trial and error.

Answer 2

The question, if I understand it right, is "How would you calculate this programmatically?" It's straightforward math to convert your target "color" to an alpha value.

White == [1,1,1] or #ffffff or 255,255,255, depending on your application. Black == [0,0,0], etc.

So: normalize the target value (in this case, it's .6314), subtract from 1, and apply to the black layer as an alpha value. You could do this one channel at a time, and average the results, but why bother, since your color is indistinguishable (to the eye) from a neutral gray #a1a1a1. (Things get more complex if there's a visible hue, since the channels will then have different values, but the same principle applies.)

Answer 3

A slightly faster variant of trial and error:

Create your hex color in Photoshop in a CMYK document and look at the CMYK values. I get 39/32/31/1.

Create two layers, the top black and the bottom white.

Pull up the Info window. Separately, pull up the Layers window.

Play with the opacity of the black layer. Use the eyedropper over your color and check in the info window to see how close you're getting. This mostly saves you the time of change opacity — flatten — check color — undo flatten.

Answer 4

Given your foreground and background colors (uniform values across R, G, and B channels), you cannot achieve a a non-uniform color of #a1a2a4 by changing the opacity because opacity impacts all channels at once. However, you can achieve a "close enough" color of #a1a1a1 by setting the opacity of black to 0.37. Here is the tool that I used:

http://colorizer.org/

1. Click "Background" and set the hex value to #fff
2. Click "Button" and set the hex value to #000
3. Use an eyedropper utility to find the target color on the "Alpha/Opacity" spectrum, then click on the spectrum to get the opacity value.

Answer 5

Finding this formula is a great exercise in linear algebra. Using RGB and linear algebra I came up with this matrix M. If you want to combine RGBred=(237,32,36) and RGBblue=(60,84,165) where the bottom layer is 100% opacity and the top layer is 50% opacity then multiply Mv where M is the matrix below and v=(237,32,36,60,84,165). We get Mv=(157.777,71.444,107.444).

The actual value is (159,71,103) so we're pretty close but there is some error- probably either because I was using rounded values to compute M and/or because perhaps it doesn't use RGB but some other scale to compute transparency flattening. I could probably get a more accurate matrix using a least-squares type approach but I was too lazy.

The matrix M I got is

M=[-0.316438695251802233798084520470 -0.0205011495462359668020633451463 -0.627769626184202308338411657855 
    4.83088877248122926488562947487 -0.673109830626855247075257552051 0.137681159420289855072463768116]
[2.67597831835520455938498494132 0.215715090307662822540065922133 1.69848459052630338054958974280 -13.9750196437925615505500261925 
    3.20021608171817705605028810915 -0.370471014492753623188405797101]
[-6.62632375526968419148486246260 0.509833585674322977062528534400 -3.14436345482363613544439381045 35.0629474419416797625283743688
    -6.69242186135847738781211803779 1.41304347826086956521739130435]