Image Color Picker

How to extract colors from an image

1. 1
   Upload your image
   Drop any PNG, JPG, WebP, GIF, or BMP image onto the upload area, or click to browse. The image is processed locally: nothing is uploaded.
2. 2
   Choose a mode
   Use Palette Extract to automatically find the N most dominant colors in the image. Switch to Eyedropper to hover over the image and click to pick specific pixel colors manually.
3. 3
   Adjust the color count (palette mode)
   Select how many dominant colors to extract: from 5 to 20. The algorithm samples pixels, quantizes them into buckets, and returns the most frequent distinct colors.
4. 4
   Choose a copy format
   Select whether clicking a color copies its HEX, RGB, or HSL value. Use Copy All to copy every color in the palette as a newline-separated list.
5. 5
   Use the colors in your project
   Paste the copied values into your CSS, design tool (Figma, Sketch), or code editor. The color strip at the bottom gives you a quick visual preview of the full palette.

Frequently Asked Questions

How does the palette extraction algorithm work?

The tool draws your image onto an HTML5 Canvas, reads every Nth pixel (sampling for performance), rounds each RGB value to the nearest bucket (quantization), then counts the most frequent buckets. Similar colors that are too close to each other in RGB space are merged so the palette shows genuinely distinct hues rather than subtle duplicates.

Is my image uploaded to any server?

No. All processing uses the HTML5 Canvas API and runs entirely in your browser. Your image never leaves your device.

What is the eyedropper mode?

Eyedropper mode lets you hover over any point on the uploaded image and see the exact RGB/hex color of the pixel under your cursor in real time. Click anywhere to add that color to your picked list.

What formats can I copy colors in?

HEX (#rrggbb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)). Select your preferred format using the Copy As toggle and every click will copy in that format.

Why does the palette not perfectly match every color in my image?

Palette extraction finds the most statistically dominant colors after quantization and deduplication. Very similar shades are merged into one representative color. For exact colors at specific points, use Eyedropper mode instead.

Can I extract more than 20 colors?

The current maximum is 20. For most design and branding use cases, 8-12 dominant colors is the practical limit: beyond that, colors become increasingly similar and less useful as a palette.

What image formats are supported?

Any format the browser can render natively: PNG, JPEG, WebP, GIF, BMP, and SVG. AVIF and HEIC are supported if the browser supports them.

Can I use this to extract brand colors from a logo?

Yes. Upload the logo as a PNG (with transparent background for best results). The palette extractor skips transparent pixels, so it will return only the actual colors used in the logo artwork.

How accurate is the HEX code from the eyedropper?

The eyedropper reads the exact pixel data from the Canvas after the image has been drawn at the display scale. It is as accurate as the browser's canvas rendering, which is typically exact for non-JPG sources. JPEG compression introduces minor color artifacts, so the picked color may differ very slightly from the original image file.