Image Color Picker
Extract dominant colors from any uploaded image.
About the Image Color Picker
The Image Color Picker loads an image into the browser and lets you click any pixel to read its color. The sample size option averages a 1x1, 3x3, 5x5, or 11x11 neighborhood around the click point — useful for smoothing JPEG artifacts and noise in photographs.
The image never leaves your browser. The tool uses the HTML5 FileReader API to read the file as a data URL, draws it onto an offscreen <canvas> element, and samples the canvas’s pixel buffer via getImageData(). No upload, no server round-trip, no privacy concern. This is critical for designers sampling colors from client-confidential brand assets or personal photographs.
The canvas ImageData API returns four bytes per pixel: red, green, blue, alpha. The alpha channel is ignored for color sampling, but you can extend the tool to extract the alpha for PNG logos with transparency. The bytes are in sRGB (the canvas default), matching what every other color tool on the site expects.
Common use cases include extracting a brand color from a logo PNG, sampling the dominant color of a product photograph, building a color palette from a mood board, and reverse-engineering the color scheme of a competitor’s screenshot for design research.
How It Works
The tool reads the file via FileReader.readAsDataURL(file), which returns a base64-encoded data URL. This URL is loaded into an Image object, which decodes the image bytes. The decoded image is then drawn to a canvas via ctx.drawImage(img, 0, 0, width, height), with the width capped at 600 pixels to keep memory usage reasonable for large source images.
When the user clicks on the displayed image, the tool calculates the actual pixel coordinate by scaling the click position back to the source image’s native resolution: x = (clickX - rect.left) * (img.width / rect.width). This handles CSS-scaled displays correctly — if the image is rendered at 50% zoom, clicking at the visual center samples the source-image center.
For sample sizes larger than 1x1, the tool iterates over a square neighborhood around the click point, summing the red, green, and blue channels, and divides by the count of valid pixels. Edge pixels (where the neighborhood extends outside the image) are excluded from the average. The result is the mean color of the sampled region.
The color is then formatted as HEX (for pasting into CSS), RGB (for canvas APIs), and HSL (for design tools). The HSL conversion uses the W3C RGB-to-HSL algorithm — the same one used by the HEX to RGB tool.
Worked Examples
Loading a logo PNG and clicking the brand mark with a 1x1 sample size returns the exact pixel color — ideal for matching a brand guideline exactly. A 3x3 sample averages out the slight color variation that anti-aliasing produces at logo edges.
Loading a photograph of a sunset and clicking the sky with an 11x11 sample size returns a representative sky color, smoothing out the noise that JPEG compression introduces in flat-color regions like skies and walls.
Sampling a color from a screenshot of a competitor’s website: load the screenshot, click the header background, and copy the resulting hex into your own design. This is the standard workflow for ‘inspiration’ color research, though of course direct copying of protected brand assets may infringe trademark.
Extracting a color palette from a mood-board image: click 5-7 different regions of the image to build a palette. Use the Color Palette Generator to expand each sampled color into a full 5-shade scale.
When to Use This Tool
- Extracting brand colors from a logo PNG when the brand guidelines are not available.
- Sampling the dominant color of a product photograph for use in a matching button or background.
- Building a color palette from a mood board for a design pitch.
- Determining the foreground/background colors of a screenshot to plan a redesign.
- Reverse-engineering a competitor’s color scheme for design research (subject to trademark law).
- Extracting colors from a client-supplied photograph to populate a design system.
- Verifying that a PNG’s transparent pixels actually have zero alpha (useful for debugging icon exports).
Limitations & Disclaimer
The image is processed entirely in the browser via the HTML5 FileReader and canvas APIs; no upload occurs. The canvas operates in sRGB — wide-gamut images (Display P3, Adobe RGB) are converted to sRGB on load, which may lose color information. Sampled colors may not match Photoshop if Photoshop is set to a non-sRGB color profile. The image is downscaled to 600px wide before sampling; for pixel-perfect sampling of larger images, use a dedicated image editor. The 8 MB file size limit prevents accidental loading of very large files. See our disclaimer for full terms.
Frequently Asked Questions
Is my image uploaded to a server?
No. The tool uses the browser’s <code>FileReader</code> API to read the file locally, then draws it onto a <code>canvas</code> element. The image bytes never leave the browser. This is verifiable by opening your browser’s Network tab and confirming that no upload request is made when you load an image.
Why does the sampled color not match what I see in Photoshop?
Canvas operates in sRGB by default; Photoshop may be set to a different color profile (Adobe RGB, ProPhoto). The same pixel can render slightly differently under different profiles. To match: set Photoshop’s working space to sRGB IEC61966-2.1 and disable color management for the document.
What is the sample size for?
JPEG compression and image noise introduce pixel-level variation. A 1x1 sample returns the exact pixel value, but may not represent the region’s dominant color. A 3x3 or 5x5 sample averages 9 or 25 pixels, smoothing out noise. Use 1x1 for vector logos and 5x5 or 11x11 for photographs.
Can I sample multiple colors?
Yes — each click adds a new color card to the output, with the most recent click at the top. Click as many times as you like; the history is preserved until you load a new image or refresh the page.
What image formats are supported?
Any format the browser can render: PNG, JPEG, GIF, WebP, AVIF, BMP, and SVG (rasterized to canvas). For SVGs, the canvas rasterization occurs at the SVG’s intrinsic size or 600px wide if no intrinsic size is set.
Why is there an 8 MB file size limit?
Large images take longer to decode and consume more memory. An 8-megapixel JPEG is typically 2-4 MB; an 8 MB limit accommodates high-resolution photographs while preventing accidental loading of multi-gigabyte PSD or TIFF files. For larger images, downscale them in an image editor first.
Last updated: September 9, 2026 · Author: HT99 Tools Editorial Team