filterでイラストをベタ塗りにする

こちらの記事を見た時に、イラストでも同じことができるかなと、次のようなコードを書きました。

img {
  /* 赤くする */
  filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}

失敗。

よく見たら「黒い画像を」って書いてありました。

なので画像を黒くしてから、ラッパーの方に適用させます。

.wrapper {
  /* 赤くする */
  filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);

}
img {
  /* 黒くする */
  filter: brightness(0);
}

 <div class="wrapper">
   <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png" alt="">
 </div>

OK。

ちなみにこんなツールもありました
https://codepen.io/sosuke/pen/Pjoqqp
このツールを使えば好きな色にすることができます。