什麼是Tailwind 顏色查找器？

Tailwind 顏色查找器可接收任意顏色值——hex、rgb()、hsl() 或 teal 之類的 CSS 顏色名稱——並即時找出最接近的 Tailwind CSS 工具類。不需要對照色盤,只要貼上設計稿中的值,就能取得可直接寫入程式碼的類名。

比對採用 CIE Lab 空間中的感知差異(ΔE),而不是純 RGB 相減,所以結果貼近肉眼真的覺得最像的顏色,而不是數字上最接近的。工具會搜尋 Tailwind v3/v4 完整預設色票,包含從 slate 到 rose 全部色系、50 到 950 各種色階,再加上黑白。前十名會連同各自的距離一起列出,讓你在色相和明度之間做取捨。

使用方法

1. 輸入設計稿中的十六進位顏色代碼，或使用選色器挑選顏色。
2. 工具會即時顯示最接近的 Tailwind CSS 顏色類別，並提供視覺化的顏色對比。
3. 複製 Tailwind 類別名稱（如 bg-blue-500）直接貼入程式碼中。查看色差數值可判斷匹配的精確度。

何時使用

• 把品牌或 Figma 的十六進位值轉成 Tailwind 類別,用在新專案上。
• 盤點舊樣式表裡的硬編碼顏色,逐步替換成工具類別。
• 設計師只給一個 hex,要在 red-500 與 rose-500 這類相近色之間選出語意最貼切的。

結果

設計師提供品牌色 #2563EB，貼上後工具顯示完全匹配 blue-500。若輸入 #3A7BC8，則會找到最接近的 sky-600，並顯示色差分數讓您評估匹配程度。

常見問題

工具如何判斷哪個 Tailwind 顏色最接近?

把兩個十六進位值都換到 CIE Lab,再計算 ΔE76,這是一種貼近視覺感受的距離。ΔE 小於 1 幾乎看不出差別;大於 5 就能明顯看出色相或明度的偏移。

使用的是哪一個版本的 Tailwind 色票?

預設的 v3/v4 色票:22 個色系(slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose)從 50 到 950,再加上黑白。專案自訂的主題色不會納入。

為什麼我輸入的 hex 對到的色階出乎意料?

Lab 距離會同時衡量色相、飽和度和明度。一個偏暗的青色可能離 slate 比離鮮亮青色更近,因為明度差距佔比較大。第一個結果如果不對,翻到前十名,按色相家族重新挑一個。

能直接複製成 CSS 變數而不是 Tailwind 類別嗎?

結果面板同時顯示類別名稱(像 bg-blue-500)和對應 hex。若你用 CSS 自訂屬性流程,複製 hex 後直接放進 var(--brand) 即可,不用走工具類別。 而當調色盤裡沒有夠接近的顏色時,工具還會直接給出由你的精確顏色產生的任意值類別(bg-[#hex]),讓你不用改動主題也能保持像素級精準。

可以貼上 rgb()、hsl() 或 CSS 顏色名稱嗎?

可以。輸入框能解析 hex(#2563EB 或 2563EB,3 位或 6 位)、rgb()/rgba()、hsl()/hsla()(色相可加 deg 也可省略),以及全部的 CSS 命名顏色(teal、rebeccapurple、cornflowerblue 等)。透明度通道會被忽略,比對是依不透明的 RGB 等效值執行。

相關工具