Advertisement


Find out opacity and color value of a semi transparent PNG?


Question

I have a semi transparent PNG. I want to know the exact hexadecimal and color value so I can create it in my website with CSS. How can I find this out?

I have Photoshop and Fireworks on my computer but I cant just use the eye dropper tool as that will give me the effective colour of the semi transparency over the background.

2015/11/10
1
3
11/10/2015 4:28:00 PM

I am thinking aloud here mainly out of curiosity since I do not have the file you are talking about. Since the PNG has a set opacity all across the image, including the color you are investigating:

  1. Open the PNG file in Photoshop
  2. Put a blank layer under it and add some text on this new layer below the PNG layer, the text should be visible
  3. Target the PNG layer, and press Ctrl-J to create a new copy layer, the text will be less visible now
  4. Repeat the step #3 until you cannot read the text at the bottom

This should produce the "original" color or something close to it. Now

  1. Measure the color with the eyedropper and not the hex value
  2. Put these layers into one group
  3. Lower its opacity until it matches the original PNG file

You can now read the opacity value. I am adding a few images to show the sequence.

enter image description here enter image description here enter image description here enter image description here

2015/11/10
1
11/10/2015 9:09:00 PM