Tint & Shade Generator - 線上色調陰影產生器，輸入色碼後自動產生深淺漸變色並能一鍵複製色碼

Q: 如何在 Tailwind CSS 中使用產生的色碼？

在 tailwind.config.js 的 theme.extend.colors 裡加入自訂色彩，每個顏色用物件表示，鍵值是層級數字（100 到 900），值是複製來的 Hex 色碼。設定完成後就能用 bg-primary-500、text-primary-700 這類 class 引用色彩。一般 CSS 檔案則透過 :root 的 Custom Properties 定義，不綁定框架。

Facebook Line Messenger Telegram

Tint & Shade Generator（maketintsandshades.com）是一款免費的線上色彩漸變工具，輸入一組 Hex 色碼就能自動產生深淺漸變色，每格都可一鍵複製。它不做多色搭配，只專注一件事：從單一顏色產生完整的深淺色階，適合需要建立品牌色彩系統或 CSS 變數色表的設計師與前端工程師。

如果你需要的是多色配色靈感，可以改用 Coolors 免費配色工具或 Colorion 調色盤產生器。但如果品牌已有主色，需要快速整理出可用的深淺色表，Tint & Shade Generator 就是為這個情境設計的。

Tint & Shade Generator 是什麼

Tint & Shade Generator 是一個免費、免註冊、免安裝的網頁工具，由 Michael Edelstone 開發並開源。它的運算方式與 Chrome DevTools、Sass、Less、PostCSS 的色彩函式一致，產生的色碼可以直接用在 CSS 變數或設計系統中，不需要擔心色值偏移。

核心定位很明確：只做「單一色彩的深淺漸變」。不碰多色搭配，不從圖片提取色彩，不做漸層背景語法產生。這個窄定位反而讓它比多功能配色工具更有效率，因為整個操作流程只需要三個動作：輸入色碼、按按鈕、複製結果。

Tint、Shade 與 Tone 的差異

在使用工具之前，先釐清三個常見的色彩術語：

Tint（色調）：在原始顏色中混入白色，色彩變淺、變亮、變柔和。HSL 模型中對應提高 Lightness。
Shade（陰影）：在原始顏色中混入黑色，色彩變深、變暗、變沉穩。HSL 模型中對應降低 Lightness。
Tone（色度）：在顏色中混入灰色，飽和度降低但保留原始色相。實務上 Tint 和 Shade 用得比 Tone 更頻繁，因為視覺變化更明確、更容易預測。

簡單記：Tint 往亮走，Shade 往暗走，Tone 往灰走。Tint & Shade Generator 產生的兩排色塊，就是在這兩個方向上各走十階。

操作教學：三步驟產生漸變色

步驟一：輸入 Hex 色碼。打開 maketintsandshades.com，在輸入框填入 Hex 色碼（例如 #3B82F6）。帶不帶 # 符號都可以。輸入多個色碼時用空格分隔，工具會批次處理。

步驟二：按下產生按鈕。點擊「Make tints and shades」按鈕，結果瞬間出現。上方是 Shade 系列（主色往黑色漸變），下方是 Tint 系列（主色往白色漸變），兩排各十階，加上主色共二十一個色塊。

步驟三：點擊色塊複製色碼。每個色塊上方都標示了 Hex 值，點一下就自動複製到剪貼簿。頁面頂端的「Include hashtag when copying」開關可以切換是否包含 # 符號，寫 CSS 通常需要帶 #，貼到 Tailwind 設定檔或某些設計工具則不帶 # 比較方便。

批次輸入的實際應用場景：假設品牌有三個核心色（主色 #2563EB、輔助色 #10B981、強調色 #F59E0B），把三個色碼用空格分隔一次輸入，就能同時得到三組各二十一個漸變色。配色靈感方面，Tailwind Ink AI 調色盤產生器能根據色碼推薦相關色彩，跟本工具的深淺漸變剛好互補。

產生的色碼如何用在 CSS 設計

拿到色碼後，最推薦的做法是定義在 :root 作為 CSS 自訂屬性，整個網站就能用 var(--color-primary-500) 的語法引用色彩，日後調整只需改一個源頭。

:root {
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;
}

這個命名慣例與 Tailwind CSS 的色彩系統一致，都是用 100 到 900 區分深淺。差別在於 Tailwind 的色值固定，你的自訂系統可以完全依照品牌需求調整。在按鈕狀態色的規劃上，預設用 500（主色）、hover 用 600 或 700、active 用 800、disabled 用 200 或 300，這個規則提供了一個有邏輯可循的起點。

如果你對背景樣式有更多需求，CSS Background Patterns 背景樣式產生器提供了二十一種以上可即時預覽的背景樣式。Neumorphism CSS 新擬態產生器則能用這些色彩建立 Soft UI 風格介面。陰影效果方面，CSS box-shadow 範例庫有八十二種可直接複製的陰影效果，搭配品牌色碼使用能提升 UI 質感。

從品牌色建立色彩階層的方法

現代前端框架幾乎都採用「色階」概念，把一個顏色拆成多個深淺層級。Tailwind CSS 把每個顏色定義從 50 到 950 共十一個層級，這套做法之所以流行，是因為它解決了設計和開發之間最常見的溝通問題：有了色階編號，「這個藍色要再深一點」就有了共同的語言。

建立色彩階層時的挑選原則：淺色端（Tint 方向）的色塊差異較小，50 到 200 區間可以跳著選，不必每一格都用到。深色端（Shade 方向）變化較明顯，建議連續選取以確保暗色有足夠層次。主色附近的 400 到 600 區間是最常用的，建議保留每一階。

色彩系統不只是美感問題，還需要考慮無障礙性。WCAG 規定 AA 等級的一般文字對比度至少 4.5:1，大文字至少 3:1。通常 700 到 900 層級的色碼放在白色背景上、100 到 300 層級用來做淺色背景，會是比較安全的組合。建議用瀏覽器開發者工具或線上對比度檢查器實際測量搭配的文字色和背景色。

與其他配色工具的比較

工具	核心功能	免費	輸入格式	最適合的場景
Tint & Shade Generator	單色深淺漸變	是	Hex	建立色彩階層、CSS 變數色表
Coolors	多色配色方案	是	隨機或指定	從零開始尋找配色靈感
Colorion	五色調色盤	是	隨機或指定	快速取得一組和諧配色
PaletteMaker	配色預覽與套用	是	Hex	把配色套用到設計範例預覽
CSS Gradient	漸層背景語法	是	Hex/RGB	產生 CSS 漸層背景語法
Tailwind Ink	AI 配色推薦	是	Hex	從一個顏色延伸出建議色
Alwane	網站色碼分析	是	URL	分析競爭對手的色彩使用

這些工具之間是互補關係。一個典型的工作流程是：先用 Coolors 找到品牌主色調，再把主色丟進 Tint & Shade Generator 產生深淺色階，然後用 CSS Gradient 漸變背景產生器把其中幾個色碼組合成漸層背景。PaletteMaker和Alwane 網站色碼分析工具則分別從配色預覽和競品分析的角度輔助決策。

進階技巧與實務建議

多品牌色的命名慣例。同時處理多個品牌色時，建議採用「色彩名稱 + 層級數字」格式，例如 --blue-500、--green-500、--amber-500，跟 Tailwind CSS 慣例一致，團隊協作時溝通成本較低。

漸層數量的策略。工具固定產生各十階 Tint 和 Shade，但你不一定要全部採用。小型專案五到七個層級通常夠用，中大型產品建議九到十一個。判斷標準：如果有三個以上 UI 元件需要同一顏色的不同深淺版本，就應該採用更多層級。

從色碼到完整 CSS 變數清單。產出色碼後，開一個文字編輯器把所有色碼按層級排好，批次加上 CSS 變數宣告語法，整個過程約三分鐘。如果使用 Blobs 圖形產生器或 SVG Waves 波浪產生器，可以直接把色碼貼進去預覽漸層效果。

在設計輸出方面，DesignCap 線上圖片編輯器和 Fotor 免費修圖軟體都支援自訂色彩，能把色碼直接用到海報或社群圖片。3D Book Image CSS 產生器可以把品牌色彩套用到 3D 書本展示效果。Artify.co 線上圖片設計工具提供豐富範本，Loose Drawing 日本免費插圖素材有內建調色盤可在素材上實驗品牌色彩。

適合誰，不適合誰

適合使用的情況：已有品牌主色，需要建立完整的 CSS 色彩系統；前端工程師需要快速產生 hover、active、disabled 等狀態色；UI 設計師需要統一的色彩階層來維持視覺一致性。

不適合使用的情況：還在找配色靈感，需要從零開始建立配色方案（改用 Coolors）；需要漸層背景的 CSS 語法（改用 CSS Gradient）；需要從圖片或網站提取色彩（改用 Alwane）。

優缺點整理

優點：

完全免費，無需註冊、無使用次數限制、無廣告干擾。
操作極度簡潔，三個動作完成所有工作。
支援批次輸入，多個品牌色一次處理。
一鍵複製色碼，Hash Tag 開關能靈活適應不同場景。
運算結果與 Chrome DevTools、Sass、Less、PostCSS 一致。

缺點：

無法自訂漸層階數，固定各十階。
只支援 Hex 格式輸入，RGB 或 HSL 需先轉換。
沒有帳號和儲存功能，無法保存產生記錄。
沒有提供 API，無法在開發流程中自動化呼叫。
缺少對比度檢查，不會自動標示 WCAG 合規狀態。

常見問題 FAQ

Tint & Shade Generator 是免費的嗎？需要註冊嗎？

完全免費，不需要註冊帳號。打開瀏覽器進入網站就能直接使用，沒有使用次數限制，也沒有付費升級提示。

支援哪些色彩格式輸入？只能用 Hex 嗎？

截至 2026 年 5 月，工具只接受 Hex Color 格式（六位十六進位色碼）。如果手上的色碼是 RGB 或 HSL 格式，需要先轉換。大部分設計工具（Figma、Sketch、Photoshop）都有內建的格式轉換功能。Free Online File Converter也能幫忙處理格式轉換。

產生的漸變色可以商用嗎？

可以。漸變色是基於數學運算產生的色碼，不涉及版權問題。輸入的 Hex 色碼經過 HSL 明度的等比調整，產出的就是一組數值，可自由用於個人或商業專案。

如何在 Tailwind CSS 中使用產生的色碼？

在 tailwind.config.js 的 theme.extend.colors 裡加入自訂色彩，每個顏色用物件表示，鍵值是層級數字（100 到 900），值是複製來的 Hex 色碼。設定完成後就能用 bg-primary-500、text-primary-700 這類 class 引用色彩。一般 CSS 檔案則透過 :root 的 Custom Properties 定義，不綁定框架。