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

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);
}

Please add the css 

filter: brightness(0) invert(1);

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


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" />

Tags:

Css

Colors

Png

Filter

Recent Posts