Как через css изменить цвет png изображения?

Пример смены цветов на CSS:

@keyframes hue { 
    from { 
        filter: hue-rotate(0deg); 
    } 
    to { 
        filter: hue-rotate(-360deg); 
    } 
} 
 
.hue { 
    animation: hue 10s infinite linear; 
 }

<img class="hue" src="https://vk.com/images/icons/head_icons.png">

Вы можете использовать css-фильтры:

• grayscale конвертирует цвета в ч/б
• sepia создает эффект сепии
• saturate задает насыщенность
• hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg)
• invert инвертирует цвета
• opacity задает прозрачность элемента
• brightness изменяет яркость изображения
• contrast изменяет контрастность изображения
• blur создает эффект размытости
• drop-shadow создает тень

Примечание: фильтры можно комбинировать между собой

.bg{ 
  background-color: #8fbd35; 
  padding: 20px; 
  } 
 
.fl{ 
  filter: invert(1); 
}

<div class="bg"> 
  <img src="https://vk.com/images/icons/head_icons.png"> 
</div> 
<div class="bg"> 
  <img class="fl" src="https://vk.com/images/icons/head_icons.png"> 
</div>

Материал для прочтения: habrahabr

Демо: демо

Если фон прозрачный, то можно выкрутить картинке яркость. Например:

filter: brightness(10);

Но остаётся некоторая неуверенность, до какого же уровня выкручивать, чтобы наверняка исчезли все оттенки, кроме белого. А вот brightness(0) даст полностью чёрную картинку, которую легко инвертировать:

filter: brightness(0) invert(1);

http://codepen.io/glebkema/pen/dNKGXZ

body { background: #ccc; } 
img { display: block; }

<img alt="" src="//i.stack.imgur.com/R8YjS.png"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(5);"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(10);"> 
<img alt="" src="//i.stack.imgur.com/R8YjS.png" style="filter: brightness(0) invert(1);">