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

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

CodePudding user response：

Using the filter property the following way should solve this:

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

CodePudding user response：

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>

CodePudding user response：

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:

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

img {
  filter: grayscale(1) contrast(2);
  mix-blend-mode: screen;
}

<div >
  <img src="https://i.stack.imgur.com/vDi0P.png">
</div>