How to calculate required hue-rotate to generate specific colour?

Question

I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:

filter: sepi         


        

Answer 1

If svg are being used then ...

You can open svg files with some text editor copy and paste to html file then change path color as required.

In below example code... I just changed the path color of center ring. Hope this helps..

        var imgg =document.getElementById("path");
        imgg.style="fill:#424242";
   

For background image

        var myimg='url(\'data:image/svg+xml;utf8, \')';
        
        document.getElementById("mydiv").style.backgroundImage =myimg ;  
        
        
        
        //changing color according to theme .. new theme color :#424242
        myimg=myimg.replace(/#91DC5A/g,"#424242");
       document.getElementById("mydiv").style.backgroundImage =myimg ; 

             div {

  background-size:5em;
  width:5em;
  height:5em;
  
}

    
    


Target color