Palette Extractor
Extract dominant colors from any image
Drop an image to extract colors
IMAGE · up to 20.0 MB
How to use Palette Extractor
- Drop an image into the upload zone.
- Choose how many colors you want (3-12) — 5-8 usually gives the best balance.
- Click any color swatch to copy its hex, RGB, or HSL value.
- Export as CSS variables, Tailwind config, or a PNG palette strip.
How is a palette extracted?
The tool uses k-means clustering — a classic algorithm in color quantization. Pixels from your image are treated as points in 3D RGB space, and the algorithm finds the cluster centers that best represent groups of similar colors. Each centroid becomes a swatch in the final palette.
For speed, the image is downscaled before sampling. The largest cluster — meaning the color that takes up the most screen real estate — is shown first. This is why photos typically produce a palette that matches your visual impression of the image.
This approach is pure math with no AI involved. The same image always yields similar results, though the exact values can vary slightly between runs due to random initialization.
Frequently Asked Questions
How does palette extraction work?
The tool samples pixels from your image and groups similar colors using k-means clustering. This finds the dominant colors mathematically — no AI needed. The number of colors shown equals the cluster count you choose.
Why do the colors differ slightly from what I see?
The algorithm chooses cluster centroids that best represent groups of similar pixels. These are approximations — the exact pixel colors vary, but the centroids capture the visual essence.
What image formats are supported?
JPG, PNG, WebP, and any format your browser can display. Extraction works on the rendered pixels, not the file format.
Is my image uploaded?
No. Everything happens in your browser using the Canvas API.