Use CSS3 Filter to change specific color

Question

Currently I have an a .png-image consisting only of the two colors white (#FFFFFF) and a reddish color (#EA3D05) and I'd like to change the color of this image using CSS filters. In particular I need to replace the white color with black (#000000) and keep the red color as is.

My current approach is to use

filter: invert(100%);

This will use the color the white pixels black, but affects the red color as well. I thought that now it would be possible to change the (now blue pixels) back to red (#EA3D05), since the other pixels are black. Is there any way to achieve this?

Answer 1

You can consider the use of filter and mix-blend-mode to approximate this:

.box {
  width: 200px;
  height: 200px;
  background: radial-gradient(#EA3D05 50%, #fff 50%);
  border: 1px solid #EA3D05;
}

.wrapper {
  display: inline-block;
  position: relative;
}

.wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* adjust below until you get closer */
  background: #EA3D05;
  mix-blend-mode: hue;
}

<p>Original image</p>
<div class="box"></div>

<p>New image</p>
<div class="wrapper">
  <div class="box" style="filter:invert(100%);"></div>
</div>