CSS Filter滤镜生成器和RGB/HEX(十六进制)颜色双向转换器

滤镜生成器可以将任何十六进制颜色转换为等效的CSS滤镜属性,将黑色元素转换为目标颜色,RGB/HEX转换器可以将RGB和HEX(十六进制)颜色转换为等效的颜色。

Filter颜色生成

实际颜色

通过CSS color属性实现:

滤镜效果

通过CSS filter属性实现:

生成的滤镜代码:


              

RGB/HEX(十六进制)双向转换器

转换结果

HEX(十六进制)颜色代码:


                      

RGB/HEX互转说明

RGB转十六进制工具可以将RGB颜色值转换为HEX(十六进制)颜色值,需输入RGB值如:rgb(255, 0, 128)或者255 0 128

HEX转RGB工具可以将HEX(十六进制)颜色值转换为RGB颜色值,需输入HEX值如:#ff00a8或者ff00a8

Filter滤镜使用说明

此工具可计算将黑色元素转换为匹配目标颜色所需的确切CSS滤镜属性。

该工具的开发目的是创建用于图标着色的自定义样式表,特别适用于主题开发。

使用注意事项

  • 为获得最佳效果,请从黑色图标/元素开始
  • 如果基础颜色不是黑色,请在滤镜前添加 brightness(0) saturate(100%) 以先将元素转为黑色
  • 比如filter:brightness(0) saturate(100%) invert(95%) sepia(2%) saturate(2286%) hue-rotate(176deg) brightness(86%) contrast(85%);
  • 复制生成的filter属性并应用到您的元素上即可