'Is it possible to change multiple png images to 'harmonise' their colour scheme?

I have a bunch of company logos which are all png images, they're all different colours.

What I'm looking to do is apply the same css code to all images to harmonise their colours. E.g. if you go to the Nextjs website and scroll down, they have a bunch of company logos which are all in greyscale. I'm looking to build something similar but with a slightly bluer tone.

My feeling is that this is only possible with svg images, is that correct or is there a way to make it work with png images?

Thanks

css


Solution 1:[1]

Using the filter property the following way should solve this:

img {
  filter: sepia(100%) hue-rotate(180deg) saturate(300%);
}

Solution 2:[2]

You can use CSS filte: grayscale(1) on any image.

Example:

img {
  filter: grayscale(1);
}

body {
  text-align: center;
  font: .85rem sans-serif
}

img {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
  transition: filter 300ms;
  cursor: pointer;
}

img:hover {
  filter: grayscale(0);
}
<img src="https://i.pinimg.com/originals/27/36/37/273637378528968325350954c0276439.png" />
<img src="https://thumbs.dreamstime.com/b/logo-ferrari-car-color-vector-format-aviable-ai-logo-ferrari-124870830.jpg" />
<img src="https://www.computerome.dk/download/attachments/704675874/stack.png?version=1&modificationDate=1618915111145&api=v2" />
<p>Hover to remove filter</p>

Solution 3:[3]

You could try increasing the contrast (if needed) of a grayscaled png and then use mix-blend-mode on the img's container background color.

The snippet below gives this result on the Stackoverflow logo:

enter image description here

.container {
  background: #79a5b9;
  display: inline-block;
}

img {
  filter: grayscale(1) contrast(2);
  mix-blend-mode: screen;
}
<div class="container">
  <img src="https://i.stack.imgur.com/vDi0P.png">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ralphwayTOW
Solution 2 Jakob E
Solution 3 A Haworth

Related Questions