16

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%);}
Improve this question
2
  • what output do you need? Can you share the image ouput?
    – Sahil Dhir
    Commented May 17, 2017 at 11:34
  • If you can use html5 canvas, then you can loop through each image pixel and replace its colors.
    – Mohit Bhardwaj
    Commented May 17, 2017 at 11:46

3 Answers 3

Reset to default
46

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

Improve this answer
5
  • Doesn't this just work because the original image actually has color?
    – roberrrt-s
    Commented May 17, 2017 at 12:15
  • 2
    Ah, no it doesn't, via tested with xzdl43v0mdf2m45tz2aj7kkv35.wpengine.netdna-cdn.com/wp-content/…
    – roberrrt-s
    Commented May 17, 2017 at 12:17
  • 7
    The trick is to use the sepia() filter to ensure that an otherwise grayscale picture does have color. And then the hue-rotate() filter will work.
    – Rounin
    Commented May 17, 2017 at 12:31
  • 1
    Managed to get this with the greyscale by removing some of the brightness for a darker blue filter: sepia(100%) hue-rotate(140deg) brightness(60%) saturate(500%);
    – Rob
    Commented May 17, 2017 at 16:38
  • 1
    for a bit lighter blue i found that one good: filter:sepia(27%) hue-rotate(184deg) saturate(9);
    – Thomas Fellinger
    Commented Mar 18, 2021 at 7:47
10

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>

Improve this answer
2
  • How does this matrix work? I would like to allow the use choose their own color and I'm happy to use whatever format is needed
    – aggregate1166877
    Commented Oct 16, 2022 at 11:37
  • 1
    The values are the unitized R (0.2) G (0.3) and B(1.0) values that you want to convert the grey image to - so that would be equivalent to roughly rgb(51, 76, 255): aka 255*.02 ; 255*.02; 255*1.0
    – Michael Mullany
    Commented Oct 16, 2022 at 16:38
0

shorter code will be:

filter: brightness(1) invert(0);
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.