Brand Color Extractor — pull hex codes from your logo
Drop in an SVG logo to pull its brand palette, generate dark-background, light-background, and monochrome variants, and export a palette reference card — all processed locally, nothing leaves your browser in the core flow (the optional AI edit assistant sends your vector when used).
Click a swatch to copy its hex code.
Logo not looking right anywhere?
If your file isn't a real vector, or edges look rough after recoloring, run it through Logo Rescue to rebuild a clean, editable SVG first.
How palette extraction works
Reads the colors already in your SVG markup — it doesn't guess from pixels.
When you click Extract palette, the tool walks every element in the parsed SVG DOM and collects each distinct fill and stroke color it finds, converting named colors and shorthand hex to a common RGB form. Near-duplicate values are grouped together, and each resulting color is ranked by an estimate of how much visible area it covers relative to the others, so the swatch you see first is usually the dominant brand color rather than a stray accent. Up to six swatches are returned, each labeled with its hex code and coverage percentage, plus a luminance check that flags any color close to pure white or pure black as "very light" or "very dark" — a signal that it may vanish depending on the background it's placed on. From the same source SVG, the tool separately builds three recolored variants (dark-background, light-background, and a flat single-color monochrome) using VPKit's recolor engine, and can render the extracted palette into a downloadable 800×400 PNG reference card with each swatch, its hex value, and its coverage percentage laid out for a style guide or handoff doc.
Brand Color Extractor FAQ
Is this free to use?
Yes — extracting a palette, previewing the dark/light/mono recolors, and generating the palette card are all free to try in your browser.
How accurate is the extracted palette?
It reads the actual fill and stroke values written into your SVG markup, so accuracy depends on how the file was authored — clean vector logos with a handful of distinct colors extract cleanly, while photo-traced SVGs can return dozens of near-identical shades.
Does it work on raster logos like PNG or JPG?
Yes — PNG, JPG, and WebP images are automatically auto-vectorized into SVG paths first, since color extraction reads vector fill/stroke values rather than sampling pixels directly.
Is my logo uploaded to a server?
No. Parsing, extraction, recoloring, and the palette card render all happen locally in your browser using VPKit's SVG and canvas engine — the core tool sends nothing anywhere (the optional AI edit assistant sends your vector when used).
How many colors does it detect?
Up to six distinct swatches, ranked by estimated visible coverage, each shown with a hex code and a rough percentage of the logo's fill area.
What's the palette card for?
It's a downloadable PNG reference sheet with your extracted swatches, hex codes, and coverage percentages laid out on a clean card — handy for a style guide, a client handoff, or a design brief.