title: How do I change an image (icon's) color in css
body: <p>I have some images representing icons that consists of blue signs and transparent background. I display them using css:</p>
  
  <pre><code>.icon {
      background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
  }
  </code></pre>
  
  <p>My icon looks like this one: <a href="https://cdn2.iconfinder.com/data/icons/large-svg-icons-part-3/512/zoom_search_find_magnifying_glass-256.png" rel="nofollow noreferrer">https://cdn2.iconfinder.com/data/icons/large-svg-icons-part-3/512/zoom_search_find_magnifying_glass-256.png</a></p>
  
  <p>I want to be able to change the color of the blue using css. I tried to use CSS3's filter function.</p>
  
  <p>The idea is that I have the hex code and I transform it to RGB and later HSL (hue, saturation and luminance). In the end I'll have for each color a value between 0 and 360 (a degree). See for example this image: <a href="http://lodev.org/cgtutor/images/hslhuecircle.jpg" rel="nofollow noreferrer">http://lodev.org/cgtutor/images/hslhuecircle.jpg</a> .</p>
  
  <p>I'm using this filter function:</p>
  
  <pre><code>filter: hue-rotate(220deg) saturate(100);
  </code></pre>
  
  <p>Where 220deg is the int value of the hue. So the hue (initially a float value) aproximated up is 220.</p>
  
  <p>Take example red: #ff0000
  The hue details are:</p>
  
  <pre><code>array(4) {
    ["hue"]=&gt;
    int(0)
    ["saturation"]=&gt;
    int(100)
    ["luminance"]=&gt;
    float(50)
    ["degrees"]=&gt;
    int(0)
  }
  </code></pre>
  
  <p>So the css becomes:</p>
  
  <pre><code>.icon {
      background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
      filter: hue-rotate(0deg) saturate(100);
  }
  </code></pre>
  
  <p>But in this case, the blue becomes #9AF8FF (which is not red).</p>
  
  <p>In order to obtain red, I should use: </p>
  
  <pre><code>filter: hue-rotate(195deg) saturate(100);
  </code></pre>
  
  <p>The hue-rotate values can be between 0 and 360, just like degrees. In my case the results are inversed, instead of obtaining red for 0degrees, I obtain the value that can be find on the following image at 195 degrees: <a href="http://lodev.org/cgtutor/images/hslhuecircle.jpg" rel="nofollow noreferrer">http://lodev.org/cgtutor/images/hslhuecircle.jpg</a> .</p>
  
  <p>Is there any css filter or other solution that can help me to change the image color using css? I played with other CSS3 filters but I couldn't change the color to the desired one.</p>
  
  <p>I have an application where users can select the desired color, the only problem is with existing image icons. </p>
  
  <p>Any help will be great, anticipate thanks!</p>