I already know that this could be done with other programs, but it has caused me curiosity in CSS.
As you will see, img-amarillo has the same filter as img2-amarillo , however in the first one it does not change color and in the second one, why does this happen?
(the values I put in the filter is the HSL of the yellow color)
#img
{background-image: url(http://pluspng.com/img-png/vector-icon-png-free-vector-icons-in-svg-psd-png-eps-format-or-as-icon-font-thousands-of-free-icons-in-the-largest-database-of-free-vector-icons-812.png);
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img-amarillo
{background-image: url(http://pluspng.com/img-png/vector-icon-png-free-vector-icons-in-svg-psd-png-eps-format-or-as-icon-font-thousands-of-free-icons-in-the-largest-database-of-free-vector-icons-812.png);
width: 200px;
height: 200px;
filter: hue-rotate(60deg) brightness(500%) saturate(100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img2
{background-image: url(https://i.stack.imgur.com/fXKdt.png);
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-size: contain;
background-position: center
}
#img2-amarillo
{background-image: url(https://i.stack.imgur.com/fXKdt.png);
width: 200px;
height: 200px;
filter: hue-rotate(60deg) brightness(500%) saturate(100%);
background-repeat: no-repeat;
background-size: contain;
background-position: center
}<div id="img"></div>
<div id="img-amarillo"></div>
<div id="img2"></div>
<div id="img2-amarillo"></div>'
