Extract a color palette from an image

How the colors are picked

The tool takes a sample of the photo's pixels and groups similar colors together using k-means clustering, worked out in a color space that roughly follows how people perceive difference. Each group becomes one swatch. It is ordinary arithmetic on the pixels, a conventional edit with no model.

You choose how many colors you want, from 3 to 10. Fewer colors give the broad mood of an image. More pick up accents and smaller details, such as a logo's thin outline.

Reading each swatch

Every color in the palette comes with the details you need to use it.

Contrast matters for buttons, banners and anything with text on a colored block. AA is the level usually treated as the minimum for body text; AAA is stricter and easier to read for more people.

• The HEX and RGB codes, each with a copy button.
• Share, the percentage of the sampled image that falls into that color group. A large share usually means a background or dominant surface; a small share is often an accent.
• The contrast ratio of white text and black text on that color, with a WCAG AA or AAA verdict. Use it to decide which text color reads well on a button or banner.

Getting a clean brand palette from a logo

Logos often sit on white or transparent space, which would otherwise take up a big swatch of its own. Turn on the option to ignore near-white and transparent background, and the palette focuses on the logo's real colors.

Use the original logo file where you can, rather than a screenshot or photo of it. Compression and lighting add in-between shades that can blur the result. If a palette shows two nearly identical colors, lower the count by one; if an accent is missing, raise it.

For photos, the palette describes the overall color mood, which is handy for picking a background color, a text color for a thumbnail, or a set of colors for a slide deck that matches an image.

Exporting the palette

There are three export formats. A PNG swatch card is easy to share with a client or drop into a mood board. CSS variables text can be pasted into a stylesheet. JSON suits design tools and scripts that read color lists. Once you have the codes, Background colour can use one of them behind a cutout.

Note the colors by role, such as main, accent and background, so they are used the same way each time.

What it will not do

• Results come from a sample of pixels, so very small details may not get their own swatch.
• Photos of logos pick up extra shades from lighting and compression; use the original file when you can.
• It reports colors and contrast; it does not judge whether a palette suits your brand.
• Colors appear as your screen shows them, so printed results can differ.

Devices and downloads

No download — ordinary image arithmetic. Clustering the colors and checking contrast use no model, so WebGPU and WebAssembly are not involved. The work happens in this tab.

Instant edit: Ordinary image arithmetic. No model, no download, works in any modern browser. See what is stored on this device.

Step by step

1. Open an image or logo. Drop, paste or choose the file to sample.
2. Set the number of colors. Pick 3 to 10, and ignore near-white or transparent background if needed.
3. Review the swatches. Check codes, share and the text contrast verdicts.
4. Export. Copy codes, or save as a PNG card, CSS variables or JSON.

Questions about brand colour extractor