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 colour scheme. Drop in a hero photo, screenshot, or mood board and the tool computes representative colour clusters with HEX values. They are sampled approximations for exploration, not authoritative brand specifications or exact readings of every source pixel.
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 the maximum number of colours, run the extraction, then copy individual swatches or download the palette. The selected image is analysed with browser canvas code and is not sent to our server for colour analysis. Ordinary page, asset, consent, analytics, and advertising requests can still occur.
The colour input accepts a maximum from 2 to 20 and defaults to 6. The result can contain fewer swatches when the sampled image has fewer distinct clusters. Lower maxima give a compact palette; higher values can surface more secondary tones. You can change the value and extract again.
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.
You get up to six equal-sized swatch buttons, ordered by the sampled pixel count of each computed cluster and labelled with a HEX value. The first cluster covers the most sampled pixels; it is not necessarily the colour a person considers most important. Click a swatch to copy its HEX value.
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.
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.
Frequently asked questions
How many colors can it pull from one image?
You choose a maximum from 2 to 20 swatches, with 6 as the default. The extractor returns up to that number and can return fewer when the sampled image does not contain enough distinct colour clusters. A low maximum gives a compact dominant palette; a higher one can surface more secondary tones.
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.
Related tools and guides
Color Picker (eyedropper for one exact color) · Image to Base64 · EXIF Viewer · Image Format Converter · Compress Image · PNG to JPG Converter · Image tool guides and how-tos · ImageConverterTool blog