CODEWITHSUNDEEP
css
David Fox
David Fox

Reputation: 105

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

Upvotes: 0

Views: 154

Answers (3)

A Haworth
A Haworth

Reputation: 36564

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.sstatic.net/vDi0P.png">
</div>

Upvotes: 0

Jakob E
Jakob E

Reputation: 4936

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>

Upvotes: 0

ralphwayTOW
ralphwayTOW

Reputation: 108

Using the filter property the following way should solve this:

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

Upvotes: 1

Related Questions