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)?