Color Palette Extractor
Upload a photo, logo or screenshot and get its dominant colors as a ready-to-use palette — HEX and RGB codes, click-to-copy, and export as CSS variables or JSON.
How to extract colors from an image
Matching a design to a photo, rebuilding a brand palette from a logo, or theming a page around a product shot all start with the same question: which colors is this image actually made of? The extractor answers it in a second — with proper color grouping, not just a few random pixels.
Add your image
Click the upload area or drag in a JPG, PNG or WebP. The analysis runs locally — nothing is uploaded.
Choose the palette size
Pick 3–10 colors. Five is a solid default for a brand palette; more captures finer nuances.
Copy the colors
Click any swatch to copy its HEX code — or export the whole palette as CSS custom properties or JSON.
Real dominant colors, not random pixels
A naive extractor just reads a handful of pixels and often returns near-duplicates or misses an image's character entirely. This tool uses median-cut quantization — the palette-reduction technique from classic image editors: it sorts thousands of sampled pixels into boxes along the color axis with the widest range, splits the boxes repeatedly, and averages each one into a final color. The result is a palette that genuinely represents the image, with distinct tones instead of five shades of the same blue. Sorted from dominant to accent, it maps naturally onto a design system's primary, secondary and accent roles.
Frequently asked questions
How does the color extraction work?
The tool samples the image's pixels and groups them with the median-cut algorithm — the same approach classic image editors use for palette reduction. Each group's average becomes one palette color, so the result reflects the image's real dominant tones.
Is my image uploaded to a server?
No. The image is analyzed locally in your browser with the canvas API. It never leaves your device.
How do I copy a color code?
Click any swatch to copy its HEX code to the clipboard. You can also export the whole palette as CSS custom properties or as JSON with one click.
How many colors can I extract?
Between 3 and 10. Five colors is a good default for a brand palette; more colors capture finer nuances of a photo.