在线 Tailwind 颜色查找器：输入任意 HEX 颜色，匹配最接近的 Tailwind CSS 调色板色值，显示色差 ΔE 与类名，前端开发配色必备，全部本地处理。
摘要：免费的在线 Tailwind 颜色查找器，输入任意 HEX 色值匹配最接近的 Tailwind CSS 调色板颜色，显示色差 ΔE 与对应类名，前端配色开发必备，本地运行。
本地工具可在 DevTools → Network 搜索输入内容，通常不会出现在请求中。
使用指南
设计稿给了色值，要映射到接近的 Tailwind 色名与色阶。本工具输入 HEX/RGB/HSL，匹配接近的 Tailwind 调色板颜色，本地计算。匹配是距离近似，不是「品牌色官方指定」；最终以设计系统 token 为准。
1. 操作步骤
找到接近色后，仍要用对比度检查器测文字可读性。色盲场景另做模拟。
- 输入色值
- 查看接近的 Tailwind 名称与色阶
- 复制类名或色值到代码
2. 能力边界
找到接近色后，仍要用对比度检查器测文字可读性。色盲场景另做模拟。
3. 实践建议
先用小样例确认选项与导出，再批量处理。把失败样例留下复现，便于对照文档与实现。
4. 和相邻工具
同一任务链上的格式转换、压缩、校验工具可组合使用；以「下一步谁消费」决定格式，而不是盲目全转同一种。
5. 隐私与归档
处理含个人信息或密钥的内容时，即使计算在本地完成，也要留意屏幕分享、录屏与下载文件的二次传播路径。 母版与导出件分开存放，避免只留下有损结果。
6. 补充说明与验收
本页计算在浏览器本地完成，不把你的内容当作上传素材；但这不自动等于「可以随便外传」。下载目录、剪贴板与会议投屏同样可能泄漏。
7. 协作与风险控制
与相邻工具衔接时，注意中间格式是否有损、编码是否一致、以及是否需要保留母版以便回退。链路越长，越要在每一步写下「不保证什么」。新人按清单操作，比口头教一遍损耗更小。文档与实现可能短暂不一致：以你屏幕上可见的按钮、下拉与提示为准。发现落差欢迎用真实样例复现后更新说明，避免继续传播过时句子。
- 先用最小可复现样例确认选项。
- 批量前记录转换前后体积或行数。
- 输出给他人时写明边界与不保证项。
常见问题
能。色差匹配完全在本地浏览器计算，输入的 HEX/RGB/HSL 不发往任何后端；只是分享导出结果前，留意别顺手带出未公开配色。
HEX、RGB、HSL 均可。内置 Tailwind CSS 官方调色板色值，覆盖常用色系与全部色阶，输入后即列出接近的候选。
ΔE 量化两种颜色的视觉差异，数值越小越接近。工具为每个候选显示 ΔE；近似色常有多个候选，可据此对比精度再挑。
不是。匹配基于色差距离，属近似映射；品牌色与自定义色不在默认调色板中，最终以设计系统 token 为准。
建议分开做。同一色值在两套主题下接近的 Tailwind 色阶往往不同，各自匹配一次并分别验证对比度更稳。
用作文字或交互前景色时，先用对比度检查器验证可读性；面向色觉障碍用户的界面，再到色盲模拟器里补一轮验证。