Guide · 4 min read

Change a logo's color: white, black or yours, from one file.

How to change the colors of a logo, make it white for a dark background or black for a stamp, and why a recolored PNG grows a halo, on one logo file in four colorings.

An ochre circle holding a navy quarter circle beside the word HALDEN in navy capitals, on pale blue: as drawnAs drawnthe file's own three colors
An ochre circle holding a navy quarter circle beside the word HALDEN in navy capitals, on pale blue: one colorOne colorthe circle in the navy
An ochre circle holding a navy quarter circle beside the word HALDEN in navy capitals, on pale blue: white on darkWhite on darkfor a dark header or a shirt
An ochre circle holding a navy quarter circle beside the word HALDEN in navy capitals, on pale blue: new colorsNew colorsa plum and a coral, two clicks

To change a logo's color, change the colors of its shapes: in an SVG, each shape names its color, so one edit repaints it everywhere, sharp. A PNG or a JPG holds pixels, so a new color painted over them leaves a halo at the edges; draw it as an SVG first, then recolor it. A white version for dark backgrounds and a black one for stamps come from the same file.

Updated 1 source ↓

The way that works

How do I change the color of my logo?

Change the color of its shapes, which needs the logo as shapes: an SVG, a PDF or an EPS. In a PNG or a JPG, draw it as an SVG first, then pick each new color.

Each card above is the same file with its colors swapped in its text: what a color editor does to a vector logo.

  • An SVG, a PDF or an EPS

    To change its colors
    Pick each shape's new color in an editor
    What you get
    A new file, sharp at every size

  • A PNG or a JPG

    To change its colors
    Draw it as an SVG first, then recolor it
    What you get
    The same, from the file you have

  • A PNG, painted over

    To change its colors
    A paint bucket or a color overlay on its pixels
    What you get
    Halos along every edge, and the same pixel size

The halo

Why does my recolored PNG have a light edge?

Because its edge pixels mix the logo's old color with the background, to make the curve look smooth. A new color painted over the logo leaves those mixed pixels behind, as a fringe.
  • The causeEdges are half colors
    • A PNG smooths each curve with pixels between the logo and its ground
    • Recolor the logo, and those pixels keep the old mix
  • On a new backgroundThe old ground shows
    • A logo cut from white keeps a pale rim on dark
    • A logo cut from dark keeps a dark rim on white
  • The fixRecolor the shapes
    • A vector shape has one exact edge and one color
    • Change it, and the edge is drawn again in the new color

Recolor it here

How do I recolor a PNG logo?

Drop it here: VecSnap draws it again as shapes, then its Colors tab changes any color, instantly, in the file you download.

Drop your logo. Get its SVG.

  1. Drop the picture of your logo you have.
  2. Open Colors on the result. Click a color in the drawing, or in its list, and pick the new one.
  3. Try a Look: Night, Two-tone, Grays, or Yours, your brand's colors.
  4. Download: the new colors are in the SVG, the PDF and every PNG.

Which versions

Which color versions of my logo do I need?

Usually four: the full-color logo, a one-color version, a white one for dark backgrounds, and a black one for stamps, faxes and engraving. Each is the same drawing in other colors.

  • Full color

    Its colors
    The logo's own, on its ground
    Where it goes
    Your website, your signs, anywhere it is printed in color

  • One color

    Its colors
    Every shape in one ink, any color
    Where it goes
    Embroidery, screen printing, a single-ink print

  • White

    Its colors
    Every shape white, no ground
    Where it goes
    Dark headers, photos, shirts and packaging in dark colors

  • Black

    Its colors
    Every shape black, on white or none
    Where it goes
    Stamps, invoices, engraving, a black and white print

Questions

Logo colors, answered.

Sources

Turn every color of the logo to white and drop its background, so it sits on a dark header, a photo or a shirt. In a vector file that is one change per color; a white box left behind it shows on every dark surface.

More guides

Keep reading

Favicon size and format

Sizes, formats and the HTML, shown on one icon in a tab, a search result and a home screen.

Guide · 5 min read

What is an SVG file?

What the format is, and how to open, make and edit one, on a real file read line by line.

Guide · 4 min read

What is a vector file?

What one is, its formats, and how to tell a real one from pixels.

Guide · 3 min read

Image Trace in Illustrator, step by step

The steps, the settings and Expand, and what to do when Image Trace is grayed out.

Guide · 3 min read

How to fix a pixelated logo

Why a logo pixelates, the pixels each place asks for, and the fixes, shown on one small JPEG.

Guide · 5 min read

SVG viewBox, width and height

The viewBox, width and height, a responsive SVG, and why yours will not scale, shown on one file.

Guide · 4 min read

SVG vs PNG

Which format each job needs, shown on one drawing saved both ways.

Guide · 3 min read

How to change an SVG's color

Recolor an SVG in its text, with CSS or currentColor, and why one in an img tag will not change.

Guide · 4 min read

How to add a sticker border

A white edge and a smooth cut line, in Cricut, Illustrator, Inkscape or one step.

Guide · 5 min read

Inkscape Trace Bitmap, step by step

The steps, the modes and the settings, and what Trace Bitmap leaves on a real PNG.

Guide · 4 min read

How to vectorize an image in Photoshop

Make Work Path, color by color, and where it stops: what Photoshop can vectorize.

Guide · 4 min read

SVG vs EPS

What differs, which to send a printer, and one logo opened both ways.

Guide · 3 min read

How to vectorize an image in Canva

Canva's own apps, why a PNG saved as an SVG stays pixels, and an SVG you can recolor in Canva.

Guide · 4 min read

How to turn a Procreate drawing into a vector

Procreate shares no vector file: export the PNG that converts best, and draw for it.

Guide · 2 min read

How to make an SVG for Cricut

Why Design Space wants an SVG, and how to make one with a layer for each color.

Guide · 4 min read

Image Trace in Affinity, step by step

The steps, the two settings, where it is, and why traced corners come out round.

Guide · 4 min read

How to make an SVG for laser cutting

Why a traced SVG engraves some areas twice, and the file each laser app wants.

Guide · 5 min read

How to vectorize an image in Figma

Figma's own Vectorize, how to import or paste an SVG, and what makes a file easy to edit there.

Guide · 3 min read

How to reduce anchor points

Why a traced SVG has thousands, what they cost, and how to keep only the few a shape needs.

Guide · 2 min read

Drop an image. Check the file.

Converting is free. You see the whole result before you spend anything.