HEX 颜色转 Tailwind 类名
输入或选择品牌色。工具会与 Tailwind 默认色板的 242 种颜色比较，显示最相近的颜色及可直接复制的类名。
使用方法最接近的 Tailwind 颜色是哪个
可用语言: 
广告
HEX 颜色转 Tailwind 类名: 用途
使用 Tailwind CSS 的人拿到 HEX 格式的品牌色后，想知道默认色板中哪个颜色最接近，以免代码里到处都是方括号的值。
工具会用 OKLab 空间中的距离，把您的颜色与 Tailwind 3 色板的 242 种颜色（从 slate 到 rose，色阶 50 到 950，加上白色和黑色）比较，该距离符合人眼感知。它会显示最相近的五种及现成的类名，并在没有足够接近的颜色时给出提示。
使用方法
- 粘贴 HEX 或 rgb() 颜色，或用取色器选择。
- 选择类名前缀（bg、text、border…）。
- 复制最接近颜色的类名或精确值。
使用场景
- 让品牌色适配 Tailwind 项目。
- 把 Figma 设计转换为类名。
- 判断是否值得在主题中注册新颜色。
常见问题
最接近的颜色是如何选出的？
通过 OKLab 色彩空间中的颜色距离，它比直接比较 RGB 数值更符合人眼的感知。距离越小，颜色越接近。
如果没有接近的颜色怎么办？
使用方括号的精确值，如 bg-[#1f6feb]，或在主题中注册品牌色（tailwind.config 中的 theme.extend.colors，或 Tailwind 4 中的 @theme），并起一个名字，如 brand。
色板是 Tailwind 3 还是 4？
比较使用的是 Tailwind 3 默认色板的 HEX 值。Tailwind 4 用 OKLCH 定义了相同的颜色，色调略微更鲜艳，但名称（blue-600、red-500…）相同。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。