Why does the picker warn me the pixel is transparent when I click on my PNG logo?

What is going on inside a transparent PNG

Every pixel in a transparent PNG holds four values: red, green and blue, plus a fourth called alpha that sets opacity from 0 to 255. The white or checkered area you see around the logo in a preview is not a real color; it is where alpha is zero. Click there and the tool reads whatever RGB numbers happen to be stored, numbers with no visual meaning, so it tells you the pixel is fully transparent and the values do not describe a visible color.

Two different messages, and what each means

• Fully transparent: alpha is 0, opacity 0%. You are on the background and the values are no use for anything.
• Semi-transparent with a percentage: the pixel is partly visible. Alpha 128 means 50% opacity, alpha 200 means 78%. These are the soft edge pixels that let the logo blend onto any background.
• No warning: alpha 255, opacity 100%. Here the values are the logo's real color.

For a semi-transparent pixel the tool shows the pixel's color without its transparency. Because of how the browser's Canvas stores transparency, the RGB values there can be off by a level or two from the original file. So never take your brand color from an edge.

Getting to a safe pixel

1. Open the logo in the Image color picker and click the shape whose color you want.
2. If a warning appears, look at the magnifier: it shows 11 × 11 pixels around the marker, and transparent pixels show up empty or faint.
3. Move the marker inward with the arrow keys, one pixel per press, until the warning disappears.
4. Go two or three pixels further to clear the edge completely, then copy the value.

A special case: a logo that is all semi-transparent

Some marks are designed with deliberate transparency, such as a watermark at 40% opacity. The warning will not go away however far in you move, because every pixel of the shape is semi-transparent. The value you see is the shape's color before transparency is applied, which is usually what you need to redraw the mark, with the small drift mentioned above. If you want the color as it appears on white, open a copy of the logo saved on a white background and pick from that.

Why a strange color sometimes shows in the transparent area

In the transparent background you may read black, the logo's own color, or something random. That is whatever the design app left in the invisible pixels, and nobody ever sees it. Ignore it; that is exactly what the warning is for.