Colour Palette Extractor
Pull the dominant colours out of any image, ranked by how much of it they cover. Copy as hex, RGB or a CSS variables block — nothing is uploaded.
Palette
What this tool does
Drop in a photo, screenshot, logo or illustration and the tool lists its dominant colours with a swatch, the value in hex or RGB, and the percentage of the image each colour covers. Click a swatch to copy it, or grab the whole set as a CSS :root block. Transparent pixels are ignored so logos on transparent backgrounds report their real colours.
Typical uses
- Brand sheets — extract the palette from a logo to set up design tokens.
- Matching UI to a hero image — pull three or four colours from the photo and use them for buttons and accents.
- Mood boards and art reference — see which hues actually dominate a reference image rather than which ones you noticed.
- Data viz — derive a consistent categorical palette from an illustration that already works.
How it decides
Pixels are grouped into coarse colour buckets and counted. The tool then takes the biggest buckets in order, but skips any that are too close to a colour already picked — so a photo of a blue sky over a blue sea still gives you the sand, the clouds and the boat, not six blues. The reported value is the average of the real pixels in each bucket, not the bucket's corner, which is why the swatches look like the image rather than a posterised version of it.
Limits
- Sampling is done at 120×120, so tiny details (a 2-pixel red dot) won't register. That's deliberate — you want the palette, not the noise.
- Pixels with less than 50% opacity are ignored.
- Output is sRGB; embedded colour profiles are not applied.
Frequently asked questions
How does the colour extraction work?
The image is sampled down to a small grid, every opaque pixel is sorted into one of 4,096 colour buckets, and the buckets are ranked by how many pixels they hold. The tool then walks that ranking and keeps colours that are visually distinct from the ones already chosen, so you get a spread of the image's real dominant colours rather than six near-identical shades of the background. Each swatch shows the share of the image it covers.
Why isn't white (or the background) showing up?
It should — white and other light colours are handled correctly and will appear if they cover enough of the image. Fully transparent pixels are ignored on purpose, so a logo on a transparent background reports the logo's colours, not "transparent". If a colour you expect is missing, increase the number of colours; it may be just below the cut-off.
Can I copy the colours as CSS?
Yes. Click any swatch to copy its hex or RGB value, use "Copy all" for a one-per-line list, or open "CSS variables" for a ready-made :root { --color-1: … } block you can paste into a stylesheet.
How many colours can I extract?
Between 3 and 12. Three gives you the headline palette; six is a good default for a brand sheet; twelve is useful for illustrations with many hues. The slider re-runs extraction instantly.
Is the image uploaded to get the colours?
No. Everything runs in your browser with the Canvas API — the page has no server and works offline. This makes it safe for unreleased brand assets and client work.
Is this the same as a "dominant colour" API like Vibrant or Color Thief?
Similar in spirit. Those libraries use a median-cut or modified quantiser to find the most common colours; this tool uses a frequency-then-distinctness approach that favours colours you can actually see in the image. For a quick brand palette or a UI theme the results are comparable; for scientific colour analysis use a dedicated tool.