Tailwind 色階產生器
Tailwind 色階產生器是一款只要指定一個基準色，就能自動產生 Tailwind 風格 50-950（11 階）明度色階的免費 Tailwind 顏色產生器。讓您能像 Tailwind 預設調色盤一樣，從品牌色或喜歡的單一顏色瞬間建立整組色階，直接用於設計系統或 Tailwind 設定顏色（主題設定）。
可透過 URL 分享或儲存目前的色階。
產生的色階
- 50#EFF6FE
- 100#DDEBFD
- 200#C1DCFC
- 300#95C4FC
- 400#58A3F8
- 500基準#1E90FF
- 600#006BE3
- 700#005BC7
- 800#004AA9
- 900#004185
- 950#04294F
匯出
@theme {
--color-brand-50: oklch(0.971 0.013 253.2);
--color-brand-100: oklch(0.936 0.028 253.2);
--color-brand-200: oklch(0.885 0.052 253.2);
--color-brand-300: oklch(0.808 0.094 253.2);
--color-brand-400: oklch(0.704 0.146 253.2);
--color-brand-500: oklch(0.652 0.19 253.2);
--color-brand-600: oklch(0.549 0.201 257.7);
--color-brand-700: oklch(0.494 0.184 258.1);
--color-brand-800: oklch(0.432 0.165 258.7);
--color-brand-900: oklch(0.382 0.128 255.5);
--color-brand-950: oklch(0.281 0.081 253.2);
}
色階的產生全程在您的瀏覽器中完成，輸入的顏色不會傳送到外部伺服器。
相關工具
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器，可用放大鏡依像素精準拾取，支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
- 設計與配色
- 效率
圖片配色擷取
線上圖片取色工具，上傳圖片即可自動從圖片擷取主要配色（代表色／主色）並產生調色盤。支援 HEX/RGB/HSL 三種格式、顯示各顏色占比、可調整 4–12 種顏色，並能匯出 JSON、CSS 變數、SCSS 或 Tailwind 設定。圖片不上傳伺服器，全程在瀏覽器中完成，免費且無需註冊。
- 擷取
- 設計與配色
配色產生器
只要選一個基準色，就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式，並提供對比度參考，全程在瀏覽器中完成。
- 產生器
- 設計與配色
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具，支援透明度（RGBA、8 位 HEX）與 CMYK 參考值，一鍵複製任意格式，全程在瀏覽器中完成。
- 轉換
- 設計與配色
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具，依 WCAG 2.1/2.2 判定 AA、AAA 是否合格，並支援合格色建議、色覺（色盲）模擬與 APCA，全程在瀏覽器中完成。
- 檢查
- 設計與配色
- 無障礙
CSS 漸層產生
以 GUI 操作顏色、方向與色彩停駐點,即可自動產生 CSS 漸層程式碼的免費漸層產生器。支援線性、放射、圓錐（conic）漸層,可調整不透明度,並輸出 CSS 變數、Tailwind、SCSS 格式與分享 URL。複製即可使用,全程在瀏覽器中完成。
- 產生器
- 開發
- 設計與配色
Tailwind 色階產生器是什麼?
Tailwind 色階產生器是一款只要指定一個基準色，就能自動產生 Tailwind 風格 50-950（11 階）明度色階的免費 Tailwind 顏色產生器。讓您能像 Tailwind 預設調色盤一樣，從品牌色或喜歡的單一顏色瞬間建立整組色階，直接用於設計系統或 Tailwind 設定顏色（主題設定）。
基準色除了可輸入像 #1E90FF 這樣的 HEX，也支援 rgb(30, 144, 255) 或 oklch(0.65 0.19 253)，還能透過原生顏色選擇器挑選，或用「隨機」按鈕尋找顏色。工具會依輸入色的明度自動判定最接近的色階（50-950），並在該色階維持原樣保留輸入色，再產生其餘各階。配色採用 Tailwind CSS v4 採用的 OKLCH 色彩空間計算，因此各階明度在視覺上更為均勻，能形成自然的色階。
產生的色階可一次以 Tailwind v4（@theme 的 OKLCH 變數）、Tailwind v3（tailwind.config.js 的 theme.extend.colors）、CSS 變數、JSON 等多種格式匯出。指定顏色名稱（例如 brand、primary）後會反映到變數名稱，複製後即可直接貼進 tailwind config 或樣式表。各階數值可切換為 HEX、OKLCH、HSL、RGB 顯示與複製，每個色塊也會顯示黑字、白字哪一種較易閱讀（對比度參考）。
色階的計算全程在您的瀏覽器中完成，輸入的顏色不會傳送到外部伺服器。無需註冊帳號、也不必點擊廣告，立即就能使用。
使用方法
- 在輸入框輸入基準色（支援 HEX、RGB、HSL、OKLCH），或用顏色選擇器挑選顏色。想找靈感時也可使用「隨機」按鈕。
- 視需要輸入顏色名稱（例如 brand、primary）。它會反映到匯出時的變數名稱。
- 確認產生的 50-950 共 11 階色階。與輸入色最接近的色階會標上「基準」標籤，該顏色會維持原樣保留。
- 切換顯示格式（HEX、OKLCH、HSL、RGB），各階數值可用複製按鈕複製。
- 在「匯出」切換 Tailwind v4、Tailwind v3、CSS 變數、JSON 等分頁，用「複製」按鈕複製整段程式碼，貼進 tailwind.config 或樣式中。
- 按下「複製 URL」，即可取得能重現目前色階的分享 URL，可用於團隊分享或加入書籤。
使用情境
- 想從一個品牌色產生 Tailwind 的 50-950 色階，並直接設定到 tailwind.config 的前端工程師。
- 想遷移到 Tailwind CSS v4，並以 @theme 與 OKLCH 定義自訂顏色的開發者。
- 想在設計系統中，為按鈕、連結等狀態（hover、active）有系統地整理出不同明度顏色的設計師。
- 想配合 shadcn/ui 等元件，準備自己的主色（primary）色階的使用者。
- 想以既有的一個顏色為起點，一次備齊從淺背景色（50、100）到深文字色（900、950）的使用者。
- 想把決定好的色階透過分享 URL 交給團隊，或日後重現同一份色階的使用者。
注意事項
- 色階的產生全程在瀏覽器中完成，輸入的顏色不會傳送到外部。
- 基準色可用 HEX、RGB、HSL、OKLCH 各格式輸入。不支援透明度（Alpha）。
- 工具會依輸入色的明度自動判定最接近的階，並在該階直接採用輸入色（例如：亮色會放在 200、深色會放在 800 等位置）。
- 顏色計算使用與 Tailwind CSS v4 相同的 OKLCH 色彩空間，超出 sRGB 顯示範圍的顏色會自動調整到範圍內。因此不會與實際的 Tailwind 標準調色盤完全一致。
- 分享 URL 只包含基準色、顏色名稱與顯示格式。開啟該 URL 即可以相同設定重現色階。