Palette From Image
Drop a logo, a moodboard, or any photo — pull six dominant colors as hex codes ready to paste into your design system. Click any swatch to copy.
Why extract a palette from an image?
- Bootstrapping a brand-system palette from a logo PNG before the formal token work begins.
- Sampling colors from a moodboard or reference photo to anchor a new product launch.
- Pulling a hero image's dominant tones to derive a complementary CTA or accent color.
- Extracting colors from a competitor's marketing screenshot to discuss positioning in a design review.
- Building a generative-art seed: feed a photo, get six colors, use them as the palette for a procedural composition.
- Auditing whether a site's hero image clashes with the surrounding UI by comparing its dominant colors to your existing palette.
How it works
The image is loaded into a hidden canvas and downsampled to fit within a 200px box — clustering 40,000 pixels is enough to find the dominant colors and orders of magnitude faster than working on a full-resolution photo. Pixels with alpha below 50% are dropped. The remaining RGB triples are fed into a k-means clustering run with k-means++ seeding (which spreads initial centers across the color space rather than picking randomly), iterated up to 12 times or until clusters stabilize. The resulting six clusters are sorted by population so the most dominant color appears first. Everything — the image read, the canvas decode, the clustering — runs in your browser.
Frequently asked questions
Are my images uploaded?
No. The file is read into a FileReader, decoded into an Image, drawn to an in-memory canvas, and clustered — all within this page's JavaScript context. The image never crosses the network.
Why six colors?
Six is enough to capture the structure of most images (background, primary subject, accents, shadows, highlights) without dilution. More colors split clusters that should logically merge; fewer hide important secondary tones. We may add a slider later.
What image formats work?
Anything the browser can decode — PNG, JPG, WebP, GIF (first frame), and SVG. The canvas API is the underlying decoder, so you get the same compatibility as <img> tags.
Why do the colors look slightly different than I expected?
K-means averages every pixel in a cluster, so a near-uniform region of light blue becomes its mean light blue. If your image has a strong gradient or noisy compression, the cluster centers are pulled toward the average rather than any single 'true' color. For pixel-perfect logo extraction, use a clean source rather than a JPG screenshot.
Can I copy a swatch?
Yes — click any swatch and the hex value is copied to your clipboard. The swatch flashes briefly to confirm. Some browsers block clipboard access on non-HTTPS pages; if nothing happens, copy the visible hex manually.
About this tool
Pulling a palette out of an image is a clustering problem. Every pixel is a point in a 3D color space (R, G, B), and the dominant colors are the centers of the densest clusters. K-means is the workhorse for this — pick k centers, assign every pixel to its closest, recompute the centers as cluster averages, repeat until nothing moves. The catch is that random initial centers can converge to bad local minima (two centers close together while a whole region of the color space is uncovered). K-means++ fixes that by spreading initial centers proportional to squared distance from existing ones — a standard trick that makes clustering both faster and more reliable. Six iterations is usually enough to converge on a real photo; we cap at 12 for safety.