: How can I find out the exact color of a semi transparent element? I have a blue box, added on an image. I need to integrate it in HTML, but thing is, that blue box, in the PSD, has

@Gloria351

There is no way to extract the transparency and the color separately. What you could do, however, is to fix the transparency at an arbitrary value, say 50%, and then determine the color that would give you the same appearance as the image you have. For this you have to assume that the color of the background remains more or less the same if you go down a few pixels, and that no layer blending mode was used. Unfortunately, the latter assumption turns out to be untrue.

Compare the following two colors sampled from the same column of pixels, for instance:



The blue has R=46,G=80,B=116, while the background is R=116,G=130,B=133. Suppose the opacity expressed as a fraction is p (i.e. it is a number between 0 and 1). Then, you can write down three equations containing the R, G, and B values of the original color:

(1-p)*116 + p*R = 46
(1-p)*130 + p*G = 80
(1-p)*133 + p*B = 116


So there are three equations but four unknowns. That's why you have to fix the transparency. You can see that you can't choose 50%, because in that case R has to be negative, and that is not allowed. (Remember that R, G, and B are integers between 0 and 255). I will use p=0.8, corresponding to 80% opacity. In that case, the color becomes R=29,G=68,B=112, after rounding off the resulting values to the nearest integer.

In your case this doesn't solve the problem. Although the initial colors I sampled from your image now match, the rest of the image doesn't:



This suggests that it's not a simple transparency manipulation, but likely there was a blending mode applied. Perhaps something like overlay. The closest match I got was with hard light.

Vote Up Vote Down