输入
<path fill="#000000" d="M0 0h24v24H0z"/>
输出
<path fill="#ff0000" d="M0 0h24v24H0z"/>
设计配色
SVG 颜色编辑 - fill stroke 改色工具
粘贴 SVG 代码后提取 fill/stroke 色值形成可编辑色盘，改色即时预览并输出新 SVG，适合图标换色与简单矢量改色。
SVG改色图标
设计配色
SVG 颜色编辑
粘贴 SVG 代码后提取 fill/stroke 色值形成可编辑色盘，改色即时预览并输出新 SVG，适合图标换色与简单矢量改色。
被侦测到的矢量色盘 (Detected Colors)
等待注入矢量代码...
篡改后的新 SVG 源代码
使用场景
- 把图标库自带颜色改成品牌色
- 批量统一多色 SVG 中的 fill/stroke
- 预览浅色/深色背景下的图标效果
如何使用
- 粘贴完整 SVG 代码
- 在色盘中修改提取到的颜色
- 预览后复制最终 SVG
示例输入输出
FAQ
渐变色可以编辑吗？
当前主要提取并改写 fill/stroke 上的纯色值；含 defs 线性渐变等结构时，可能无法完整体现或编辑。
预览安全吗？
预览前会移除可执行节点与事件属性，降低恶意 SVG 在页面中执行脚本的风险。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
SVG 优化
SVG 优化 - 代码压缩清理工具
在浏览器本地清理 SVG 中的注释、编辑器元数据与多余空白，输出更短代码，适合压缩图标、清理导出冗余和准备内联 SVG。
SVG 优化 压缩
SVG 占位图
SVG 占位图 - 尺寸文案占位工具
按宽高、背景色、文字和字号生成轻量 SVG 占位图，适合原型图片位、列表骨架与加载占位，可直接复制 SVG 代码后使用。
SVG 占位图 原型
CSS 具名颜色
CSS 具名颜色 - 标准色名速查
查阅 W3C/CSS 标准具名颜色与对应色值，可按关键词筛选 Tomato、Cyan 等可直接用于样式的颜色名，适合原生 CSS 快速取色。
CSS 颜色 速查