is it possible to change color of a black png image using css only?

Question

I have black color png with transparent background.

I am trying to change color using hue-rotate(180deg) and invert(100%) CSS but failed.

In the case of other color png, all is good.

.huerotate{-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
<img src="blackXXX.png" class="huerotate"/>

Is it possible or impossible?

Answer 1

Yes, you can do it... the black is tricky.

Here's how:

background: url(black.png);
filter: brightness(0.9) invert(.7) sepia(.5) hue-rotate(100deg) saturate(200%);

This makes black -> blue.