Color Palette Extractor: Free Dominant Colors From Photo
Drop in an image and get its dominant colors as a ready-to-use palette with hex and RGB values. Copy any swatch, or export the palette as JSON or a PNG swatch strip.
Drag and drop an image here, or click below to choose one.
What this tool does
This tool analyzes an image and pulls out its dominant colors as a usable palette. Drop in a photo or graphic and it downsamples the image, groups similar pixel colors into buckets, and ranks those buckets by how much of the image they cover. Near-white and near-black are filtered out unless they genuinely dominate the image, so you get the actual color story of a photo instead of a palette full of shadows and highlights. Similar colors are merged so you do not end up with three nearly identical shades of blue taking up slots that could show more of the image's real range. The result is 6 to 8 swatches, each shown with its hex code and RGB values, sorted from most to least dominant. Click any swatch to copy its hex code, or export the whole palette as a JSON file or a downloadable PNG strip of the swatches for quick reference in a design file.
Who it's for
Designers building a color scheme to match a photo, brand or logo, developers who need hex values from a screenshot or reference image for CSS, and anyone putting together a mood board who wants a quick, objective read on what colors actually dominate an image rather than eyeballing it.
How to use it
- Drag an image into the drop zone, or click to choose a file.
- Wait a moment while the image is analyzed and the palette is extracted.
- Review the swatches, ordered from most to least dominant.
- Click any swatch to copy its hex code to your clipboard.
- Use Copy all hex codes to grab the whole list at once.
- Download the palette as JSON for use in code, or as a PNG swatch strip for a design file.
Good to know
The extraction method groups pixels into RGB buckets and averages each group, which is fast and works well for most photos but can occasionally merge two visually distinct colors that happen to fall in the same bucket, or miss a small but important accent color that covers very little of the image. Analysis happens on a downscaled version of the image for speed, so extremely fine color detail is smoothed out. Nothing is uploaded; the image is read and processed entirely in your browser using the canvas API.
Frequently asked questions
How many colors does this tool extract from an image?
Between 6 and 8 dominant colors, depending on how much color variety the image actually has after near-duplicate shades are merged together. A very monochrome image may return fewer distinct swatches than a busy, colorful photo.
Why are pure white and black sometimes missing from the palette even though they appear in the image?
Near-white and near-black pixels are filtered out by default since they usually come from backgrounds, shadows, or blown-out highlights rather than the meaningful colors of the subject. They are only included if they are overwhelmingly dominant, meaning they genuinely make up most of the image.
Is my image uploaded to a server to extract the colors?
No. The entire process runs locally in your browser using the HTML canvas API to read pixel data. Your image is never sent anywhere, which makes this safe to use with unreleased designs or private photos.
What format is the exported palette in?
The JSON export is an array of objects, each with a hex code and an RGB value in the order shown on screen, ready to paste into a design token file or a CSS variables block. The PNG export is a simple horizontal strip of colored rectangles you can drop straight into a design file as a visual reference.
Why do two swatches in the result look almost identical?
The tool merges colors that are close together in RGB distance to avoid near-duplicate swatches, but two colors that are dominant and sit just past that similarity threshold can still both appear. If that happens, the two closest swatches are usually genuinely distinct at full size even if they look similar in a small thumbnail.
Does the order of the swatches mean anything?
Yes, swatches are always sorted by dominance, meaning the number of pixels each color's bucket represents in the downsampled image, so the first swatch is the single most common color and each one after it covers progressively less of the image.