adobe photoshop - 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 been flattened. So I can't go and pickup the original color hex and the % of transparency that that box has.

The transparency, when you've got the original color hex, can be approximated easily (just put it next to the box, and change the transparency util it fits). That technique doesnt quite work for the hex.

So do you have a quick technique to find out the original hex of a semi transparent element when you cant just put the opacity at 100 and get the original hex?

Answer

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.