Articles in this section

See more

Replacing Color on Transparent PNGs

2022-07-14 01:36:59 UTC

Overview

Using the correct parameters, it is possible to create multiple color versions of the same asset on the fly. For example, having a logo that needs to be in different colors for holidays or events is made simple using the proper parameters.

myLogo.png
Using a combination of blend and mask, it's possible to overlay a color on top of an image. This has the effect of filling certain areas of an image with color: See below:
Image URL: https://vuaws.imgix.net/myLogo.png?w=600&blend64=b3Jhbmdl&blend-mode=darken&mask=http%3A%2F%2Fvuaws.imgix.net%2FmyLogo.png

Considerations

  • The parameters for blend, blend-mode, and mask are required in order for it to work.
    • Blend allows you to select the color you want the image to show up as
    • Blend-mode=darken will compare the white image to the color of your blend and choose the darker color to display. You can use other blend-mode options for different effects. More information for the blend-mode can be found here.
    • Mask allows the color to only apply to the image and not to the background. Documentation for using the mask parameter can be found here. This parameter is essential for blend-mode to work properly.
  • The image must be white on a transparent background in order for this method to work so that the background does not change colors in addition to the logo.

Related articles