A client wants certain background images on his site to be colourised automatically based on a colour he chooses in the backend. For example, in the settings he'd like to choose, say, 'blue', then have certain background images on the site be given a blue tone like this:

I can use JS with CSS variables to send his chosen colour from config to a CSS file, but how to use that colour in CSS is the problem...

My initial thought was to just overlay a semi-transparent 'blue' element over the background image to colourise it, then add the page content on top of that (using z-index, etc.). However he wants to use transparent images, and so doing that would result in something like this:

So then I looked around a bit and finally found CSS 'filter' effects. I can use filter: hue-rotate(180deg); to colourise images, even transparent PNGs. This works much better than overlaying a coloured element, however from what I understand you can't specify a colour to use, just an angle (degrees), which means different images are colourised differently (e.g. one image might be coloured blue while another might be coloured purple), such as this example I played with:

(The images on the left are the originals, while the ones on the right have been colourised (with the same value, 190deg), however one's purple and the other's blue(ish))

Is there a solution to this that allows colourising transparent PNGs (without ugly boxes) and does so consistently (so choosing 'blue' will colour all images the same tone of blue)?

Comments

I haven't tested that particular feature much, but it might be worth checking if the Image Effects module could be used to colorize transparent PNGs via image styles.

Thanks for the suggestion, but it doesn't look like it from what I can see...

Actually you're right! As you pointed out to me in Zulip, there's a separate 'Image Effects Color Actions' sub-module I needed to enable which provides effects such as 'Color multiply'. That seems to do the trick!