Extract Colors from Image — Palette & Click Pick
Click the image to average a small region around that point (about 7×7 source pixels).
Get dominant colors and a full palette from any photo — or use the built-in image color picker to click a region. Steps: choose an image, set color count (2–12), extract, copy HEX/RGB/HSL, or click the preview for a local average. Example: six swatches from a brand photo, then click a logo spot for an exact accent — files stay on your device.
How it works
Choose a photo and extract a palette: the page shrinks a working copy (longest edge about 256 px), skips nearly transparent pixels, groups colors, and sorts by how often they appear. Separately, click the preview to average a small square around that point in full resolution and copy HEX, RGB, or HSL — nothing is uploaded.
Rules you should expect
Palette extraction and click-to-pick share one image but answer different questions. Use the checklist when a color looks unexpected.
- Palette sampling uses a downscaled bitmap (max edge ~256 px) so large photos stay responsive. Fine detail may merge into nearby hues.
- Pixels with alpha under 128 are ignored for the palette and for click averages. Fully transparent spots show a clear message.
- You request 2–12 palette colors; median-cut may return fewer on flat images. Colors are ordered by sample share.
- Click pick averages opaque pixels in about a 7×7 window around the click in source coordinates (not the scaled preview alone). It is a region sample, not a single-pixel lab eyedropper.
- Privacy: decode, palette math, and click sampling all run locally in this tab.
Example
Load the four-block sample, keep Colors at 6, and extract — teal, amber, green, cream, and red appear among the swatches. Then click the red circle: the picked card shows a red HEX from the ~7×7 average around that point, ready to copy.
Good fits
- Brand photos: pull a palette, then click a logo or button for a specific accent.
- UI screenshots: skim the interface palette, then click a chip or icon for the exact region color.
- Gradient ideas: grab two accents from the palette or by clicking, then open the gradient calculator.
Frequently asked questions
Does my image leave the browser?
No. Palette math and click sampling run locally. Check the Network panel — the image is not POSTed.
How are the main colors chosen?
The page shrinks the image, drops low-alpha pixels, splits color space with median-cut, averages each bucket, and sorts by how many samples fell in each bucket.
What happens when I click the image?
The tool maps the click back to source pixels and averages opaque colors in a small square (~7×7). You get HEX/RGB/HSL for that region, separate from the palette list.
Why is a click not a single pixel?
Photos and UI shots are noisy at 1×1. A tiny region average is more stable for CSS accents while still tracking where you clicked.
Are animated GIFs fully analyzed?
Only the first frame is drawn, used for the palette, and available for click picking.
Related tools
Questions or feedback
Something unclear, broken, or missing? Draft a message below — we read every note about these tools.