Search code examples
htmlcsscolors

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%);}
Solution

  • You can use a combination of:

    • filter: sepia()
    • filter: hue-rotate()
    • filter: saturate()

    Working Example:

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

img.filtered {
filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}
    <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" />