Palette extractor.
Stop eyedropping screenshots. Drop your logo and get the exact hex codes it is built from — how dominant each color is, whether it passes contrast on light or dark, and ready-made CSS or Tailwind exports.
PNG, JPG, SVG or WebP · we\u2019ll pull the exact brand colors · nothing is uploaded
How it works
Drop the logo
Any image format works; transparent PNGs give the cleanest read since background pixels are ignored automatically.
Review the palette
Similar shades are merged into true brand colors, ranked by how much of the logo they cover, each with a contrast hint.
Copy & export
Click any swatch to copy its hex, or grab the whole palette as CSS custom properties or a Tailwind color block.
Why use this tool
Every brand guideline starts with the palette, but most small brands never received one — just a logo file. This extractor reverse-engineers the guideline from the artwork: it reads every pixel, clusters the anti-aliased noise back into the true source colors, and hands you the hex codes with the two pieces of context that make them usable — how dominant each color is, and whether it holds AA contrast against light or dark backgrounds. That last part quietly prevents the most common branding mistake on the web: brand-colored text nobody can read.
Pair it with the rest of the toolbox: pull the palette here, then keep those exact hexes handy while you build a branded QR code, set the background in the favicon generator, or choose a canvas color in our free logo animator. Consistent color across every touchpoint is what makes a small brand look like a big one — and when you are ready for the biggest touchpoint of all, an animated logo, our motion designers work from your exact palette.
Frequently asked questions
Why do I get 6 colors when my logo only uses 3?
Anti-aliasing and JPG compression create in-between shades at every edge. The extractor merges most of them, but gradients and soft shadows legitimately add colors — lower the color count slider to tighten the palette.
What does "AA on light / AA on dark" mean?
It is the WCAG 2.1 contrast check at the 4.5:1 level for normal text. "AA on light" means the color is readable as text on white; "AA on dark" means readable on black. Colors passing neither are best kept for accents, not copy.
Can I extract from a photo instead of a logo?
Yes — it works on any image and makes a great mood-palette tool, though dominance percentages are most meaningful on flat logo artwork.
Is anything uploaded?
No. The image is read on a canvas in your own browser; the palette never leaves your machine.
How accurate are the hex codes?
Exact for flat-color logos. For gradient logos you get the perceptual centers of each gradient, which is usually what you want for a working palette.
More free logo tools
Your logo deserves motion, too.
Free tools get it ready — our motion designers make it unforgettable. 4K with sound, delivered in about 48 hours.
Try the animators Order custom — from $35 →