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

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?

-
See also graphicdesign.stackexchange.com/questions/2204/… for the other way around – koiyu Jul 7 '11 at 13:31
I am a little confused by your wording: you want to a `gray` which is closest in tone to the color specified, correct? – horatio Jul 7 '11 at 13:56

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.

-

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.)

-
That is some seriously sexy geekage right there. 8) – Lauren Ipsum Jul 8 '11 at 1:16
Why, thank you! <adjusts pocket protector, makes sure pens are evenly spaced> – Alan Gilbertson Jul 8 '11 at 4:26

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.

-
You're right, but there's a much geekier way to do it. 8-D – Alan Gilbertson Jul 7 '11 at 19:56

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.
-