CODEWITHSUNDEEP
htmlcsscolors
Rob
Rob

Reputation: 11368

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

Upvotes: 16

Views: 45760

Answers (3)

Michael Mullany
Michael Mullany

Reputation: 31715

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" color-interpolation-filters="sRGB">
<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>

Upvotes: 11

Omar Mohmed
Omar Mohmed

Reputation: 9

shorter code will be:

filter: brightness(1) invert(0);

Upvotes: 0

Rounin
Rounin

Reputation: 29463

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" />

Upvotes: 48

Related Questions