Color Palette Extractor

When a reference photo, a client's logo or a moodboard lands in your inbox and you need its colors as exact HEX values, picking them one by one with an eyedropper is slow and subjective. This color palette extractor analyzes the whole image and returns its dominant colors, each with a HEX code, an RGB triplet and the share of the image it represents, sorted from most to least present. It is a quick first step for designers matching brand colors, developers building a theme from a mockup, and anyone who wants to know which colors actually make up a picture.

How the palette is extracted

The tool uses median cut, a classic color quantization method. It collects a sample of pixels, places them in one group, then repeatedly splits the group with the widest color range along its dominant channel (red, green or blue) at the median, until it has as many groups as you asked for. Each group's color is the average of the pixels in it, and its percentage is the share of sampled pixels that fell into that group.

Two consequences are worth knowing. First, a palette color is an average, so it may not match any single pixel exactly; on a photo it represents a region, not a specific point. Second, the percentages reflect area, not visual importance: a small red logo on a large white page will show white at the top and red near the bottom, if at all at low color counts.

How to extract colors from an image

1. Drop a PNG, JPG, WebP, BMP, TIFF or AVIF image onto the tool, or several images for a batch.
2. Choose how many colors you want: 4, 6 (default), 8 or 12.
3. Optionally adjust Max samples and Ignore alpha below (see below).
4. Click Extract Palette. For one image you get a swatch grid with HEX, RGB and percentage for each color, plus the full palette as formatted JSON that you can select and copy.
5. For several images you get a summary table instead, exportable as CSV or JSON.

Options explained

• Color count: 4 gives a compact brand-style palette, 6 is a balanced default for most images, 8 and 12 bring out secondary tones and accents. If an image contains fewer distinct colors than requested (a flat two-color logo, for example), you get fewer swatches rather than duplicates.
• Max samples: the maximum number of pixels analyzed, from 100 to 1,000,000, default 50,000. On larger images the tool reads every Nth pixel evenly across the image. The default is plenty for photos; raise it for very large images with small but important color areas, lower it if you process many big files and want speed.
• Ignore alpha below: pixels whose transparency (alpha, 0 to 255) is below this value are skipped, default 16. This keeps the transparent background of a PNG logo from showing up as a black swatch. Set it to 0 to include every pixel, or raise it to also ignore soft, semi-transparent edges.

What you can do with the output

Each color is returned as an object with hex (uppercase, like #1E40AF), rgb as an array of three numbers, and percentage rounded to two decimals. That JSON is easy to turn into CSS custom properties, a Tailwind theme, design tokens or a chart color scale. To get HSL or other notations from a HEX value, paste it into the color converter.

• Brand matching: pull the exact colors from a client's existing logo or packaging photo before rebuilding their website.
• Theming from imagery: build a UI theme or a slide template that matches a hero photo.
• Moodboards: turn inspiration images into concrete swatches you can share with a team.
• Batch audits: run a folder of product photos or thumbnails and compare their dominant colors in one CSV, for example to check that a series looks consistent.

Batch mode and exports

When you select more than one image, each file is processed with the same settings and the results appear in a table: file name, status, dominant color (the HEX of the largest group) and number of colors found. Export CSV writes those columns plus any error message, which is convenient in a spreadsheet. Export JSON writes the same rows and includes the complete palette of every file, ready for a script. If one image fails to decode, the rest still complete and the failure is marked in its row.

Tips for better palettes

• Crop first: if only part of an image matters (a logo on a photo, a product on a table), crop to that area with the crop and rotate tool so the background does not dominate the palette.
• Raise the count for photos: natural images have gradients; 8 or 12 colors capture accents that 4 colors average away.
• Lower the count for logos and flat art: 4 colors usually return the actual brand colors cleanly.

Compared with an eyedropper or design software

An eyedropper in Photoshop, Figma or the browser developer tools gives you the exact color of one pixel you choose, which is ideal when you know where to click. This extractor answers a different question: which colors dominate the whole image, and in what proportion. The two complement each other.

Your images stay private

Extraction runs in your browser tab through Rust code compiled to WebAssembly. The image is decoded and analyzed locally, and no request sends it to a server. That matters for unreleased product shots, client brand assets under NDA, or personal photos. You can check it in the Network tab of your developer tools, or go offline after the page loads.

Frequently asked questions

How do I get the HEX codes of colors in an image?

Drop the image, pick a color count and click Extract Palette. Each swatch shows its HEX code, and the JSON block lists every HEX value for copying.

Why does a color in the palette not appear anywhere in my image?

Each palette color is the average of a group of similar pixels. On photos with gradients, that average can be a shade that no single pixel has exactly.

Why do I get fewer colors than I selected?

The image does not contain enough distinct colors to split further. A two-color logo cannot produce twelve meaningful swatches.

Does the transparent background of my PNG count?

No, by default pixels with an alpha value below 16 are ignored. Set Ignore alpha below to 0 if you want them counted.

What does the percentage mean?

The share of analyzed pixels that belong to that color group. Percentages of all colors add up to roughly 100.

Are my images uploaded?

No. Everything runs locally in your browser. Nothing is sent to or stored on a server.