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 語法。