pngtopSearch

Tutorials

How to change the colour of a transparent PNG

Recolour icons, shapes and objects in a transparent PNG without losing the background, using Canva, Figma, Photoshop, Photopea, GIMP, PowerPoint and CSS.

By the pngtop team · · 4 min read

You found the perfect icon or illustration, but it is the wrong colour for your brand. Changing the colour of a transparent PNG is usually quick, and the transparent background stays exactly as it is. The method depends on what kind of image you have.

First: what kind of PNG is it?

Single-colour images such as icons, silhouettes, line art and simple shapes are the easiest. You can turn the whole image into any colour you want.

Multi-colour illustrations such as cartoons and flat graphics can be shifted to a new palette, or recoloured area by area.

Photographs like food, products and people can have their hue shifted, but the result only looks natural for small adjustments, such as making a red flower pink.

Single-colour icons: fill the whole shape

Photoshop or Photopea

  1. Open the PNG.
  2. In the Layers panel, click Lock transparent pixels (the checkerboard lock icon).
  3. Choose your colour as the foreground colour.
  4. Press Alt + Backspace (Windows) or Option + Delete (Mac) to fill.

Only the visible pixels are filled; the transparent background and the soft edges stay intact.

A non-destructive alternative: double-click the layer, tick Color Overlay, and choose a colour. You can change it again at any time.

Figma

Figma cannot repaint the pixels of a PNG, but a mask gives the same result:

  1. Draw a rectangle the size of the icon and fill it with your colour.
  2. In the layers list, put the PNG below the rectangle.
  3. Select both and choose Use as mask (Ctrl/Cmd + Alt/Option + M).

The PNG's shape now cuts out the coloured rectangle, giving an exact, flat colour, which is ideal for icons. For a softer tint that keeps the shading of a multi-colour image, add a solid fill above the image fill in the same layer and set that fill's blend mode to Color.

GIMP

  1. Open the PNG.
  2. In the Layers panel, click Lock alpha channel.
  3. Choose a foreground colour and use Edit → Fill with FG Color.

Canva

Canva can only change the colour of SVG elements, not uploaded PNGs. Two workarounds:

  • Duotone effect: select the PNG, choose Edit, then Duotone, and set both highlight and shadow to your target colour. For a single-colour icon, this produces a solid recolour.
  • Adjust: for small shifts, use Edit → Adjust and change the Tint or Hue (where available on your plan).

If you recolour icons often, a free SVG version of the same icon will be easier in Canva.

Multi-colour illustrations: shift the palette

Hue/Saturation in Photoshop or Photopea

  1. Go to Image → Adjustments → Hue/Saturation (or add a Hue/Saturation adjustment layer).
  2. Drag Hue to rotate every colour around the colour wheel.
  3. To change only one colour, open the drop-down that says Master and choose, for example, Reds. Now only the red parts change.

Replace a single colour

Image → Adjustments → Replace Color lets you click on a colour in the image and set a new hue, saturation and lightness for just that colour. Increase Fuzziness to include similar shades.

GIMP

Colors → Hue-Saturation works like Photoshop's version, including the option to adjust one colour range at a time. Colors → Map → Rotate Colors is useful for swapping one hue for another.

Photographs: small, careful shifts

Large colour changes on photos rarely look natural, because real objects have reflections, shadows and subtle colour variation. For good results:

  • Keep the change within a family: red to pink, orange to yellow, blue to purple.
  • Lower the saturation a little after shifting the hue; recoloured areas often look too vivid.
  • Use a mask so only the object you want changes, not the plate under it or the skin around it.

For flowers and plants, a small hue shift is often enough to match a wedding palette or seasonal theme. Browse options in our flowers and plants collection.

PowerPoint and Google Slides

PowerPoint: select the image, then Picture Format → Color. Recolor offers preset tints, and More Variations lets you pick any colour. This works best on single-colour icons and line art.

Google Slides: select the image, choose Format options → Recolor and pick one of the presets. The choice of colours is limited, so match your theme colours in advance if possible.

See our guide to transparent PNGs in PowerPoint and Google Slides for more.

On websites: CSS filters and masks

For simple icons on a website, you can recolour with CSS instead of creating new files:

.icon {
  /* turns a black icon into a mid-grey */
  filter: invert(45%);
}

For an exact brand colour, a CSS mask is more reliable:

.icon {
  width: 32px;
  height: 32px;
  background-color: #b3173b;
  -webkit-mask: url(icon.png) no-repeat center / contain;
  mask: url(icon.png) no-repeat center / contain;
}

The PNG's transparency becomes the shape, and the background colour becomes the icon colour. Our guide to transparent PNGs on websites covers more techniques.

Things to keep in mind

  • Keep the original. Always recolour a copy, so you can start again.
  • Check the edges. Recolouring can make faint halos more visible. See removing white edges.
  • Respect logos. Changing the colours of a company's logo is usually against its brand guidelines and can be misleading. Use logos in their official colours.
  • Export as PNG. Saving as JPG would replace the transparent background with white.

With these methods, one good icon set or illustration can be adapted to any brand or theme in minutes.

Keep reading