色彩轉換器
在 HEX、RGB、HSL 格式之間互相轉換，並即時找到最接近的 Tailwind CSS 類別。
indigo-500
最接近的 Tailwind 色彩類別
免費線上在 HEX、RGB、HSL 和 Tailwind 之間即時轉換色彩
在不同色彩格式之間切換是建立 UI 時常見的摩擦點。Zolkit 的色彩轉換器支援 HEX、RGB 和 HSL 雙向轉換，甚至能找出最接近的 Tailwind CSS 色彩類別，讓您一步從設計工具的色碼轉換為工具類別。
三種格式同步
編輯任一格式（HEX、RGB 或 HSL），其他格式會立即更新，改變任一數值後所有表示法保持同步。
Tailwind 色彩匹配
使用 RGB 歐幾里得距離，從完整的 22 個色彩家族調色盤中自動找出最接近的 Tailwind v3 色彩類別。
即時色彩預覽
大型色彩選擇器在您調整數值時立即提供所選色彩的視覺預覽。
複製任意格式
每個格式卡片都支援一鍵複製，可複製 HEX 字串、rgb() 函式、hsl() 函式或 Tailwind 類別名稱。
100% 私密安全
所有色彩計算都在您的瀏覽器本機執行，不會傳送任何資料至伺服器。
永久免費
無需帳號、無使用限制、無付費牆，色彩轉換永遠免費。
如何轉換色彩
- 1
點擊色彩選擇器，或在任一格式欄位（HEX、RGB 或 HSL）中輸入值。
- 2
其他所有格式欄位會自動更新，Tailwind 卡片會顯示最接近的工具類別。
- 3
點擊任一卡片上的「複製」按鈕，即可將該格式複製到剪貼簿。
常見問題
這個工具支援哪些色彩格式？
支援 HEX（6 位數，例如 #3b82f6）、RGB（每個通道 0–255）、HSL（色相 0–360°、飽和度和亮度 0–100%）以及 Tailwind CSS 類別名稱。您可以編輯任一格式，其餘格式會立即更新。
Tailwind 色彩匹配是如何運作的？
工具會使用 RGB 空間中的歐幾里得距離，將您的色彩與 Tailwind v3 調色盤中的所有約 242 種色彩（22 個色彩家族 × 各 11 個色階）進行比較，並以工具類別名稱形式（例如 'blue-500'）回傳最接近的結果。
Tailwind 匹配結果一定是精確的嗎？
不一定。如果您的色彩剛好是 Tailwind 的色彩之一，則匹配是完全精確的。對於任意色彩，工具會回傳最接近的鄰近色，視覺上可能不完全相同，卡片旁的色塊可供您比對。
使用的是哪個版本的 Tailwind 調色盤？
查找表使用 Tailwind CSS v3 預設調色盤，包含所有 22 個色彩家族（slate、gray、zinc、neutral、stone、red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose），各有 11 個色階（50 到 950）。
可以直接輸入 HSL 值嗎？
可以。點擊三個 HSL 數字輸入框（H、S、L）中的任一個並輸入值。色相為 0–360 度，飽和度和亮度為 0–100%，輸入時 HEX 和 RGB 欄位會同步更新。
這個工具可以離線使用嗎？
可以，頁面載入後即可離線使用。所有色彩轉換運算和 Tailwind 查找表都打包在 JavaScript 中，色彩轉換過程中不會發出任何網路請求。