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%);}
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With