hue-rotate()滤镜会影响所有颜色，因此不会将全色图像转换为单色图像。相反，它将移动色轮周围的所有颜色。

但是，您可以通过转换为灰度，添加棕褐色，然后旋转色调来破解解决方案这使图像看起来像单一色调的绿色阴影：

filter: grayscale(100%) sepia(100%) hue-rotate(90deg);

如果你关心处理矢量作品，比如你会经常使用的图标，你可以考虑将它转换为SVG，然后你可以用普通的css给它上色。https://icomoon.io可以帮助解决这个问题。

添加contrast(0)作为第一步将使图标的颜色变平为均匀的灰色，这是我的目的所需要的。我还需要摆弄brightness和saturate来达到我的目标颜色。

filter: contrast(0) sepia(100%) hue-rotate(116deg) brightness(1.4) saturate(0.28);

Codepen example

如果你从CSS中引用SVG过滤器，那么你可以得到一个特定的颜色。下面是SVG过滤器片段。对于特定颜色，请将.7/.4/.5替换为RGB值的单位值。

<filter id="colorme" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="0 0 0 0 .7  0 0 0 0 .4  0 0 0 0 .5  0 0 0 1 0"/>
</filter>

hue-rotate（）是一个非常受损的过滤器，因为它不在HSL空间中运行。这是一种RGB近似，往往会严重削减饱和色。

这里有一个**online CSS generator to convert to a target color**。
例如，如果您输入#CC0000，它将给予您：

filter: invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

它还将对结果的准确性进行评分。你可以继续尝试，直到你得到一个完美的分数。
我相信它假设你的形象是黑色的。如果不是，要将图像变为黑色，请首先在前面加上以下内容：

brightness(0) saturate(100%)

因此，使用前面的例子，最终的解决方案（如果您的图像不是黑色的）将是：

filter: brightness(0) saturate(100%) invert(8%) sepia(97%) saturate(7488%) hue-rotate(12deg) brightness(92%) contrast(114%);

现在，如果有人能写一个npm包来动态地为你做这件事就好了！