Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 grey image to blue color using filters?

Tags:

html

css

colors

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%);}
like image 301
Rob Avatar asked May 17 '17 11:05

Rob


1 Answers

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" />
like image 167
Rounin - Glory to UKRAINE Avatar answered Nov 05 '22 23:11

Rounin - Glory to UKRAINE