Tailwind 色板
Tailwind 颜色转换器 - 查找最接近的类名
将任意 HEX、RGB 或 HSL 颜色匹配到最接近的 Tailwind CSS 色板,并复制 bg、text、border、ring 类名。
最接近的 Tailwind 颜色
Blue 500精确匹配
Indigo 500Δ 0.0671
Blue 600Δ 0.0758
Sky 600Δ 0.0765
Indigo 400Δ 0.0842
Sky 500Δ 0.0981
如何使用
粘贴品牌色或设计稿色值,快速找到最接近的 Tailwind 色板颜色。工具会排序相近颜色、显示距离,并生成可复制的实用类名。
- 1 输入设计稿中的颜色。
- 2 比较最接近的 Tailwind 色板匹配。
- 3 复制 bg、text、border 或 ring 工具类。
常见问题
匹配结果一定完全一样吗?
只有输入值刚好等于 Tailwind 色板值时才是精确匹配;否则工具会返回最接近的可用颜色。
Tailwind 匹配如何排序?
工具在感知更均匀的 OKLab 空间比较颜色,通常比 RGB 距离更接近人眼判断。
自定义品牌色可以用吗?
可以。快速原型可用最接近的 Tailwind 色;正式品牌系统建议把原始颜色写入自定义主题 token。
会生成哪些 Tailwind 类名?
工具会为最近颜色生成常用 bg-、text-、border- 和 ring- 工具类。