所以，我要研究下，有没有使用简单的的赋色技术；以及研究下有没有滤镜以外的其它技术可以修改小图标颜色！
结果，还真发现了不少好玩的东西。
先从简单的说起。
有下面这个图标：
如果要变成纯黑色，或者纯白色，则可以这样：
/*图标变黑色*/.black{filter:brightness(0);}/*图标变白色*/.white{filter:brightness(100);}也就是使用亮度滤镜，要想变成黑色，很简单，设置亮度为0即可，保证黑如焦炭；如果想要变成白色，则亮度设成很大很大的值就好了，例如100，保证白如奶昔。
实现后的效果如下截图：
黑白色确实简单，但实际开发时候，往往是黑色图标变成彩色，那可该怎么办呢？
可以实现！
CSS3filter滤镜有调整色调的hue-rotate，有调整饱和度的saturate滤镜，有调整亮度的brightness滤镜，有调整对比对的contrast滤镜等，把这些滤镜进行组合，进行色值变换，总会得到我们希望的颜色的。
关键如何变呢？
使用和转换示意如下GIF：
第一个输入框输入原始的图标颜色，下面输入框输入图片目标颜色，点击“转换”按钮，对应的filterCSS代码就生成了。
由于部分滤镜渲染并非是线性的，因此最终转化后的颜色并非100%完全一致，可能会出现误差。
请不要担心，再次点击“转换”按钮，尝试其他的滤镜组合①，找到最精确的那个filter代码。
举例说明例如，原始色是：#000000，目标色非web安全色，是#f4615c。
填入到工具对应输入框，点击“转换”按钮，结果如下：
可以看到色值误差较大，请不要担心，再多点几次“转换”按钮，尽量找到误差值在2以内的色值，如下GIF示意：
虽然最终色值会有偏差（越远离安全色出现偏差概率越大），但对于用户而言，根本没有影响，华为手机边缘蓝光不也照样使用。对于设计师，也完全不要担心，放心使用，他们是根本无法区分屏幕上#f5615c和设计稿中#f4615c和的差别的。即使是全球几个罕见4色视觉人也无法区分，毕竟是不同设备的显示器。
同一色值可以有多种滤镜组合呈现的，例如黑色转白色，可以亮度滤镜，也可以直接反相滤镜。每次点击工具页的“转换”按钮，都会会尝试一种匹配。其底层是不同视觉系数的计算值的相互组合，类似计算灰度有下面两种算法：
还是这个图标：
下面要变成#f4615c色值图标。
原始值是#2486ff，目标值是#f4615c，借助工具，得到如下CSS：
filter:invert(52%)sepia(82%)saturate(2494%)hue-rotate(327deg)brightness(104%)contrast(92%);结果如下截图：
这个是相比上面的滤镜更好的实现方法，性能要比滤镜好，色值定义也更简单。
如下HTML和CSS代码就好了：
效果如下截图：
本方法有2个限制，首先原图片必须是纯黑色的，如果是彩色的，颜色会混淆在一起；其次非图形部分必须是白色，不能是透明，因为透明会被当做黑色处理。
换成下面这个黑色白底图标：
更新于2022-01-31
正文部分结束，下面可以安心地东扯西扯了。
filter色值转换工具我一开始想得比较天真，颜色值不是可以HSB表示嘛（web中是HSL，PS中是HSB，两者有差别，），不正好对应filter的色调，饱和度和亮度滤镜嘛，我想计算出前后颜色的HSB值，再一比较，设置在filter上，色值不就转换好了。
还是得站在巨人的肩膀上，对原算法进行了一些优化，包括支持任意颜色filter转换，原算法是仅黑色；优化了误差的算法，原算法有较大问题，有时候明明视觉差异明显，却显示误差很小；增加了滤镜转换之后的渲染颜色的输出。就这样一个纯filter变色的在线小工具诞生了。
虽然这个filter变色工具很有技术含量，但是，并不表示使用filter是最好的图标变色方法。如果条件允许（有HTML操作权限），我建议优先使用mask遮罩实现任意图标的变色，兼容性更好，性能更好，颜色100%精准，可以在移动端项目中使用，如果对于一些杂牌Android不在意的话。
如果我们的图标是用的或者
没有无用的技术，只是适用场景宽窄有别而已！
如果是PNG图标，则多半就要考虑使用本文提供的方法了。
好，扯完了。
感谢阅读，欢迎纠错！欢迎交流！
（本篇完）
名称(必须)
邮件地址(不会被公开)(必须)
网站
算出來有時候差很多
颜色转换工具的成功率不太高，基本要点一两百次才能遇到2以下，不知道原理，是否可以讲解下，或者放出来一起优化一下
滤镜转换颜色工具，咋实现的呀，想看看源码
牛的很呀
工具太强了
brightness(100)变换白色会有问题有可能会在图片周围糊一圈
用filter:brightness(0)invert(1);可以避免出现的坑
为啥我的原始色是#1e2c24，目标色是#050318的时候试了几万次误差还是很大。