How to Extract a Color Palette from an Image (Free, No Signup)

To pull a color palette from an image, upload it to the Color Palette Extractor, which analyzes every pixel and returns the most common colors as clickable swatches — each with a HEX code and an rgb() value, plus a one-click button to copy them all as CSS variables.

What a color palette extractor does and why it helps

Matching a design to a photo or logo usually starts with the same question: what are the actual colors in it? Eyeballing a screenshot gets you close, but not exact — and an exact HEX code is what you need for CSS, a brand guide, or a Figma file. A palette extractor answers that by sampling the image's pixels directly and reporting back the colors that actually appear, ranked by how much of the image they cover.

How to extract a color palette with Toolbench

1. Open Color Palette Extractor.
2. Drop in an image, paste one from your clipboard, or click to choose a file.
3. Set Colors to how many swatches you want — anywhere from 2 to 16, defaulting to 6.
4. The palette appears instantly next to your image: each swatch shows its HEX code and rgb() value.
5. Click any swatch to copy its HEX code, or click Copy as CSS variables to copy the whole palette as a :root { --color-1: #...; } block.

Everything happens in your browser — the image is never uploaded to a server.

A worked example

Here's what happens with a simple synthetic test image: picture a frame that's 50% a blue (#3b82f6), 30% a green (#16a34a) and 20% an orange (#f97316), with no other colors in it. Running the extractor's own color-matching logic on that image with the default Colors setting of 6 returns:

Swatch	HEX	RGB	Share of the image
🟦	#3b82f6	rgb(59 130 246)	50%
🟩	#16a34a	rgb(22 163 74)	30%
🟧	#f97316	rgb(249 115 22)	20%

Even though Colors was set to 6, only 3 swatches come back — because the image only contains 3 distinct colors, and the tool won't manufacture extras. The swatches are also ordered by how much of the image each one covers, most dominant first, not by where the color sits in the image.

How the extraction actually works

Understanding the method helps explain what you'll see:

• The image is downsampled first. Before counting colors, the tool scales the image down so its longer edge is at most 90px. This is plenty to find the dominant colors and keeps the analysis fast, but it means fine, pixel-level detail gets averaged away rather than picked up as its own color.
• Similar colors are grouped, then averaged. Pixels are bucketed by rounding each color channel down to the nearest of 16 levels, then each bucket's final color is the true average of the pixels that landed in it — so a swatch reflects the real color, not just one sampled pixel.
• Near-duplicate colors are filtered out. Once buckets are ranked by pixel count, a candidate color only makes the final palette if it's meaningfully different (by Euclidean distance in RGB space) from every color already picked. This is what stops a sky from producing six near-identical shades of blue instead of one.
• Mostly-transparent pixels are ignored. Pixels that are more than half transparent are excluded from the count, so a logo on a transparent PNG background returns the logo's colors, not transparency.

Tips and common mistakes

• Use a clean source image for brand colors. A product photo with shadows and reflections will return realistic-looking midtones, not your flat brand HEX codes. For an exact brand palette, start from the logo or mockup file itself.
• Raising Colors doesn't guarantee more swatches. If the image only has a handful of truly distinct colors, you'll get fewer swatches back than you asked for — that's expected, not a bug.
• Transparent logos work well. Because near-transparent pixels are skipped, a logo exported with a transparent background returns the logo's own colors instead of being diluted by "transparent" as a color.
• Grab the CSS variables for a quick start. If you're about to theme a page around these colors, Copy as CSS variables saves retyping six HEX codes by hand.

Related tools

• Color Converter — convert any extracted HEX code to RGB, HSL or OKLCH, and check its contrast ratio.
• HEX to RGB — convert a list of HEX codes to RGB in one pass.
• RGB to HEX — convert RGB values back to HEX.
• Favicon Generator — turn a logo into a full favicon set once you know its colors.

Frequently asked questions

How many colors can I extract?

Between 2 and 16. The Colors option defaults to 6, but you can set it higher for a broader survey of an image or lower for just the one or two dominant tones.

Why did I get fewer swatches than I asked for?

The tool only returns colors that are genuinely different from each other. If your image is made up of only a few truly distinct colors — say, three — that's all you'll get back even if Colors is set higher.

Is my image uploaded anywhere?

No. The image is decoded and analyzed entirely in your browser using canvas; it's never sent to a server.

Does it work with logos that have a transparent background?

Yes. Pixels that are more than half transparent are excluded from the analysis, so a logo on a transparent PNG returns the logo's own colors rather than being skewed by the transparent background.

Can I get the palette as CSS instead of individual HEX codes?

Yes. Click Copy as CSS variables to copy the whole palette at once as a :root { --color-1: ...; --color-2: ...; } block ready to paste into a stylesheet.