Tailwind CSS 颜色查找器 为任意 HEX 编码找到最接近的 Tailwind CSS 颜色类。
Tailwind 颜色查找器
为任意 HEX 编码找到最接近的 Tailwind CSS 颜色类。
输入您的颜色
输入HEX代码或使用颜色选择器。
查看匹配结果
查看排名前10的最接近的Tailwind CSS颜色，按距离排序。
复制类名
复制Tailwind颜色类名（例如blue-500）用于您的项目。
What Is Tailwind 颜色查找器?
Tailwind CSS 颜色查找器将任何 HEX 颜色与 Tailwind CSS 默认调色板中最接近的颜色进行匹配。Tailwind 包括 22 个颜色家族（slate、gray、zinc、red、orange 等），每个家族都有 11 种阴影（50-950），总共 242 种预定义颜色。本工具计算输入颜色与每种 Tailwind 颜色的 Euclidean RGB 距离，并对前 10 个最接近的匹配进行排名。对于开发人员来说，这个工具在将设计迁移到 Tailwind、将品牌颜色与 Tailwind 类名匹配或为设计规范找到合适的 Tailwind 实用类时非常有价值。每个匹配项都显示一个可视化的颜色块、Tailwind 类名（例如 blue-500）、实际 HEX 值和距离度量，以便您判断匹配质量。
Why Use Tailwind 颜色查找器?
-
搜索所有242个Tailwind默认调色板颜色以找到最接近的匹配
-
输入颜色与Tailwind颜色的并排视觉比较
-
显示确切的Tailwind类名，准备好用于代码中
-
距离度量帮助判断匹配质量
-
显示前10个结果，以选择最佳匹配
Common Use Cases
设计转换为Tailwind
将Figma/Sketch设计颜色转换为最接近的Tailwind实用类。
品牌整合
找到与品牌指南最接近的Tailwind颜色，以进行快速原型开发。
遗留系统迁移
在框架迁移过程中，将现有的CSS颜色映射到Tailwind等效值。
颜色探索
发现与您喜欢的颜色类似的Tailwind颜色，以实现一致的实用优先样式。
Technical Guide
查找器在 RGB 颜色空间中计算 Euclidean 距离：D = sqrt((R1-R2)² + (G1-G2)² + (B1-B2)²) 之间的输入颜色和每个 Tailwind 默认调色板中的 242 种颜色。结果按升序距离排序。距离为 0 表示完全匹配；小于 20 的距离表示非常接近的匹配；大于 50 表示明显的差异。Tailwind 调色板组织成 22 个颜色家族，每个家族都有 11 种阴影（50、100、200、300、400、500、600、700、800、900、950）。每个家族的 500 阴影通常是 "基准" 颜色。Tailwind 3.x 颜色设计考虑到了感知统一性，这意味着所有颜色家族中相等的阴影步骤（例如从 400 到 500）会产生大致相等的视觉亮度差异。
Tips & Best Practices
-
1距离小于10意味着Tailwind颜色几乎无法区分您的输入
-
2如果最接近的匹配具有较大的距离，请考虑使用自定义颜色扩展Tailwind
-
3类名格式为"colorName-shade"（例如bg-blue-500、text-red-600）
-
4Tailwind 500-shade颜色是"标准"强度--更浅的是50-400，更深的是600-950
-
5您可以在tailwind.config.js中使用自定义颜色扩展Tailwind的调色板，以实现精确匹配
Related Tools
Frequently Asked Questions
Q 如果没有Tailwind颜色足够接近怎么办？
Q 这是否适用于Tailwind v4？
Q 什么距离被认为是一个良好的匹配？
About This Tool
Tailwind 颜色查找器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.