How to find the alpha channel transparency value of a pixel in a png image?

Question

I have an image that has alpha channel transparency.

I want to recreate the same background color with RGBA values in CSS but I can not find the real color of the background pixels and their alpha channel value. if I use any sort of color picker it will give me the absolute value of the pixel color which is relevant to its background color.

Do you know any trick to find out the real alpha channel value of a pixel?

Solution 1

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 open the Info window, choose Panel Options and then set the Second Color Readout mode to Opacity.

Solution 2

Using Gimp, you can use the Color picker.

Press shift while clicking on a pixel.
(or tick Use info window in the tool's options)

Once you click on a pixel, the Color Picker Information window will pop up, showing you details including the alpha level:

Solution 3

I found out a way to get the exact alpha value in Photoshop. The other solutions only get the closest integer percentage to the actual alpha.

• Create a black background layer (#000000).
• Duplicate the layer whose alpha you need, because we need to edit it. (Or if you need the composite alpha of several layers, duplicate them and merge them)
• Hide the original layer, so that only the black background and the new duplicate is visible.
• Click the new layer and then click "Lock transparent pixels" (The little checkerboard icon above the layers)
• Fill the layer (Shift+Backspace) with White color.

Now you have a picture containing the alpha values of the original image, in greyscale. Just use the Color Picker to select any pixel in the image, and get the exact alpha value (for example #7f7f7f means an alpha of 0x7f, or 127).

Comments

[Allen Bargi]

This is what I'm doing right now. it's feasible but there should be a better way.

[Scott Rippey]

+1 Thanks, this option is well-hidden. Also note: You can set the "First Color Readout" option to "Web Color", which will give you the RGB in HEX mode. Very useful.

[darrinm]

In CS6 (maybe earlier versions too?) there is a slight shortcut for this. Click the eye-dropper-with-dropdown menu icon in the Info panel and select Opacity straight from the list.

[Adam Patterson]

Thanks! I saw that I could Eye drop the colour, but not the Opacity. I would have been disappointed if I could not.

[Admin]

This gives opacity as a percentage, but that percentage can correspond to 3 different numbers from 0 to 255 after rounding.