🖼【CSS】filterのみを使用して黒い画像を任意の色に変更する

やりたいこと

黒のみで書かれている下記png透過画像をcssのみを利用して色変更させたい

やったこと

filterでがんばってもらう

color.html

<hr>

<div>
    <img src="/img/test.png"/>元画像
</div>

<hr>

<div class="red">
    <img src="/img/test.png"/>赤
</div>

<hr>

<div class="green">
    <img src="/img/test.png"/>緑
</div>

<hr>

<div class="blue">
    <img src="/img/test.png"/>青
</div>

<hr>

color.css

.red {
    filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}

.green {
    filter: invert(17%) sepia(91%) saturate(7085%) hue-rotate(128deg) brightness(100%) contrast(106%);
}

.blue {
    filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%);
}

その他の色達

other.css

白
.white {
    filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

灰色
.grey {
    filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
}

黄色
.yellow {
    filter: invert(81%) sepia(81%) saturate(633%) hue-rotate(359deg) brightness(106%) contrast(105%);
}

オレンジ
.orange {
    filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

水色
.aqua {
    filter: invert(88%) sepia(100%) saturate(2929%) hue-rotate(104deg) brightness(99%) contrast(104%);
}

紫
.purple {
    filter: invert(11%) sepia(71%) saturate(5170%) hue-rotate(293deg) brightness(87%) contrast(111%);
}

結果

このCSSだけで別の色の画像データを用意しなくても色々変えられます

また、filterは縦並びにすると効かなくなるので注意です

あとdivのalign="center"は非推奨なので消しました