什么是Tailwind 颜色查找器？

Tailwind 颜色查找器可接收任意颜色值——hex、rgb()、hsl() 或 teal 这类 CSS 颜色名称——并即时匹配到最接近的 Tailwind CSS 工具类。无需对照色板,粘贴设计稿中的色值就能得到可直接写入代码的类名。

匹配使用 CIE Lab 空间下的感知差异(ΔE),而不是简单的 RGB 减法,因此结果接近人眼真正觉得最接近的颜色,而不是数字上最接近的。工具会搜索 Tailwind v3/v4 完整默认调色板,包含从 slate 到 rose 的所有色系、50 到 950 全部色阶,再加上黑白两色。前十名会连同各自的距离一起列出,方便你权衡色相和明度。

使用方法

1. 输入设计稿中的十六进制颜色代码，或使用取色器选取颜色。
2. 工具会即时显示最接近的 Tailwind CSS 颜色类，并提供直观的颜色对比视图。
3. 复制 Tailwind 类名（如 bg-blue-500）直接粘贴到代码中。查看色差值可判断匹配的精确度。

何时使用

• 把品牌或 Figma 的十六进制值转成 Tailwind 类名,用在新项目里。
• 审查旧样式表里的硬编码颜色,逐步迁移到工具类。
• 设计师只给了一个 hex 值,要在 red-500 和 rose-500 这种近似色之间挑出语义最贴的一个。

结果

设计师提供品牌色 #2563EB，粘贴后工具显示完全匹配 blue-500。若输入 #3A7BC8，则会找到最接近的 sky-600，并显示色差分数让您评估匹配程度。

常见问题

工具是按什么标准判断哪个 Tailwind 颜色最接近?

它把两个十六进制值都转到 CIE Lab,再算 ΔE76,这是一种贴近人眼感受的距离度量。ΔE 小于 1 基本看不出区别;ΔE 大于 5 就能明显看出色相或明度的差异。

用的是 Tailwind 哪个版本的色板?

v3/v4 默认色板:22 个色系(slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose)从 50 到 950,再加上黑白。项目自定义的主题色不会被包含。

为什么我的 hex 匹配到了一个意想不到的色阶?

Lab 距离会同时考虑色相、饱和度和明度。一个偏暗的青色可能离 slate 比离亮青色更近,因为明度差占了主导。如果首选不合适,看看前十名,按色相家族再挑一次。

可以把结果复制成 CSS 变量,而不是 Tailwind 类名吗?

结果详情同时展示了类名(如 bg-blue-500)和对应的十六进制。如果你用的是 CSS 自定义属性方案,直接复制 hex 再包到 var(--brand) 里即可,不必走工具类。 而当调色板里没有足够接近的颜色时,工具还会直接给出由你的精确颜色生成的任意值类名(bg-[#hex]),让你无需改动主题也能保持像素级精准。

可以粘贴 rgb()、hsl() 或 CSS 颜色名吗?

可以。输入框能识别 hex(#2563EB 或 2563EB,3 位或 6 位)、rgb()/rgba()、hsl()/hsla()(色相可带 deg 也可省略),以及全部 CSS 命名颜色(teal、rebeccapurple、cornflowerblue 等)。透明度通道会被忽略,匹配基于不透明的 RGB 等效值。

相关工具