DOM
<path fill="#000" />
Red
<path fill="#ff0" />
design / 可用工具
深度反解重铺色矢量修改器
作为开发，你拿到了一个蓝色的 `<svg>` 图标但你需要它变红，却又不会用 Illustrator？这个工具利用 DOM 虚拟树直接抓取并暴露所有图层颜色的十六进制调色板。改完直接吐出完美新代码！
DesignImageFrontend
Vector Engineering
SVG 色彩调配屋
作为开发，你拿到了一个蓝色的 `<svg>` 图标但你需要它变红，却又不会用 Illustrator？这个工具利用 DOM 虚拟树直接抓取并暴露所有图层颜色的十六进制调色板。改完直接吐出完美新代码！
被侦测到的矢量色盘 (Detected Colors)
等待注入矢量代码...
篡改后的新 SVG 源代码
使用场景
- 从 Iconfont 拿了个自带丑颜色的原味图标，直接在这扒出对应的高亮区改成 Tailwind 同步色调。
如何使用
- 1. 粘贴 SVG 代码。所有的色彩将被提取为色盘。修改后右侧即时生效并支持复制。
示例输入输出
FAQ
我传入的渐变色可以抽吗
不支持带有 `<defs>` <linearGradient> 的跨度色分析，建议使用极简结构的单色、多色扁平标志。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 147 具名标准色典
复古免配置 Web 原生色块字典
W3C 规范级 CSS 万维网颜色字典速查表。无需使用复杂的 RGB，即刻检索诸如 Tomato、Cyan 等可直接内嵌于浏览器样式的极简颜色名。
Design System Dictionary
CSS 单块转 Tailwind 类
陈旧样式向 Utility Class 原则转换器
复制一段别人的远古 `.class { display: flex; margin-top: 16px; }`，它将会使用正则探针嗅探尽量匹配还原成 Tailwind 的 `flex mt-4` 紧凑类。
Design Tailwind Converter