From a local image file to a usable color value.

The exact local-browser data path

1. You choose a PNG, JPEG, WebP, or GIF with the file control. The browser grants this page access only to that selected file.
2. JavaScript creates a temporary object URL and decodes the file into an in-memory image.
3. The image is resized to a 760-pixel-wide preview and drawn into an HTML canvas in browser memory.
4. A click or tap is translated from the visible preview coordinates to the canvas coordinates. The canvas API reads the red, green, blue, and alpha channels at that point.
5. The picker converts the red, green, and blue channels into HEX, RGB, and HSL text. Copy buttons write only the chosen text value to your clipboard when you press them.

The selected file and its pixels are not posted to an upload endpoint by this tool. Reloading or closing the page clears the working canvas and palette.

One pixel is different from a dominant palette

Pixel sampling reads one location after the preview has been drawn. Use it when you need the displayed color under a cursor—for example, a button background or a flat logo area. The result is a direct RGB reading from that preview pixel.

Dominant palette extraction scans the preview at regular intervals for speed. It groups nearby RGB values into coarse buckets, counts those buckets, and displays the six most frequent groups. This is a visual summary, so it can favor large backgrounds and combine subtly different shades. It is not a list of every color and is not a forensic measurement.

Worked workflow: screenshot to a CSS token

Input: a 1440 × 900 PNG screenshot containing a solid blue primary button. Actions: choose the PNG, zoom the page if needed, click well inside the button away from text and antialiased edges, then press Copy HEX. Output: a value such as #2563EB, ready to test as a CSS custom property such as --button-primary. Sample a second interior point to confirm the fill is uniform.

Worked workflow: product photo to campaign accents

Input: a 2400 × 1600 JPEG product photo with a cream wall, green packaging, and warm shadows. Actions: load the photo and inspect the six dominant swatches; click the packaging for an exact displayed green and the wall for a neutral. Output: one picked green in HEX/RGB/HSL plus an approximate palette weighted toward the large cream background. Treat the palette as a shortlist, then check the chosen foreground/background pair in a contrast checker.

Worked workflow: logo export verification

Input: a transparent 1024 × 1024 PNG logo expected to contain #5B4BFF. Actions: choose the PNG and click several points in the solid mark, avoiding its translucent or smoothed boundary. Output: matching interior readings support that the raster export uses the expected displayed RGB value; different edge readings reveal antialiasing rather than a second brand color.

Worked workflow: moodboard cleanup

Input: a JPEG moodboard combining four photographs and two interface references. Actions: load it, use the dominant palette to identify repeated families, then click the specific regions you intend to reuse. Output: a short candidate palette and exact displayed samples for a prototype. Remove muddy shadow buckets before turning candidates into design tokens.

Limitations to account for

• Compression: JPEG artifacts create neighboring pixel values around edges and texture. Pick inside a flat area and compare more than one point.
• Transparency: a PNG can contain partially transparent pixels. The tool reports RGB/HSL from the decoded preview but does not currently display alpha, so edge colors may not predict how the asset looks on another background.
• Color profiles: browsers may color-manage tagged images when drawing them. A displayed canvas value can differ from raw file-channel values or from another application’s color-management pipeline.
• Resizing: the preview is scaled to 760 pixels wide. Interpolation can blend neighboring source pixels, especially in fine lines and small text.
• Contrast: extracting a color does not prove that it is readable. Verify text and interface-state combinations with an appropriate WCAG contrast checker.

Troubleshooting

The image does not open: export it as PNG, JPEG, or WebP and try again; a file extension alone does not guarantee the browser can decode the contents. The value changes near an edge: that is usually antialiasing, scaling, transparency, or JPEG noise—sample farther inside the shape. The palette misses a small accent: dominant colors are frequency-based, so click the accent directly. Copy does not work: clipboard permission or an insecure browsing context may block it; the value remains visible for manual selection.

Privacy and the network boundary

The image workflow stays within the page’s browser memory: this tool has no image-upload request or account system. Opening the site still makes ordinary network requests for the HTML, stylesheet, script, icons, and externally hosted font files. No advertising or traffic-measurement runtime is currently loaded. See the privacy policy for what is and is not stored.

Pick a color from your image

Return to the tool with a supported image, click a meaningful region, and compare the exact pixel with the broader palette.