Color Palette Extractor
Upload an image and extract its dominant colors. Useful for design systems, brand audits, theme generation, and color matching.
What the Color Palette Extractor is useful for
The most common job is turning a reference image into a starting color scheme. Drop in a hero photo, a competitor's screenshot, or a Pinterest-style mood board and you get the handful of colors that actually dominate it, with exact HEX codes instead of an eyeballed guess.
Front-end developers use it to seed CSS custom properties and Tailwind config values from a brand asset. Pull six colors from a logo or marketing banner, copy the HEX codes, and you have the base for --color-primary, --color-accent, and a couple of neutral background tones.
Designers running a brand audit can extract palettes from several existing pages or product photos and compare them side by side to spot where a brand has drifted into inconsistent colors. E-commerce teams use it on product shots to pick UI accents that match the merchandise, and anyone building a theme can lift a coherent set of colors from a single photograph in seconds.
How to use the Color Palette Extractor
Load an image, choose how many colors you want, run the extraction, then copy individual swatches or download the whole palette. Everything happens on the page; there is no upload step and no waiting on a server.
The color count input accepts any value from 2 to 20 (it defaults to 6). Lower numbers give you a broad, brand-style palette; higher numbers capture more of the subtle tones in a detailed photo. You can change the number and extract again as many times as you like.
A practical example: building CSS variables from a brand photo
Say you are styling a landing page around a single product photograph. Open the tool, click Choose File (or drag the photo onto the drop zone), and the preview appears on the right. Set the color count to 6, since you want a compact scheme rather than every shade in the image, and click Extract.
Within a moment you get six swatches sorted from most to least dominant, each labelled with its HEX code. The largest swatch is usually your background or the product's main color; the smaller ones are accents. Click the dominant swatch and its HEX is copied straight to your clipboard, ready to paste as --color-bg.
Click the next few swatches in turn for your primary and accent variables. If you would rather keep the full set, hit Download JSON: you get a palette.json file containing each color's hex, its rgb values, and a count of how many sampled pixels fell into that cluster, which is handy for deciding which colors are worth keeping. From there you paste the values into your stylesheet and you are done.
Supported input and output
Input is any still image your browser can decode, which in practice means JPG, PNG, WebP, GIF, BMP, and similar raster formats. The file picker is set to accept image types, and the tool reads colors from whatever the browser can render to a canvas.
Output is a palette of HEX swatches on the page. Clicking a swatch copies its HEX code (the tooltip also shows the matching rgb() value). The Download JSON button exports the complete palette as a structured file with hex, rgb, and pixel-count fields for each color, so you can feed it into a build script or design token pipeline.
Privacy: it all stays in your browser
The extractor runs in your browser where supported. Your image is drawn to an in-page canvas and analysed locally; the file is not uploaded to a server, and there is no account, login, or sign-up of any kind.
Because the work is local, you can safely use it on unreleased product photos, internal brand assets, or client images. The only data that leaves the page is whatever you choose to copy or download yourself; close the tab and nothing is retained.
Quality and limitations
To stay fast on large photos, the tool downsamples your image to a small grid (128 pixels wide, with height kept in proportion) before it analyses colors. That sampling is what makes a multi-megapixel photo extract instantly, but it also means very small or thin colored details may not survive the downscale and so may not appear in the palette.
Median-cut quantization reports the average color of each cluster, not the single most saturated pixel. On images with smooth gradients, a returned swatch can be a midpoint that does not exactly match any one spot you can point to in the picture. This is normal for palette extraction and is usually what you want for a balanced scheme.
Fully or mostly transparent pixels are skipped, so a logo on a transparent PNG yields colors from the artwork rather than a phantom background. The dominant color is whatever covers the most pixels, which is not always the color a human would call the 'main' one; a photo that is 70% sky will rank blue first even if the subject is a red car. Raising the color count helps surface those secondary colors.
Common problems and fixes
Nothing happens after I pick a file: choosing a file only loads the preview. You then need to click the Extract button to generate the palette. The button stays disabled until an image is loaded.
Clicking a swatch did not copy the HEX: copying relies on the browser's clipboard access, which most browsers only allow on secure (HTTPS) pages and after a real click. If it fails, read the HEX off the swatch label or the tooltip and copy it manually, or use Download JSON to grab every value at once.
The palette has fewer swatches than I asked for: if an image contains only a few distinct colors (for example a flat two-tone graphic), median-cut cannot split it into more clusters than the colors that actually exist, so you get back what is genuinely there.
The colors look washed out or 'muddy': this happens on gradient-heavy or low-contrast images, where averaged clusters land in the middle of a range. Lower the color count for a cleaner brand-style set, or crop the image to the area you care about before loading it so the dominant colors are the ones you want.
A tiny accent color is missing: small details can be lost in the downsample. Increase the color count toward the higher end (up to 20) to give the algorithm more buckets to capture minor tones.
Best practices and tips
Start at 6 colors for a brand or UI palette and only raise the count if you genuinely need more accents; large numbers tend to produce near-duplicate shades that are hard to use. For an illustration or detailed photo where you want range, 8 to 12 is a sensible upper band.
Crop or pre-frame the image to the region that matters before extracting. The tool ranks colors by how much of the picture they cover, so removing a large irrelevant background (or zooming in on the subject) directly changes which colors come out on top.
Use the Download JSON export when you want repeatability. The pixel-count field tells you how dominant each color is, which is a quick way to decide which swatches become primary tokens and which are minor accents, and the file drops cleanly into a design-token or theme-generation workflow.
Frequently asked questions
How many colors can it pull from one image?
Anywhere from 2 to 20. The Colors field defaults to 6, which suits most brand and UI palettes. If a flat graphic contains fewer distinct colors than you request, you simply get back the colors that actually exist in it.
What algorithm does it use to choose the colors?
Median-cut color quantization. It repeatedly splits the group of pixels with the widest color range along its longest channel, then reports the average color of each resulting cluster. Swatches are ordered by how many pixels fall into each cluster, so the most dominant color is shown first.
Why does a swatch not exactly match a pixel I can see in the photo?
Each swatch is the average of a cluster of similar pixels, not a single sampled point. On gradients and smooth blends, that average can land between visible tones. This is expected behaviour for palette extraction and usually gives a more balanced scheme. If you need the color at one exact spot, an eyedropper-style color picker is the better tool.
Does it copy HEX or RGB when I click a swatch?
Clicking a swatch copies the HEX code. The matching rgb() value is shown in the swatch's tooltip, and the Download JSON export includes both hex and rgb for every color.
What is inside the downloaded JSON file?
A colors array where each entry has the hex string, an rgb object with r, g, and b values, and a count of how many sampled pixels belonged to that color. The count is a quick way to judge which colors are dominant versus minor accents.
Will it work on a transparent PNG or a logo?
Yes. Pixels that are fully or mostly transparent are skipped, so the palette comes from the visible artwork rather than the empty background. That makes it well suited to logos and icons saved with transparency.
Is my image uploaded anywhere?
No. The image is drawn to a canvas in your browser and analysed on your device. Nothing is sent to a server, there is no account, and the only data that leaves the page is whatever you copy or download yourself. It is safe to use on unreleased or client images.
Does it edit or change my image?
No. The extractor only reads colors. It never modifies, re-saves, or exports your picture; it just produces a palette of swatches and an optional JSON file.
Related tools
Color Picker (eyedropper for one exact color) · Image to Base64 · EXIF Viewer · Image Format Converter · Compress Image · PNG to JPG Converter