'css3 grey image to blue color using filters?

I'm trying to get a grey image to a more blue tone, really no idea how to set the filters for this or if it's possible.

The image only has one color in #cacaca, the rest transparent. I'm trying to do some overlay with the same image so that it only highlights those colored parts and not the transparent areas.

Been playing with some of these but not much success, no idea what I'm doing when it comes to colors.

.saturate {-webkit-filter: saturate(3); filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px); filter: blur(3px);}
.invert {-webkit-filter: invert(100%); filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);}
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}
htmlcsscolors


Solution 1:[1]

It's possible to set colors more directly via the SVG filter trapdoor.

img {
width: 107px;
height: 180px;
}

img.filtered {
filter: url(#blue-wash);
}
<img src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<img class="filtered" src="https://cdn.pixabay.com/photo/2015/12/16/19/16/png-1096410_960_720.png" alt="I am a plant" />

<svg>
<filter id="blue-wash">
<feColorMatrix type="matrix" values="0.2 0.2 0.2 0 0   0.3 0.3 0.3 0 0  1 1 1 0 0  0 0 0 1 0"/>
</filter>
</svg>

Solution 2:[2]

shorter code will be:

filter: brightness(1) invert(0);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michael Mullany
Solution 2 Syscall

Related Questions