Tailwind CSS 颜色查找器

Tailwind 颜色简介

Tailwind CSS 提供一套预设颜色及数字刻度（如 red-500、blue-600），便于在类名中统一使用。本工具可浏览、查询 Tailwind 默认色板，并将 HEX 与 Tailwind 类名互转。

适用于在使用 Tailwind 做项目时快速查色、确认类名对应的色值，或将设计稿中的颜色映射到最近的 Tailwind 色阶。

使用说明

浏览色板

按颜色名称（如 red、blue、gray）与刻度（50–950）浏览 Tailwind 默认色板，点击色块可复制类名或 HEX 值，便于在 HTML 或配置中引用。

色值转类名

输入 HEX 或 RGB，工具会匹配最接近的 Tailwind 颜色类名（如 bg-red-500、text-slate-700），并显示色差，便于在设计中尽量使用预设色。

类名转色值

输入或选择 Tailwind 颜色类名（如 blue-500），查看对应的 HEX/RGB 及色块，便于与设计稿或外部样式对照。

常见问题

Q: 支持自定义 Tailwind 主题色吗？

若工具仅内置默认色板，自定义主题中的颜色需在项目内查配置；若工具支持导入或输入主题配置，则可查询自定义色与类名对应关系。

Q: 刻度 50–950 是什么意思？

Tailwind 的数值越大颜色越深（如 50 最浅、950 最深），与旧版 100–900 类似但扩展了端点，便于做更细的明度阶梯。

Q: 匹配「最接近」的算法是什么？

通常按 RGB 或 LAB 等色彩空间计算与各 Tailwind 色的欧氏距离，取最小差值的类名；不同工具可能略有差异，仅供参考。