Overview
Introduction
This tool samples the exact color of a single pixel in an uploaded icon, entirely in your browser, reporting its RGBA values and hex code.
It's the same pixel-sampling operation used by the site's general PNG color picker, applied here to icon-sized assets.
What Is Icon Color Picker?
A client-side icon color sampler that reads an uploaded icon's pixel data and returns the exact red, green, blue, and alpha values at a given X, Y coordinate.
It's useful for grabbing a precise hex code to reuse elsewhere, or for verifying exactly what color and transparency an icon uses at a specific spot.
How Icon Color Picker Works
After decoding the uploaded icon onto an off-screen canvas, the tool indexes directly into the resulting pixel buffer at the requested X, Y position and reads its four RGBA byte values.
Those values are then formatted both as individual 0-255 channel numbers and as a combined 6-digit hex string for the RGB portion.
When To Use Icon Color Picker
Use it to grab the exact hex code of a color used in an icon, for example to match a brand color elsewhere in a design.
It's also useful for debugging — confirming exactly what alpha value a supposedly-transparent pixel actually has.
Often used alongside Icon Colors Separator and Icon Outline Adder.
Features
Advantages
- Runs entirely client-side; the uploaded icon is never sent to a server.
- Reads the exact underlying pixel data rather than an approximated on-screen color.
- Reports both hex and individual RGBA channel values in one result.
Limitations
- It samples a single exact pixel; it doesn't average nearby pixels the way some eyedropper tools do.
- You need to know or guess the approximate coordinates first — there's no visual click-to-pick interface, only numeric input.
Examples
Best Practices & Notes
Best Practices
- Zoom into the icon in an image editor first to identify the approximate pixel coordinates you want to sample.
- Use this alongside the Icon Colors Separator to first confirm a color's exact hex before isolating it.
Developer Notes
The pure pixel-read logic lives in a lib function that thinly re-exports the shared single-pixel sampler (also used by the general-purpose PNG color picker) under this icon-specific name, since an icon is just a PNG once uploaded and the underlying pixel-buffer indexing is identical.
Icon Color Picker Use Cases
- Matching an icon's exact color elsewhere in a design system
- Verifying the transparency level of a specific pixel
- Debugging unexpected color artifacts in an exported icon
Common Mistakes
- Confusing image coordinates (top-left origin) with a design tool's coordinate system, which may use a different origin.
- Assuming a visually 'white' area is fully opaque without checking — it might be a semi-transparent light color.
Tips
- Use your image editor's pixel-coordinate readout to find the exact X, Y before sampling here.
- Sample a few nearby pixels if you're not sure whether you've hit an anti-aliased edge rather than the intended solid color.