Tint & Shade Generator 漸層色階產生器，一鍵複製色碼

用 AI 摘要這篇文章：

ChatGPT Claude Perplexity Google Grok

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

深淺階產生器各有專長，Kigen 免費配色產生器把單一色展開成 Tailwind 慣例的 50 到 950 色階，連 CSS 變數與設計 Token 檔都一起匯出。

如果你需要的是多色配色靈感，可以改用 Coolors 免費配色工具或 Colorion 調色盤產生器。但如果品牌已有主色，需要快速整理出可用的深淺色表，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 值，點一下就自動複製到剪貼簿。結果區上方的「Show hashtags」按鈕可以切換色碼顯示與複製時是否包含 # 符號，寫 CSS 通常需要帶 #，貼到 Tailwind 設定檔或某些設計工具則不帶 # 比較方便。

結果區的控制列還提供幾個衍生功能：階數切換有 5、10、20 格三檔（對應 20%、10%、5% 步進，預設 10 格，切到 20 格時整組會展開成三十九個色塊）；「Share link」會產生一條把顏色、階數與 hashtag 狀態都帶在網址裡的分享連結，貼給同事就能重現同一組色階；色盤標題會自動辨識輸入顏色的名稱，下拉選單還能加掛互補、分裂互補、類比、三等分四種色輪關聯色盤。頁面右上角有深色模式切換，輸入框旁附有揀色器（Pick a color），沒有現成色碼也能直接選色帶入。

批次輸入的實際應用場景：假設品牌有三個核心色（主色 #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，這個規則提供了一個有邏輯可循的起點。要快速產出這類變數宣告，用結果區的「Export palettes」選 CSS 格式就能匯出帶層級命名的整份色階變數，不必手動逐格抄寫。

如果你對背景樣式有更多需求，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 層級用來做淺色背景，會是比較安全的組合。建議用瀏覽器開發者工具或線上對比度檢查器實際測量搭配的文字色和背景色。

與其他配色工具的比較

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

進階技巧與實務建議

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

漸層數量的策略。工具的階數有 5、10、20 格三檔可切換，但你不一定要全部採用。小型專案五到七個層級通常夠用，中大型產品建議九到十一個。判斷標準：如果有三個以上 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）。

免費免註冊、匯出分享齊備：階數只有三檔、輸入只吃 Hex

優點：

• 完全免費，無需註冊、無使用次數限制。
• 操作極度簡潔，三個動作完成所有工作。
• 支援批次輸入，多個品牌色一次處理。
• 一鍵複製色碼，Show hashtags 開關能靈活適應不同場景。
• 運算結果與 Chrome DevTools、Sass、Less、PostCSS 一致。
• 內建 Hex#、Hex、RGB、CSS、JSON 五種匯出與分享連結，還有官方 Figma 外掛能把同樣的色階直接建進設計稿。

缺點：

• 漸層階數只有 5、10、20 格三個檔位，無法任意指定。
• 主要輸入只支援 Hex 格式，RGB 或 HSL 需先轉換。
• 沒有帳號系統，產生的色階要靠分享連結或匯出檔保存。
• 沒有提供 API，開發流程自動化只能靠網址參數或 JSON 匯出。
• 缺少對比度檢查，不會自動標示 WCAG 合規狀態。
• 頁面掛有一則 Carbon 贊助廣告，不打斷操作，但確實存在。

常見問題 FAQ

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

完全免費，不需要註冊帳號。打開瀏覽器進入網站就能直接使用，沒有使用次數限制，也沒有付費升級提示。頁面上有一則 Carbon 贊助廣告和「Support this project」贊助連結，這是專案目前的主要維持方式。

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

截至 2026 年 9 月，主要輸入仍只接受 Hex Color 格式（六位十六進位色碼），但輸入框旁附有揀色器，可以直接選色帶入。如果手上的色碼是 RGB 或 HSL 格式，需要先轉換。大部分設計工具（Figma、Sketch、Photoshop）都有內建的格式轉換功能。Free Online File Converter也能幫忙處理格式轉換。

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

可以。漸變色是基於數學運算產生的色碼，不涉及版權問題。輸入的 Hex 色碼經過 RGB 通道的等比例運算（Tint 往白色、Shade 往黑色按步進比例移動），產出的就是一組數值，可自由用於個人或商業專案。

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

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

一次最多能輸入幾個顏色？

工具沒有明確標示上限，實際測試十到十五個色碼都能正常運作。考量頁面閱讀體驗，建議每次控制在五到八個以內。超過這個數量可以分批處理。

下一步：三個立即可以做的事

1. 打開工具產生你的品牌色階。準備好品牌主色的 Hex 色碼，前往 maketintsandshades.com 輸入並產生漸變色。預期結果：十九個深淺不同的色塊（預設 10 格檔位，可切換 5 或 20 格），每格都能一鍵複製。

2. 把色碼整理成 CSS 變數清單。用「Export palettes」的 CSS 格式匯出變數清單，或開一個文字編輯器把色碼按層級排好，加上 CSS Custom Properties 宣告語法。判斷標準：500 層級放主色，100 到 400 放 Tint，600 到 900 放 Shade。幾分鐘內完成，後續維護成本大幅降低。

3. 用對比度檢查器驗證關鍵組合。把預計搭配使用的文字色和背景色丟進瀏覽器開發者工具或線上對比度檢查器，確認符合 WCAG AA 標準（一般文字 4.5:1 以上）。這個步驟多花幾分鐘，但能確保設計對所有使用者友善。

如果你在規劃整體網站色彩，熱門 WordPress 佈景主題推薦裡有能靈活自訂色彩的主題選擇。免費圖庫與素材懶人包收錄了四十七個可商用圖庫和素材網站，線上學習資源則有更多設計工具可以探索。