Silhouette with CSS filters

Question

I have a list of organization logos on a web page. Most of them use a couple of different colors. I would like to show the silhouette of the logos, and only reveal the real colors on hover.

body {
  background: deeppink;
}

img {
  filter: brightness(0) invert(1);
}

img:hover {
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />

I can make the logos white with the code above, but I would like to make them pink. And not just any pink, I would like to use a specific color code.

I have tried to add the hue-rotate() function, but the logos are still white. I guess it's because of the brightness level.

Any ideas?

EDIT: More precise code

Answer 1

It's not an optimal solution, but adding opacity will work, if the background itself is the same color as you want for the silhouette.

body {
  background: deeppink;
}

img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

img:hover {
  filter: none;
  opacity: 1;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/240px-Stack_Overflow_icon.svg.png" />