How to Recolor a Logo

1. Find a logo file with a transparent background. In order of preference, the file formats you will be looking for are listed below:
   • SVG/EPS (will be the highest quality)
   • PNG
   • WebP
2. Name the file so it is safe for web use. This means no spaces, and ideally, no symbols. Example: company-name-logo.png
3. If the file is an SVG or EPS file:
   • Open the file in Illustrator
   • Crop the whitespace away from around the logo
   • Select all color filled areas
   • Refill the color in those areas to your desired Hex code/RGB/CMYK colour
     • You may find that you will need to undo this and delete some filled areas (usually white in the original file) to allow for transparency aiding legibility
   • Export for screen to SVG or PNG format
   • Compress and/or resize the image so the file size is larger than around 10kb
4. If the file is a PNG or transparent WebP file:
   • Open the file in Photoshop
   • Crop the whitespace away from around the logo
   • Double click on the layer containing the logo artwork
   • Add a colour overlay to your desired Hex code/RGB/CMYK color
     • You may find that you will need to undo this and delete some filled areas (usually white in the original file) to allow for transparency aiding legibility
   • Save the file
   • Compress and/or resize the image so the file size is larger than around 10kb

If you found this post helpful, consider subscribing to our newsletter for monthly updates and posts about digital design and development.