3

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.

Improve this question
3
  • Do you want your solid color of that transparent png (the same color but at 100% density) OR do you want a solid color that equals that transparent PNG? Because if your want #2, then your background is "part" of the color and the color the eyedropper will get you is the background+transparent, which is the "solid" color of your transparent png. Otherwise, ACEkin gave you a good answer that's very quick to apply if you want that color at its 100% density.
    – go-junta
    Nov 17, 2015 at 10:06
  • I need the first one. ACEkin's method will give me the colour value, but not the opacity.
    – Evanss
    Nov 17, 2015 at 14:49
  • You can put a white background underneath, and then use the method I describe as an answer to this question: graphicdesign.stackexchange.com/questions/97138/…
    – sodiumnitrate
    Aug 25, 2017 at 5:25

3 Answers 3

Reset to default
2

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

Improve this answer
3
  • I was really hoping for a programatic solution. Reducing the opacity by eye means I wont get the exact same value.
    – Evanss
    Nov 11, 2015 at 9:19
  • 1
    You can put the original on a separate layer, put color pick points on it and on the group of layers and reduce the opacity until the RGB values match. I think under the circumstances an empirical approach is the only one. Perhaps the challenge is to convert the opacity value of Photoshop to transparency value in CSS, which may need to be empirically determined as well. Color reproduction on the Web is a hit or miss proposition since millions of display devices show potentially millions of different color renderings anyway.
    – user45605
    Nov 11, 2015 at 10:25
  • Very smart trick! @jdln When your opacity is at 100%, it's at 100%, it can't get higher than that... You can't get the wrong value or at least, I don't think there's better ways to get the 100% value! That's a clever way to find the solid color actually. If by programmatic answer you mean a script, maybe you're in the wrong stack or might need to wait until a designer comes up with something that will take you 20 seconds to accomplish instead of 40 seconds.
    – go-junta
    Nov 17, 2015 at 9:58
1

From https://stackoverflow.com/questions/2131949/how-to-find-the-alpha-channel-transparency-value-of-a-pixel-in-a-png-image

In Photoshop's Info panel, you can choose 'Opacity' as a readout mode, though it will show up as a percentage and not as a real alpha value.

To enable it, simply navigate to Window > Info. Access the 'Panel Options...' from the dropdown menu and then set the 'Second Color Readout' mode to 'Opacity':

enter image description here

enter image description here

Improve this answer
0

Rather than trying to calculate the hex values from the PNG, why don't you use the CSS rgba color?

https://developer.mozilla.org/en/docs/Web/CSS/color_value#rgba()

This way, you just reproduce the normal color and apply the transparency in CSS.

Improve this answer
1
  • This is what I want to do. I want to use CSS values but I need to work out what these are from the PNG that I already have.
    – Evanss
    Nov 11, 2015 at 7:33

Your Answer

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

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