在线 Tailwind 颜色查找器：输入任意 HEX 颜色，匹配最接近的 Tailwind CSS 调色板色值，显示色差 ΔE 与类名，前端开发配色必备，全部本地处理。
摘要：免费的在线 Tailwind 颜色查找器，输入任意 HEX 色值匹配最接近的 Tailwind CSS 调色板颜色，显示色差 ΔE 与对应类名，前端配色开发必备，本地运行。
此工具完全在您的浏览器中运行。打开 DevTools → Network 面板，搜索您的输入内容——它不会出现在任何请求中。
使用指南
设计稿给了个色值 #F97316，要映射到 Tailwind 的 orange-500——靠肉眼在几百个色值里找色号，浪费时间还容易选错语义。本工具输入任意 HEX/RGB/HSL 颜色，自动匹配最接近的 Tailwind 颜色名和色阶（含默认调色板），本地计算。
1. 怎么用
- 输入目标颜色：HEX（#F97316）、RGB（rgb(249, 115, 22)）或 HSL。
- 工具按色差（CIE76/感知色差）计算与 Tailwind 全调色板的距离。
- 返回最接近的 Tailwind 颜色（如 orange-500），附候选列表与色差数值。
2. 匹配结果的使用建议
- 匹配度极高（色差 < 5）时直接替换成 Tailwind 类；色差较大时先做设计确认，别自动替换品牌色。
- 多级候选（orange-500 / orange-400）保留给设计师定夺——语义层级（500 比 400 更重）比数值接近更重要。
- Tailwind 4 的调色板与 3 略有差异——确认项目版本后使用对应色板。
- 自定义主题色（tailwind.config 的 extend.colors）不在默认清单里——需要时先配置再匹配。
3. 从设计稿到 Tailwind 的工作流
完整工作流是：Figma 拿到色值 → 本工具映射到 Tailwind 色阶 → 在组件里用语义类替换硬编码色值。关键不是「数值最接近」，而是「语义正确」——品牌主色应该映射到自定义主题色，而不是硬套 orange-500。数值工具解决的是第一步（找得准），语义决策在第二步（用得对）：比如 hover 态用同色系相邻色阶、警示色用红色系而非橙色系，这些规则由设计系统决定，色值工具负责执行。
常见问题
完全免费，无需注册。颜色匹配在浏览器本地完成，数据不外泄。
内置 Tailwind CSS 官方调色板色值，覆盖常用色系与全部色阶。
ΔE 是量化两种颜色视觉差异的指标，数值越小越接近。工具会显示 ΔE 帮助你判断匹配精度。