HEX 转 Tailwind

这是 HEX 转 Tailwind 转换器。按 CIEDE2000 在默认色板里找最近的类名。v3 下 #3B82F6 就是 blue-500。可复制 bg-、text-、border-、ring- 或 bg-[#hex]。

示例色

接近的备选

完整 Tailwind 色板

一次转多颗颜色。每行一个，也可以写成 #3B82F6, #FF573380。点填入示例会填三行，下面出现对照表。

HEX 转 Tailwind

这是 HEX 转 Tailwind 转换器：贴一个 HEX，按 CIEDE2000（观感距离，不是裸 RGB）在默认色板里找最近的类名。可切 v4（官方 OKLCH）或 v3。v3 下 #3B82F6 就是 blue-500。也可以输入 bg-blue-500 反查 HEX。

如何使用

  1. 粘贴 HEX、点色块、随机一颗、点示例，或（浏览器支持时）从屏幕取色。
  2. 选 v4 或 v3。看最近类名、对应 HEX 和 ΔE00。
  3. 复制 bg-、text-、border-、ring-、fill-，或任意值 bg-[#1D9BF0]。
  4. 最近的不够像时，点备选色。下面色板是当前版本的完整默认色。
  5. 显示示例用 #3B82F6。复制结果复制类名（带你选的前缀）。批量可混 HEX 和类名。

如何看 ΔE

ΔE ≤ 1 基本就是同一颗色。ΔE ≤ 2 做界面没问题。ΔE ≤ 5 做背景够用。再大就用 bg-[#hex]，品牌色保持原值。

注意事项

只含默认色板（slate 到 rose、50–950，以及黑白）。项目自定义色不在名单里。v4 色值来自官方 OKLCH 主题再转 HEX。正文对比度不在本页，请用 颜色转换。相关：HEX 转 RGB。

用在哪里

设计稿 HEX 落到 Tailwind 类名、看品牌色有没有接近的默认色、升级前对照 v3 和 v4、不用翻文档就能复制 utility。

常见问题

这是 v3 还是 v4？

两个都有。默认是 v4。项目还在用旧 HEX 色板就切到 v3。同一颗 HEX 在两个版本里可能落到不同类名。

两个一样近怎么办？

ΔE 更小的胜出；ΔE 也一样时，色板顺序靠前的胜出。

没有够近的怎么办？

复制任意值，例如 bg-[#1D9BF0]，HEX 原样写进 Tailwind 语法。