Build a design palette from any photo or screenshot. The image is processed entirely in your browser — drawn to a local canvas, sampled, and never uploaded anywhere. The tool picks a diverse, usable set of colors from the image rather than just the most frequent pixels.
Generated locally in your browser — your colors, settings and code never leave this page.
Provenance: palettes with a story
Palettes extracted from images carry built-in coherence — a photograph’s colors already lived together under one light, one grading, one atmosphere. A brand shoot, a product photo, a landscape that captures the intended mood: each is a palette waiting to be transcribed. The transcription step is where tools differ, and where this one makes two specific promises: the image never leaves your machine, and the output is a usable palette rather than a pixel census.
Local processing, verifiably
The file is read by the browser, decoded to a canvas, and sampled in JavaScript on your device — the page makes no network request with your image, which the browser’s own developer tools can confirm. This is not a courtesy; for unreleased products, client work under NDA, or personal photos, it is the difference between usable and unusable. The promise is printed on the tool itself because image tools should be interrogated about exactly this.
From pixels to palette: the two-stage selection
Stage one quantizes: pixels pool into candidate colors by frequency, with near-identical candidates merged perceptually (ΔE) so JPEG noise and anti-aliased edges do not fragment the count. Stage two diversifies: from the candidates, colors are picked greedily to be both well-represented and mutually distant — the score balances coverage against ΔE distance from everything already picked. The result favors “the image’s five distinct voices” over “the largest area five times”.
Image palettes are a starting eleven, not a final squad
Extracted colors optimize for faithfulness to the image, not for UI duty — expect to adjust lightness before any member carries text or backgrounds. The pipeline: extract here, audit in the Contrast Matrix, tune members in the OKLCH Color Generator, expand keepers with Shades & Tints. And when analysis rather than design is the goal — exact coverage percentages — the Palette Extractor sibling reports the census this tool deliberately edits.
Prompting the extractor with better crops
The tool samples what you give it, which makes cropping a creative control: feed the whole photo and the palette tells the scene’s story; crop to the subject and it tells the subject’s. A product shot’s full frame yields mostly backdrop tones — cropped to the product, the palette becomes merchandising-ready. The same lever works for mood: crop a landscape to its sky for the airy palette, to its shadows for the moody one. Since processing is local and instant, iterating crops costs nothing — treat the crop as the query and the palette as the answer.
How to use the Color Palette From Image
- Drop, choose or paste an image – it is processed locally and never uploaded.
- Set the palette size; the tool picks a diverse, usable set from the image.
- Copy the swatches or export as CSS, SCSS, JSON or tokens.
Frequently asked questions
Is my image really not uploaded anywhere?
Really. The file is read by your browser, drawn to a canvas in memory, and its pixels are sampled with local JavaScript – the network tab will show zero requests. The page even works offline. This is stated on the tool because it is the question everyone should ask of image tools.
How does it choose 5 colors from millions of pixels?
Two stages: a histogram quantizes the image into candidate colors weighted by coverage, then a diversity pass greedily picks colors that are both common and mutually distant in perceptual ΔE – so you get the image's character, not five near-identical variants of its largest area.
Why does my palette ignore a small but important detail color?
Coverage-weighting favors area; a tiny red boat on a vast blue sea may lose. Raise the palette size to give minor colors more slots, or use the Color Palette Extractor which reports coverage percentages so you can fish deeper manually.
What images produce the best design palettes?
Images with intentional art direction – photos with consistent grading, illustrations, interiors. Noisy snapshots yield muddy averages. And palette-from-image is a starting point: expect to tune lightness for contrast duty afterwards.
Does it handle transparency and image orientation?
Transparent pixels are skipped so PNG logos read correctly, and the browser's own decoder applies EXIF orientation before sampling – a sideways phone photo samples right side up.
What file types and sizes work?
PNG, JPEG, WebP, GIF and SVG up to 20 MB. Everything is downscaled internally before sampling – a 4000px photo and its 800px copy give the same palette, so never bother resizing first.
How do I check the extracted palette works for UI?
Straight into the Palette Contrast Matrix for text-pair viability, and the Color Blindness Simulator if the palette will encode meaning. Image palettes are moodboards; those two tools make them shippable.
