Extract a Color Palette From an Image — HEX and RGB From Any Photo
Drop in a photo, screenshot, logo, or artwork and pull out its dominant colors as HEX and RGB values. Choose how many colors you want (3–15), click any swatch to copy it, and export the whole set as JSON. Runs in your browser — the image is never uploaded.
Source image
Drag and drop an image here, or
JPG · PNG · GIF · WebP — nothing is uploaded
Settings
Quality sets how many pixels are sampled. High reads roughly three times as many as Low, which matters on large photos with small patches of important color.
What This Tool Does
This tool reads an image you supply and reports the colors that occupy the most of it, as HEX and RGB values you can paste straight into CSS, a design file, or a brand document. It is a color extractor, not a color-theory generator: it does not invent a scheme from a base hue, and it does not ask you to pick "complementary" or "triadic". You give it a picture, it tells you what colors are actually in it.
That distinction matters for what it is good at. Pulling a brand palette off a logo someone emailed you as a JPEG, matching a UI to a hero photograph, sampling a competitor's screenshot, recovering the colors from an old design when the source file is long gone, or building a moodboard palette from a reference photo — all of those are "read the colors out of this image" jobs, and that is exactly the job here.
Everything happens in your browser. The file is read with the FileReader API, drawn to a canvas, and analysed with the Color Thief library using median-cut quantisation. The image is never sent anywhere. The page loads an analysis library from a CDN and may load other resources, analytics, and ads; the tool does not include your image in those requests.
What the Two Settings Actually Change
Number of colors (3–15). This is how many clusters the quantiser is asked to reduce the image to. It is not "the 5 best colors" — it is the whole image divided into n buckets, with one representative color returned per bucket. Ask for 3 and you get broad averages, often muddy. Ask for 15 on a photo with a narrow color range and several swatches will come back nearly identical. For most images 5–8 is the useful range; 8 is the default here for that reason.
Sampling quality (High / Medium / Low). This is a pixel stride, not a rendering setting. Low samples roughly every 30th pixel, Medium every 20th, High every 10th. Nothing about the output resolution changes — only how much of the image the quantiser looks at before deciding. On a large photo where an important color occupies a small area (a red logo on a grey building, say), Low can miss it entirely and High will find it. On a flat graphic with six solid fills, all three settings give the same answer, so use Low and get it instantly.
A practical rule: start on Medium. If a color you can plainly see in the image is missing from the results, switch to High before you conclude the tool is wrong.
Getting a Usable Palette Out of a Photograph
Crop before you extract. This is the single biggest improvement available. A portrait against a grey wall is mostly grey wall — the quantiser will faithfully report that. Crop to the part of the image you actually care about, then extract. Any image editor will do; you only need the crop, not an edit.
Expect the extremes to dominate. Large areas of sky, snow, shadow, or white background will claim swatches because they genuinely occupy the most pixels. That is correct behaviour and usually not what you want in a UI palette. Either crop them out or simply ignore those swatches in the result.
Use the original file where you have one. JPEG compression shifts hues slightly, most visibly at edges between contrasting colors. Extracting a brand color from a JPEG screenshot of a logo will land close to the real value but rarely exactly on it. If the PNG, SVG, or brand guideline exists, trust that instead — this tool is for when it doesn't.
Extracted is not the same as accessible. Nothing about dominance in a photo implies two colors are readable together. Before you commit an extracted pair to body text, run it through the Color Contrast Checker — photo-derived palettes fail WCAG contrast constantly, because photographs have no reason to obey a 4.5:1 ratio.
Turning Extracted Colors Into a Working UI Palette
An eight-swatch extraction is raw material, not a design system. The usual way to turn one into something you can build with is to assign roles rather than keep all eight:
Primary — the most saturated mid-tone in the set. This carries buttons, links, and brand moments. Avoid the very darkest and very lightest swatches for this; they have nowhere to go on hover.
Secondary / accent — a second saturated color far enough from the primary in hue to read as a deliberate choice. If the extraction gives you nothing suitable, take the primary and shift the hue rather than forcing an unrelated swatch.
Neutrals — the near-greys, off-whites, and desaturated tones. These do most of the actual work in an interface: backgrounds, borders, dividers, disabled states. A photo-derived neutral (a warm grey pulled from a wooden surface, for instance) is far more interesting than #f5f5f5 and costs nothing.
Text — almost never comes from the extraction. Take the darkest neutral and push it darker until it clears 4.5:1 against your background. Readability wins over palette purity here every time.
Five roles from eight swatches, with two or three discarded, is a normal outcome. Once you have the roles, CSS Gradient Generator is useful for blending the primary and accent into backgrounds, and Color Picker for hand-tuning any value into HSL before you commit it.
Step-by-Step
Drop in your image
Drag a file onto the upload box or click Choose file. JPG, PNG, GIF, and WebP all work. Crop first if the subject is a small part of the frame.
Set how many colors you want
The slider runs 3 to 15. Start at 8, then narrow once you can see what the image actually contains.
Extract
The palette appears automatically once the image loads. Change a setting and click Extract palette to re-run it.
Copy what you need
Click a swatch to copy its HEX code. Each swatch also shows its RGB triplet if you need that form.
Export the set
Export JSON downloads every color as HEX and RGB with a timestamp — easy to paste into a config file or a design token list.
What This Tool Will and Won't Do
Will: read 3–15 dominant colors out of any JPG, PNG, GIF, or WebP; report each as HEX and RGB; copy a single value to your clipboard on click; export the whole set as JSON; and do all of it without the image leaving your device.
Won't: build a scheme from a base color you type in. There is no complementary / analogous / triadic mode here, because this tool works from an image rather than from the color wheel. If you want to sample and adjust a single color by hand, the Color Picker is the right tool.
Won't: tell you whether the palette is accessible. Contrast is a separate question with a definite answer — check pairs in the Color Contrast Checker before shipping them as text colors.
Won't: export to .ase, .aco, or a Sketch/Figma palette file. Export is plain JSON, on the assumption that you are pasting HEX values into code or a design tool rather than importing a swatch library.
Won't: recover exact brand values from a lossy screenshot. Compression moves colors by small amounts; the result is close, not authoritative.
Features
Any Common Format
JPG, PNG, GIF, and WebP, by drag-drop or file picker.
3–15 Colors
Choose the palette size; re-run instantly as you change it.
Sampling Control
Three stride settings to trade speed against catching small color areas.
HEX and RGB
Both forms on every swatch; click to copy the HEX.
JSON Export
Download the full set with a timestamp for your config or tokens.
Runs Locally
Your image is read in the browser and never uploaded.
Frequently Asked Questions
How do I get the HEX codes out of a photo?
Is my image uploaded to a server?
Why are two of my swatches almost the same color?
Can I generate a complementary or triadic scheme here?
Can I use the extracted colors commercially?
What format does the export use?
.aco and .ase respectively.