Color Palette Extractor

Extract dominant colors from any image

Written by toolforge.websiteLast reviewed 23 August 2026How we build and check these tools

Color Palette Extractor: key facts

What it does: Extract dominant colors from any image
Category: Image Tools
Cost: Free, with no account, sign-up, or install.
Your data: Runs entirely in your browser — the files and text you enter are never uploaded to a server.
Last reviewed: 23 August 2026. Report an incorrect result.

About the Color Palette Extractor

A palette lifted from a real photograph carries relationships no random generator invents — the way a sunset's oranges sit against its shadows, or a logo's blue against its paper white. The Color Palette Extractor reads an image's pixels and reports the colours that actually build it, each one with the share of the image it occupies.

That percentage is the part most palette tools leave out, and it changes decisions: a colour covering 40 percent of a photograph is a background, while one covering 3 percent is an accent. Alongside it, each swatch shows its HEX, RGB and HSL values, the nearest named colour, and whether it passes WCAG AA as text on white or on black — so you learn immediately which colours can carry copy and which cannot.

There is also an eyedropper for the times an average is not what you want. Switch it on, move across the image, and a magnified loupe reads whatever pixel sits under the pointer, straight from the full-resolution image rather than the downscaled copy used for analysis. Click to add that exact colour to your palette.

How to use it

Drop an image onto the tool, browse for it with the file picker, or paste one straight from your clipboard.
The palette appears on its own once the image decodes — there is no button to press.
Choose how many colours you want, from 3 to 16, and pick Dominant for the most common colours or Vibrant for a vibrant, muted, light and dark set.
Adjust Sensitivity if colours are merging too eagerly or splitting too finely, and switch on "ignore near-white/black" when a white background or dark border is crowding out the colours you care about.
Read each swatch's share of the image, its colour name, and its contrast ratios, then sort the palette by coverage, hue, lightness or saturation.
Turn on the eyedropper to sample any exact pixel, and click to add it to the palette.
Copy a single colour in HEX, RGB or HSL, copy the whole palette as CSS, SCSS, Tailwind, JSON or a HEX list, or download it as PNG, SVG or JSON.

Why use this version

Every swatch reports the percentage of the image it covers, so you can tell a background colour from an accent instead of guessing from swatch order.
WCAG contrast ratios against white and black are calculated for each colour, with AA and AAA verdicts, answering the question designers actually have: can I set text in this?
The eyedropper reads individual pixels from the full-resolution image, which is what you want when a specific highlight matters more than a statistical average.
Two algorithms suit different jobs — Dominant for the colours that genuinely fill the frame, Vibrant when you need a punchy accent, a muted counterpart, and light and dark variants.
Transparent pixels are skipped rather than averaged into a muddy grey, and the tool tells you what share of the image was transparent so a logo's palette is never a surprise.
It is honest about what an image can support: ask for twelve colours from a two-colour graphic and it returns two, instead of padding the palette with near-duplicates.
Analysis runs entirely in your browser on a canvas, with no upload and no third-party library in the path — private photographs and unreleased brand assets never leave your device.

Frequently Asked Questions

What does the percentage on each swatch mean?

It is the share of the sampled pixels that fall into that colour's cluster — roughly, how much of the image is that colour. Large images are scaled down and sampled rather than read pixel by pixel, so treat the figure as an accurate proportion rather than an exact pixel count. Colours you add with the eyedropper show "picked" instead, because a single sampled pixel has no meaningful coverage.

How does the tool extract colors from images?

The image is drawn to a canvas, scaled so its longest edge is about 1000 pixels, and sampled. Those pixels are then split by median cut: the tool repeatedly divides the colour space along its widest axis until it has the number of clusters you asked for, averages each cluster, and folds together any that are perceptually near-identical. Each surviving cluster becomes a swatch, carrying its population as coverage.

What image formats are supported?

JPG, PNG, WebP, GIF, AVIF and BMP, up to 25 MB. Transparency is respected in the formats that support it, and very large photographs are scaled down for analysis, which keeps a 24-megapixel image as responsive as a thumbnail.

What if the extracted colors don't match what I see?

Three controls address this. Sensitivity decides how eagerly near-identical colours merge, so "fine" preserves distinctions that "fast" flattens. "Ignore near-white/black" stops a white studio background or a dark vignette dominating the result. And the Vibrant algorithm deliberately favours colourful, perceptually striking tones over merely common ones — which is often what you noticed in the image but the dominant list omitted.

How do I get the colour of one specific spot in the image?

Switch on the eyedropper and move the pointer over the preview. A magnified loupe follows it, showing the exact colour under the pointer with its HEX, RGB and nearest colour name. Values are read from the original image rather than the scaled copy, so what you sample is the true pixel. Click to add it to the palette, or copy it on its own.

Can I tell whether a palette colour is safe for text?

Yes. Each swatch lists its contrast ratio against white and against black, labelled AAA, AA, AA Large or Fail under the WCAG 2.1 thresholds of 7:1, 4.5:1 and 3:1, and names whichever of white or black reads better on it. Use that to pick text colours with confidence rather than eyeballing the result.

Which export format should I use?

CSS custom properties or SCSS variables drop straight into a stylesheet; the Tailwind option gives you a colours object to paste into your theme config. JSON carries everything — hex, rgb, hsl, name, coverage and contrast — for scripts and design tooling. The HEX list is the quickest paste into a design app, while PNG and SVG produce a shareable swatch strip.