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属性并应用到您的元素上即可