Image Color Picker

How to Use the Image Color Picker

1. Upload an image - drag a file onto the dropzone or click to choose. JPEG, PNG, WebP, GIF, AVIF, and BMP all work; any format your browser can display is accepted.
2. Move the cursor over the image to see the live color readout update pixel by pixel.
3. Click a spot to lock that color and add it to the history panel. The detail panel shows HEX, RGB, and HSL.
4. Click any row in the detail panel (HEX, RGB, or HSL) to copy it to your clipboard. Click a history swatch to copy its HEX value directly.
5. Continue clicking to build a palette of up to 20 sampled points; oldest entries roll off when the history fills.

How the Eyedropper Reads Pixels

When you upload an image the tool draws it into an off-screen HTML <canvas> element at the image\'s natural dimensions. Moving the cursor over the displayed image calculates the corresponding canvas coordinate (using the current DOM size vs. the natural size ratio) and calls CanvasRenderingContext2D.getImageData(x, y, 1, 1), which returns a four-byte Uint8ClampedArray containing the red, green, blue, and alpha values of that one pixel. Those four bytes are converted to the three display formats: HEX via hex-string formatting, RGB via template literal, HSL via the CSS Color Module Level 4 conversion. Because getImageData reads directly from the decoded pixel buffer, the values are byte-accurate to the source file - no rendering-layer interpolation, no color-profile transformation, no lossy sampling. The only caveat is that the canvas must be "tainted"-free, which it is as long as the image is loaded from a same-origin or CORS-enabled source; the file upload path always satisfies this.

When the Eyedropper Is the Right Tool

• Extracting brand colors from a screenshot of a competitor\'s site when you cannot see the CSS.
• Matching UI colors to a photograph - grabbing the exact teal of an ocean shot or the warm ochre of a sunset for a hero section.
• Building a palette from a mood board: upload the board, click the dominant tones, and export the history as a palette.
• Reverse-engineering a design file when the client handed over a PNG export instead of the editable source.
• Identifying the tint of a print asset - photograph a printed piece, upload, sample the brand color, and convert to CMYK for the next print run.

Pitfalls and Sampling Caveats

First, JPEG compression: 8x8 block quantization can shift a single pixel several units up or down, so sampling one point gives you the compressed value rather than the original color. Sample adjacent pixels and average, or re-acquire in PNG if accuracy matters. Second, sRGB assumption: pixel bytes are interpreted as sRGB. Photographs tagged Display P3 or Adobe RGB have profiles the browser honors at render time but that getImageData does not apply - the raw bytes are stored bytes, not displayed color. Third, animated GIFs and video: the canvas captures the first frame of a GIF, and video sources are not supported. Fourth, retina scaling: the displayed image is scaled to fit the viewport, so a cursor pixel corresponds to multiple source pixels; the tool converts coordinates correctly, but enlarge the image for high-precision sampling.

The Canvas and File API Behind the Tool

The browser\'s File API (W3C File API Recommendation 2022) provides the FileReader and URL.createObjectURL entry points for reading user-selected files without a server round-trip; the uploaded image is loaded into an HTMLImageElement via a blob URL. The Canvas 2D API (HTML Living Standard) handles the raster drawing via drawImage and the pixel read via getImageData. These two APIs together let the whole pipeline run locally: decode the file, draw to a canvas, read the pixel buffer, format the color. No MIME-type upload to an image-processing service, no server-side thumbnailing, no third-party dependency. The Clipboard API (W3C Clipboard API Level 2) handles the copy-to-clipboard action via navigator.clipboard.writeText, which is the modern async permission-gated replacement for the deprecated document.execCommand("copy").

Comparison to Desktop and Browser Eyedroppers

macOS\'s Digital Color Meter and Windows\' PowerToys Color Picker sample any pixel on screen (not just inside a web page), which is more powerful for reverse-engineering desktop apps or comparing colors across multiple windows. Chrome has shipped a native EyeDropper API since version 95 - sites can call new EyeDropper().open() to let the user pick any pixel on the page, which is faster than this tool when the source image is already visible in the browser. Figma and Sketch have built-in eyedroppers that sample inside the document. This tool\'s niche is the upload-an-image path: you have a PNG or JPEG on disk, you want to extract colors from it without installing anything, and you want the HEX, RGB, and HSL representations in one view. Chrome\'s native EyeDropper will eventually supplant some of this, but for non-Chromium browsers and for the explicit upload-and-sample workflow, the canvas-based approach remains the cleanest.