How to find the alpha channel transparency value of a pixel in a png image?
CssImageTransparencyPhotoshopCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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 - Css
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 - Css
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).
Solution 4 - Css
use the absolute colour and adjust the transparency in photoshop until it looks right and then use that percentage as your value.
Solution 5 - Css
use the PS info panel and set second color readout mode to opacity. turn off the visibility of all layers except the layer of the object you are analyzing (background should be transparent checkerboard) -info now gives original rgb value and correct opacity that can be converted into rgba.