CodeKitHub工具介绍
Tailwind CSS 提供的是一套固定的默认色阶，而不是让你为常见界面颜色随意选取任意数值。22 个命名系列（如 amber 或 slate）中的每一个都恰好有 11 级色阶，编号从 50 到 950，每一级都有 Tailwind 官方文档记录的一个固定 HEX 值，并在 bg-、text-、border- 和 ring- 等工具类中保持完全一致。
本对照表把这套完整的官方调色板本地嵌入，因此查一个颜色或类名不需要打开 Tailwind 官方文档，也不需要跑一次构建或把类名打进 PurgeCSS 才能看到效果。HEX 查询使用 RGB 欧氏距离寻找最接近的官方色阶，类名查询则是精确匹配——这里的每一个数值都对应 Tailwind 官方文档中的默认值。
为什么使用它？
- 从设计稿或截图中粘贴一个 HEX 代码，立即得到最接近的 Tailwind 类名，不用再猜它对应哪一级色阶编号。
- 输入类名（如 slate-900 或 bg-purple-500）即可查看其精确的 HEX 和 RGB 值，不用再翻 Tailwind 官方文档。
- 浏览完整的 22 系列 × 11 色阶网格，在选定颜色前直接对比各级色调。
- 一键获取任意色阶对应的 bg-、text-、border- 和 ring- 变体，因为 Tailwind 在这些工具类中共用同一套数值色阶。
- 免费、即时、完全本地运行——无需上传，无需账号，无需构建步骤。
使用方法
- 要从 HEX 代码查找类名：在搜索框中输入或粘贴 HEX 值（带不带 # 都可以）——最接近的官方 Tailwind 色阶会显示在网格上方，如果不是精确匹配还会附带颜色距离。
- 要从类名查找 HEX 值：输入类名或系列名（例如 amber-500、bg-blue-600，或者只输入 teal）——精确匹配会显示 HEX、RGB 及所有工具类变体；只输入系列名则会把网格筛选到该系列。
- 要浏览全部颜色：把搜索框留空，点击网格中的任意色块——其详情会显示在上方面板中，其 HEX 代码也会自动复制。
- 点击详情面板中任意 bg-/text-/border-/ring- 变体按钮，即可复制对应的精确类名。
示例
输入
#c4b5fd输出
violet-300 — 精确匹配，#C4B5FD，rgb(196, 181, 253)这个 HEX 值本身就是 Tailwind 官方文档记录的默认值之一，因此距离为 0，属于精确匹配而非近似匹配。
常见问题
这些是 Tailwind CSS 官方的默认颜色吗？
是的——全部 242 个 HEX 值（22 个系列 × 11 级色阶）均来自 Tailwind 官方文档记录的默认调色板。Tailwind v4 在内部用 OKLCH 表示颜色，但同一套默认调色板及其对应的 HEX 值与 v3 保持一致，因此这些数值在两个版本中都是准确的。
HEX 查询没有精确匹配时是什么意思？
如果你粘贴的 HEX 代码不是 Tailwind 242 个默认值之一（比如某个自定义品牌色），工具会按 RGB 距离显示最接近的官方色阶，并标注「最接近匹配」以及具体的距离值——它不会与你输入的颜色完全一致，只是 Tailwind 默认色阶中最相近的一个。
为什么 bg-、text-、border- 和 ring- 都使用相同的数字？
Tailwind 在所有工具类分类中共用同一套颜色色阶，因此 bg-amber-500、text-amber-500、border-amber-500 和 ring-amber-500 底层都是同一个 HEX 值，只是应用到了不同的 CSS 属性上。这也是详情面板会为你查询的任意色阶同时展示这四种变体的原因。
我能只查一个系列（比如「blue」）而不指定具体色阶吗？
可以——只输入系列名（不带数字）会把网格筛选到该系列的全部 11 级色阶，方便你先并排对比，之后再挑选具体的某一级。
这里包含我在配置文件里自定义的 Tailwind 主题颜色吗？
不包含——本对照表只收录 Tailwind 内置的默认调色板,不包括你在 tailwind.config.js 的 theme.extend.colors 或 v4 的 @theme 块中新增或覆盖的颜色。如果你的项目自定义了调色板，同一个类名在你项目中实际渲染的颜色可能与这里展示的不同。