How do I change an image (icon's) color in css

Question

I have some images representing icons that consists of blue signs and transparent background. I display them using css:

.icon {
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
}

My icon looks like this one: https://cdn2.iconfinder.com/data/icons/large-svg-icons-part-3/512/zoom_search_find_magnifying_glass-256.png

I want to be able to change the color of the blue using css. I tried to use CSS3's filter function.

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: http://lodev.org/cgtutor/images/hslhuecircle.jpg .

I'm using this filter function:

filter: hue-rotate(220deg) saturate(100);

Where 220deg is the int value of the hue. So the hue (initially a float value) aproximated up is 220.

Take example red: #ff0000 The hue details are:

array(4) {
  ["hue"]=>
  int(0)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(0)
}

So the css becomes:

.icon {
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center;
    filter: hue-rotate(0deg) saturate(100);
}

But in this case, the blue becomes #9AF8FF (which is not red).

In order to obtain red, I should use:

filter: hue-rotate(195deg) saturate(100);

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: http://lodev.org/cgtutor/images/hslhuecircle.jpg .

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.

I have an application where users can select the desired color, the only problem is with existing image icons.

Any help will be great, anticipate thanks!

Answer 1

When I wrote the question I found a possible solution. In my case, the results were reversed.

For red, #ff0000 I obtained 0 degrees. I realized that with css3's filter hue-rotate, the red is not at 0, but it starts at 180. So for each hue/degree value that I obtain, I add 180. In this way, I can obtain the desired color.

After this change, the hsl:

array(4) {
  ["hue"]=>
  int(0)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(0)
}

become:

array(4) {
  ["hue"]=>
  int(180)
  ["saturation"]=>
  int(100)
  ["luminance"]=>
  float(50)
  ["degrees"]=>
  int(180)
}

I tried it for green and other colors and it works well. If you have a better idea to change the image color with CSS, one that doesn't use the filter function "hue-rotate", I'll be glad to hear about it.

EDIT

I found the solution.

1) I'm using the solution explained above (I add 180 to my degrees).

2) I'm using brightness filter also

So My filter looks like:

filter: hue-rotate(350deg) saturate(100) brightness(1);

This filter changes the icon's color to this color: #00FFFF . So the solution work 100%. I'm sending color code and brightness and I dynamically calculate the filter values. For darker colors use a lower value for brightness (under 0.5) and for brighter colors use values above 0.5.