Color Palette Extractor
Drop in a photo, logo or screenshot and get its eight dominant colors as copyable hex codes.
Building a design around an image — a brand color scheme from a logo, a website palette from a hero photo, slide colors that match a product shot — starts with knowing exactly which colors are in it. This tool analyzes any image and extracts its eight dominant colors, ranked by how much of the image each one covers, with the hex code on every swatch.
The extraction uses median-cut quantization, the classic algorithm for reducing an image to its most representative colors: it repeatedly splits the image's color space along its widest axis, so the result captures the true families of color rather than eight near-identical shades of the biggest one. Click any swatch to copy its hex code, or grab the whole palette at once as a plain list or ready-made CSS custom properties. Transparent pixels are ignored, so logos on transparent backgrounds analyze cleanly. As always, the image is processed in your browser and never uploaded. Want the palette from just one region? Crop the image first.
How to use the Color Palette Extractor
- Drop your image onto the tool — photos, logos and screenshots all work.
- The eight dominant colors appear as swatches, largest share first, each showing its hex code and percentage.
- Click a swatch to copy its hex code to the clipboard.
- Use Copy all hex codes for a plain list, or Copy as CSS variables for ready-to-paste custom properties.
Frequently asked questions
How are the dominant colors determined?
With median-cut quantization: all the image's pixels are placed in one color box, and the box with the widest color range is split repeatedly until eight boxes remain. Each box's average becomes a palette color, weighted by how many pixels it contains — a faithful summary of the image's real color makeup.
Why don't I see a color that's clearly in the image?
Small accents can be absorbed into a larger color family — a thin red line in a blue photo may not earn its own slot among eight. Crop to the region containing the color you want and extract again; the palette will refocus on that area.
Do transparent backgrounds affect the palette?
No — fully and mostly transparent pixels are skipped, so a logo on a transparent PNG yields the logo's colors, not a phantom white or black background.
What do the percentages mean?
Each swatch's share of the image's opaque pixels. They're a guide to hierarchy: the 40% color is your dominant/background candidate, the 3% color an accent.
Can I use the palette directly in code?
Yes — "Copy as CSS variables" gives you --color-1 through --color-8 declarations you can paste into a :root block and reference throughout your stylesheet.