Tailwind Ink – 線上 AI 顏色調色盤產生器，指定色碼後自動產生 100 個相關的顏色並直接提供色碼

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Gemini Grok

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

Pin

Tailwind Ink 核心特色

• 免費開源，AI 神經網路自動產生色票
• 一次產生 100 種深淺漸變色彩
• 提供色碼可直接複製取用
• 支援 Figma 插件整合設計工作流
• 開放原始碼可自行調整 AI 參數

什麼是 Tailwind Ink

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

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

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

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

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

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

Pin

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

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

Pin

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

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

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

Pin

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

產生好配色方案之後，接下來要整合到 Tailwind CSS 專案中。設定方式會因為你使用的 Tailwind 版本而有不同。

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 來擴展成完整的色階系統，這個工作流其實非常順暢。

適合誰、不適合誰

適合 Tailwind Ink 的人：

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

不適合 Tailwind Ink 的人：

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

限制與注意事項

Tailwind Ink 有幾個值得注意的限制。第一，它只支援 hex 色碼輸入，如果你手上的品牌色是 RGB 或 HSL 格式，需要先自行轉換。第二，它沒有一鍵匯出功能，只能逐一點擊複製色碼，好在完整的色票通常也就 10 個顏色，手動貼進設定檔不會花太多時間。

第三，雖然 Tailwind Ink 的神經網路是基於 Tailwind 官方色票訓練的，但 AI 產生的結果不一定每次都完美。有些主色可能會在某些色階產生不太自然的過渡，這時候你可能需要手動微調個別色碼。建議產出後先用CSS 漸層工具實際測試效果。

最後，截至 2026 年 5 月，Tailwind Ink 仍然是免費且可正常使用的，但專案最後一次重大更新已經有一段時間。如果你需要一個長期維護的解決方案，建議同時關注社群中其他新興的配色工具。

下一步行動建議

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

Tailwind Ink 常見問題 FAQ

Tailwind Ink 是免費的嗎？

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

產生的配色可以商用嗎？

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

支援哪些色彩格式輸入？

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

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

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

Tailwind Ink 支援 Tailwind CSS v4 嗎？

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