Tailwind Ink 免費調色盤產生器，輸入色碼自動展開深淺色階

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

Tailwind Ink 是一款免費開源的 AI 調色盤產生器，輸入一個 hex 色碼就能自動擴展出 100 種深淺漸變色票，產出的色碼直接對應 Tailwind CSS 的 50 到 900 色階命名。

從既有 Tailwind 色票出發找色是一種路徑，若起點是自己定案的品牌色，Kigen 免費配色產生器能直接輸出 Tailwind v3、v4 與 CSS 變數的完整色階檔，免註冊免登入。

Pin

Tailwind Ink 核心特色

• 免費開源，AI 神經網路自動產生色票
• 一次產生 100 種深淺漸變色彩
• 提供色碼可直接複製取用
• 支援 Figma 插件整合設計工作流
• 內建訓練頁，不寫程式也能重訓 AI 模型

用 Tailwind 官方色票訓練，配色命名直接對齊 bg-blue-50 到 900

Tailwind Ink 是一款專為 Tailwind CSS 框架設計的配色工具，背後使用兩組神經網路，訓練資料來自 Tailwind CSS 官方色票。與一般隨機產生顏色的線上配色工具不同，它從你指定的主色出發，透過 AI 計算出和諧的色相偏移與亮度遞變，讓每個色階之間都有平滑的過渡。

這裡的「以官方色票訓練」是關鍵，也解釋了 Tailwind Ink 跟一般配色工具最根本的差異。一般工具給你一個漂亮的 hex 值就結束了，Tailwind Ink 的神經網路是把 Tailwind 從 50 到 900 的整套漸變邏輯學起來：當官方的 blue-500 走到 blue-600 時色相會往哪個方向偏、亮度要掉多少，模型都用官方樣本去擬合。所以你輸入一個它從沒見過的品牌色，它產出的色階也會保留 Tailwind 那種「自然遞變、不會在中間色階出現色相跳變」的質感。這不是單純的 HSL 線性內插能做出來的，像 Tint & Shade Generator 這類以線性混色產生深淺色的工具，在極淺色階常會出現色偏，而 Tailwind Ink 訓練時就已經吸收了官方的修正方式。

另一個多數配色工具沒有的設計，是把訓練過程也開放給使用者。切到網站上方的 Training 頁，可以從 Tailwind UI、Stripe、IBM 等資料集挑一個，設定 Epochs 次數後直接在瀏覽器重新訓練引擎，訓好的模型會出現在調色盤編輯器的 Engine 選單裡供切換。想要更貼近自己產品風格的色階遞變，不需要改原始碼就能重訓一版。

簡單來說，你只需要給一個品牌色的 hex 值，它就能幫你擴展出一整套從極淺到極深的色階系統，而且命名方式跟 Tailwind CSS 的 bg-blue-50 到 bg-blue-900 完全一致，不需要額外轉換。這對於正在建立品牌設計系統、或是需要快速把客戶提供的品牌色整合到 Tailwind 專案中的開發者來說，可以省下大量手動調色的工作。

Tailwind Ink 操作教學：3 步驟產生你的專屬調色盤

操作流程非常簡單，不需要註冊帳號或安裝軟體，打開瀏覽器就能直接使用。

步驟 1：挑選或輸入主顏色

進入 Tailwind Ink 網站後，左上角有一個色彩選取器。你可以直接用滑鼠在色盤上點選，或在輸入欄位鍵入特定的 hex 色碼。如果你已經有明確的品牌色，建議直接輸入色碼，這樣產生的結果會更精準。

Pin

步驟 2：檢視 AI 自動產生的調色盤

每當你變動主顏色，AI 就會即時重新計算整個調色盤。它會從你指定的顏色開始，自動往相似色延伸，根據深淺排列，形成一組完整的漸變色票。整個過程不需要按下任何「生成」按鈕，即改即見。

Pin

每個產生的顏色都會在右側顯示對應的 hex 色碼以及 Weight 值（50 到 900），方便你直接對應到 Tailwind CSS 的 class 命名規則。點一下就能複製色碼。

調色盤編輯器裡的色系數量也不限於預設的 10 組，按一下「Add family」就能繼續往上加，每個色系都可以自己命名。另外網站還提供 Context 頁，把目前的調色盤直接套進一個範例儀表板，卡片、進度條與待辦清單全部換成你的配色，並透過「Select primary」挑選主要色，實際觀察主色套在介面上的效果，比單看色票更容易判斷這組顏色放進產品後的樣子。

步驟 3：預覽文字對比並複製色碼

PALETTE 區域右側有一個「Aa」按鈕，點擊後可以切換顯示範例文字。這個功能會在每個顏色背景上同時顯示黑色與白色的文字，讓你一眼就能判斷前景文字該用什麼顏色才夠清楚。對於需要符合 WCAG 無障礙標準的專案來說，這個即時預覽非常實用。

不過要注意，Tailwind Ink 的 Aa 預覽只是視覺提示，網站頂端雖然提供 WCAG 2.0 與 APCA 兩種對比模型切換，如果你要正式做到 AA 等級（一般文字 4.5:1、大字 3:1），建議把產出的色碼丟進 WebAIM Contrast Checker 這類工具再驗一次。實測上，100 到 300 這幾階在白底搭深色文字通常沒問題，但 400 開始的中間色階常常兩種文字色都過不了 4.5:1，這時與其硬用，不如把它限定在按鈕背景、邊框、hover 狀態這類不承載主要文字的場合。

Pin

如何在 Tailwind CSS 專案中套用 Tailwind Ink 配色

產生好配色方案之後，接下來要整合到 Tailwind CSS 專案中。切到網站上方的 Code 頁按下「Copy code」，就能把整個調色盤一次輸出成 tailwind.config.js，內含每個色系從 50 到 900 的完整色階，貼進 v3 設定檔即可使用；採用 v4 的話，再把色碼對應到 @theme 的 CSS 變數。以下分別說明兩種版本的設定方式。

Tailwind CSS v4 的設定方式

Tailwind CSS v4 已經從 JavaScript 設定檔改為 CSS-first 的 @theme 指令。假設你用 Tailwind Ink 從品牌主色 #4F46E5 產生了一組色票，在 v4 中直接寫在 CSS 檔案裡：

@theme {
  --color-brand-100: #EDE9FE;
  --color-brand-200: #C4B5FD;
  --color-brand-300: #A78BFA;
  --color-brand-400: #8B5CF6;
  --color-brand-500: #4F46E5;
  --color-brand-600: #4338CA;
  --color-brand-700: #3730A3;
  --color-brand-800: #312E81;
  --color-brand-900: #1E1B4B;
}

設定完成後，就可以在 HTML 中使用 bg-brand-500、text-brand-300 這樣的 class 來引用自訂配色。

Tailwind CSS v3 的設定方式

如果你仍在使用 v3，則是在 tailwind.config.js 的 theme.extend.colors 區塊中加入自訂顏色：

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          100: '#EDE9FE',
          200: '#C4B5FD',
          300: '#A78BFA',
          400: '#8B5CF6',
          500: '#4F46E5',
          600: '#4338CA',
          700: '#3730A3',
          800: '#312E81',
          900: '#1E1B4B',
        }
      }
    }
  }
}

深色模式配色切換

如果你的網站支援深色模式，可以用 Tailwind 的 dark: 變體來切換配色。Tailwind Ink 產生的色票從極淺到極深都有，在兩種模式下都能找到適合的色階：

<div class="bg-brand-100 dark:bg-brand-900 text-brand-900 dark:text-brand-100">
  這段文字在淺色與深色模式下都有良好的對比
</div>

一個實用的原則：淺色模式使用較深的色階（600 到 900）作為主色調，深色模式切換到較淺的色階（100 到 400）。這樣不管使用者在哪種模式下瀏覽，都能維持舒適的閱讀體驗。

Tailwind Ink 與其他配色工具比較

市面上有不少免費配色工具，每一款適用的場景不同。以下是 Tailwind Ink 跟幾個主流工具的比較：

從比較可以看出，Tailwind Ink 的優勢在於它是專為 Tailwind CSS 開發者量身打造的，產出的色碼可以直接貼進設定檔，不需要格式轉換。如果你目前的主力框架就是 Tailwind，這幾乎是零學習成本的選擇。

不過如果你需要的是更通用的配色靈感，Coolors 的隨機生成機制反而更適合在早期探索階段使用。它一次給你 5 個顏色的搭配，你可以鎖定喜歡的、替換不滿意的，快速找到配色方向。找到方向之後，再拿到 Tailwind Ink 來擴展成完整的色階系統，這個工作流其實非常順暢。如果還想多比較幾家，ColorSpace 也主打免費產生調色盤、漸層色與 CSS 程式碼，適合放進探索階段一起用。

適合誰、不適合誰

適合 Tailwind Ink 的人：

• 正在使用 Tailwind CSS 並需要把品牌色整合到專案中的前端開發者
• 需要建立完整設計系統色票的 UI 設計師（搭配 Figma 插件）
• 想要快速從單一主色延伸出深淺漸變的接案工作者

不適合 Tailwind Ink 的人：

• 沒有使用 Tailwind CSS 的開發者（產出的 Weight 命名跟其他框架沒有直接對應）
• 需要從零開始探索配色靈感的人（Tailwind Ink 需要你先有一個主色）
• 需要大量不同色系的組合搭配，而不是單一色系的深淺漸變

限制與注意事項

Tailwind Ink 有幾個值得注意的限制。第一，它只支援 hex 色碼輸入，如果你手上的品牌色是 RGB 或 HSL 格式，需要先自行轉換。第二，Code 頁的一鍵匯出只輸出 tailwind.config.js（v3）格式，還沒有 v4 @theme CSS 變數的版本，使用 v4 的人要自己把色碼轉寫成 --color-* 變數。

第三，雖然 Tailwind Ink 的神經網路是基於 Tailwind 官方色票訓練的，但 AI 產生的結果不一定每次都完美。有些主色可能會在某些色階產生不太自然的過渡，尤其是高飽和度的霓虹色系或極暗的墨色系，因為這些顏色在官方訓練樣本中本來就比較少，模型外推時容易出現色階之間差異不明顯的狀況。這時候你可能需要手動微調個別色碼。建議產出後先用CSS 漸層工具實際測試效果，把相鄰色階並排渲染，如果某一階看起來跟前後幾乎沒差，就直接覆寫它。

最後，截至 2026 年 9 月，Tailwind Ink 仍然免費且可正常使用。原始碼以 MIT 授權放在 GitHub 上，不過專案最後一次更新停在 2023 年 11 月，如果你需要長期維護的解決方案，建議同時關注社群中其他新興的配色工具。

下一步行動建議

1. 打開 Tailwind Ink 產生你的品牌色票：準備好你的品牌主色 hex 值，進入 Tailwind Ink 官網輸入色碼，複製產出的 50 到 900 色階。判斷標準：如果淺色端（50 到 200）在白底上看不清楚，或是深色端（800 到 900）之間差異太小，可能需要手動微調。
2. 把色碼貼進你的 Tailwind 設定檔：v4 使用 @theme 指令，v3 使用 tailwind.config.js。貼完後在本機跑一次 build，確認 class 名稱有正確生效。專案如果還缺版型，也可以從免費的 Tailwind 模板 開始改。
3. 用 Aa 預覽功能確認文字對比：回到 Tailwind Ink 開啟 Aa 模式，檢查你預計使用的背景色搭配黑文字和白文字的對比效果。如果某一個色階的文字辨識度不佳，可以考慮跳過該色階不用。

Tailwind Ink 常見問題 FAQ

Tailwind Ink 是免費的嗎？

是的，Tailwind Ink 完全免費，而且原始碼在 GitHub 上以 MIT 授權公開。不需要註冊帳號，不需要付費解鎖任何功能，所有 AI 配色功能都可以直接在瀏覽器中使用。

產生的配色可以商用嗎？

可以。Tailwind Ink 產生的色碼就是普通的 hex 色彩值，不涉及任何智慧財產權問題。你可以自由將這些配色用於個人專案或商業用途。

支援哪些色彩格式輸入？

Tailwind Ink 目前只支援 hex 色碼輸入（例如 #4F46E5），產出的色碼也是 hex 格式。如果你需要 RGB 或 HSL 格式，可以自行用線上工具轉換。

如何在手機或平板上使用？

Tailwind Ink 的網頁有做響應式設計，手機和平板的瀏覽器中也可以正常操作。不過介面以桌面使用為主要考量，在較小的螢幕上操作會比較不方便，建議在桌面環境中使用以獲得最佳體驗。

Tailwind Ink 支援 Tailwind CSS v4 嗎？

Tailwind Ink 產生的是標準的 hex 色碼和 Weight 數值（50 到 900），這些在任何版本的 Tailwind CSS 中都可以使用。不管你用的是 v2、v3 還是 v4，只要在設定檔中正確引用這些色碼就能正常運作。差別只在於 v4 使用 CSS-first 的 @theme 指令，而 v3 使用 tailwind.config.js。