1

enter image description here

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?

2
  • the degree of transparency is the degree of color showing through. Against white transparency is the amount of white, etc. Just sample the color with the eyedropper tool and you're done. Your gradient gives you many options of blue in there though, so keep sampling until its the blue you want.
    – Webster
    Aug 23, 2017 at 20:49
  • @Webster: Please don't put answers in the comments.
    – Vincent
    Aug 25, 2017 at 9:09

1 Answer 1

3

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:

enter image description here

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:

enter image description here

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.