html - Applying mix-blend-mode with a grayscale

Question

Is there a way to apply mix-blend-mode: difference with a grayscale?

The background can be any color and difference gives me the opposite text color, that can be ugly.

This snippet shows the problem:

.color {
  width: 100px
  height: 20px;
  padding: 5px;
}

.color > span {
  mix-blend-mode: difference;
  color: white;
}

<div class="color" style="background: #fff">
  <span>good</span>
</div>
<div class="color" style="background: #000">
  <span>good</span>
</div>
<div class="color" style="background: #0f0">
  <span>should be black or dark grey</span>
</div>
<div class="color" style="background: #00f">
  <span>should be white or light grey</span>
</div>
<div class="color" style="background: #f00">
  <span>should be white or light grey</span>
</div>

question from:https://stackoverflow.com/questions/65920291/applying-mix-blend-mode-with-a-grayscale

Answer 1

Here is an approximation using filter. Not sure if it will cover all the cases.

.color {
  padding: 5px;
  background: currentColor;
}

.color>span {
  filter: invert(1)  saturate(0);
  font-weight: bold;
  font-size: 23px;
}

<div class="color" style="color: #fff">
  <span>good</span>
</div>
<div class="color" style="color: #000">
  <span>good</span>
</div>
<div class="color" style="color: #0f0">
  <span>should be black or dark grey</span>
</div>
<div class="color" style="color: #00f">
  <span>should be white or light grey</span>
</div>
<div class="color" style="color: #f00">
  <span>should be white or light grey</span>
</div>