3

Is any way to turn an image "bluescale" or "greenscale" or any other color? Just like the filter in css ? Or maybe combination of filters ?

filter:grayscale(100%);

Thanks!

Found a solution, but its not "user friendly" for a non technical person : css3 grey image to blue color using filters?

I i;m hoping for a solution where you can give a "rgb" for the color you want to turn to.

Emanuel
  • 359
  • 4
  • 21
  • Possible duplicate of [What is the mathematics behind the CSS filters?](https://stackoverflow.com/questions/36617218/what-is-the-mathematics-behind-the-css-filters) – Sunny Patel Sep 12 '18 at 18:59
  • 2
    The solution suggested in the duplicate question you linked may be as easy as it gets (if anything, you may have to complicate things a bit more and add `grayscale`, `contrast`, and `brightness` to the `sepia`, `hue-rotate`, and `saturate` filters in order to really get the exact shade of blue you are after). It might clear things up a little bit if you read up on [how hue rotation works](https://www.quackit.com/css/functions/css_hue-rotate_function.cfm). – benvc Sep 12 '18 at 19:33
  • This is easy to do if you are comfortable using an inline SVG & a feColorMatrix filter. – Michael Mullany Sep 18 '18 at 23:12

1 Answers1

4

You can get this effect easily with blend modes.

Set a background image of the color that you want in front of the image

And set blend-mode: color;

Support is not perfect, but filters have pretty much the same problem

.test {
    width : 200px;
    height: 200px;
    background-image: linear-gradient(blue, blue), url("https://picsum.photos/200/200");
    background-blend-mode: color;
}
<div class="test"></div>
vals
  • 61,425
  • 11
  • 89
  • 138