CSS - Add Color to Black & White PNG Image Using a Filter

Question

Is it possible in CSS to add color to a black & white image using a filter? I'm talking about using filters like it's possible in Photoshop, and an even better example would be the ones in Microsoft PowerPoint.

What I'm trying to do is this: I have an image file of a black icon. I want to add a filter to it such that everything in the image (the background is transparent) will have the color I choose by using the filter, such that I'd be able to have the icon in whatever color I want. Like I said in the title, it's a PNG image, so as far as I know, I can't use SVG filters.

How can I do this? I'm trying to write a theme for a website using the original icons, and I'm stuck on this.

Update: I want to use the original PNG images. I'm not going to replace them with SVGs, or pre-edited PNGs.

Thanks a lot in advance!

Verdha

You can do it using CSS filters, but it’s a really bad idea. Poor performance, relatively low browser support, doesn’t necessarily work well with antialiasing. – Commiserate

How can I do it? I tried playing with filters, but I didn't get something that works. I really am trying to use the original icons. I don't want to use other icons. – Spanner

Convert the original icons to SVGs then? You can use them inline too. – Commiserate

You could use an svg spritesheet along with <symbol> tags for svg icons. More info here – Siffre

I don't want to. I'm actually writing a theme for Facebook (executed using Stylish). I could replace the icons entirely, and then use SVG icons instead or PNGs that I've edited in advance, but that would require me to host those images somewhere, and I don't want to do that. – Spanner

See the rest of my comment, where I said you could use them inline too. (Namely as base64 data URIs.) – Commiserate

Then add them inline, it's more markup but you would be trading it for the CSS manipulation they provide. – Siffre

@Ryan , "them" = "SVGs", or "the original PNGs"? – Spanner

@Ricky_Ruiz - I can't change the original mark-up. Only the CSS. – Spanner

@GalGrünfeld: SVGs. Make your own SVGs out of the PNGs, convert those to base64, put them inline in your CSS. – Commiserate

Answer 1

You can do it with CSS filters, though I wouldn’t recommend that at all:

.colorizable {
    filter:
        /* for demonstration purposes; originals not entirely black */
        contrast(1000%)
        /* black to white */
        invert(100%)
        /* white to off-white */
        sepia(100%)
        /* off-white to yellow */
        saturate(10000%)
        /* do whatever you want with yellow */
        hue-rotate(90deg);
}

.example-clip {
    display: block;
    height: 20px;
    margin: 1em;
    object-fit: none;
    object-position: 0 0;
    width: 300px;
}

.original {
    filter: contrast(1000%);
}

body {
    background: #333;
}

<img class="colorizable example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />
<img class="original example-clip" src="https://cdn.sstatic.net/Sites/stackoverflow/img/wmd-buttons.svg" />

Commiserate

Great, it's exactly what I was looking for! I'll play with the values to get the colors I want. – Spanner

Answer 2

Please add the css

filter: brightness(0) invert(1);

to the image it will work, change the color to white

Virgenvirgie

This is the best tip as other filters do NOTHING to a black part of PNG (as with any B&W image). Thanks. – Roye

Answer 3

sepia() adds yellow color to b/w and other filters will work with that color now.

.foo {
    filter: sepia(1) saturate(5) brightness(0.5) hue-rotate(135deg);
}

Dionne