mah*_*off 10 css colors css3 css-filters
以下CSS过滤器：
filter: brightness(0) invert(1);
使元素变为全白（源）。整洁，但是有没有办法使它们成为另一种颜色，例如蓝色？这适用于透明背景（例如图标）的情况。我想使图标为一种任意颜色。
这是一个在线 CSS 生成器，用于转换为目标颜色。
例如，如果您输入#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 包来动态地为您执行此操作就好了！
该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);
如果从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近似值，往往会严重剪切饱和的颜色。