Image Color Extractor
Extract dominant colors from any image. Upload, paste, or drag an image to generate a color palette.
Frequently Asked Questions
How does image color extraction work?
This tool uses median-cut color quantization: it divides the image's pixel data into groups by splitting along the color channel with the widest range, then averages each group to find dominant colors. This is the same approach used by many design tools. Tip: images with distinct color areas give the best results.
Is my image uploaded to a server?
No. All processing happens entirely in your browser using the Canvas API. Your image never leaves your device — no data is sent to any server. This makes the tool fast, private, and works offline.
How many colors should I extract?
For a typical color palette, 5–6 colors work well — you'll get the key tones without too much noise. Use 2–3 for minimal designs or to find the main brand colors. Use 8–12 for detailed analysis of complex images. Tip: start with 6 and adjust based on the image complexity.
Can I move the color pins on the image?
Yes! Each extracted color is shown as a numbered pin on the image. You can drag any pin to a new position and the color will automatically update to match the pixels at that location. This lets you precisely pick colors from specific areas of the image.
How do I get the best results?
Use images with clear, distinct color areas — photos, illustrations, or brand assets work great. Very dark or very light images may produce less interesting palettes. Tip: crop the image to the area of interest before uploading to focus the extraction on the colors you care about.
Can I use the extracted palette in my design tool or code?
Yes. Each extracted color shows HEX, RGB, and HSL values you can click to copy. Use the 'Copy CSS Variables' button to get a ready-to-paste :root declaration, or 'Copy JSON' for an array of hex values. You can paste these directly into Figma, Tailwind config, or any design system.