How to make PNG images all the same color and tone?

Question

css

There is a set of logos in PNG, the logos are all colored, you need to do everything in one color and one tone, as in the picture.
What is the way to do it?
The images are already inserted into the site as they are. There are no CSS filters.

Answer 1

Color Overlay effect in Photoshop

Answer 2

On pure css. All 3 images have the same source.
https://jsfiddle.net/f3hc6wwg/4/

Answer 3

Cut each png logo from the background (if there is a background) and add a clipping mask with the desired color on top.

Answer 4

Most likely you have them as a sprite.
1. Open Photoshop
2. Images -> Mode -> Greyscale
3. Images -> Adjustments -> Levels

Answer 5

jsfiddle

.contrast {
  -webkit-filter: grayscale(100%) brightness(60%) contrast(2000%) opacity(50%);
  filter: grayscale(100%) brightness(60%) contrast(2000%) opacity(50%);
}

Anti-aliasing is lost, but otherwise without changing the picture in any way.