Color Token Generator

為什麼每個設計系統都需要顏色色階

顏色色階是統一視覺語言的核心支柱。沒有它，設計師和開發者只能做臨時決策——「懸停狀態用稍深一點的藍色」或「卡片背景用很淺的版本」——這會產生數十個幾乎相同卻毫無系統關係的十六進位值。久而久之，程式碼庫中充斥著一次性顏色值，無法統一更新。

一個構建良好的11級色階能解決這個問題：淺色檔（50–200）用於有色調的表面和背景，中間檔（300–600）承載按鈕、連結和焦點環等互動元素，深色檔（700–950）負責文字和高對比度邊框。每個決策都能追溯到色階，更改品牌顏色只需更新一個基礎值，而無需在樣式表中搜尋數百個十六進位代碼。

Tailwind 顏色色階規範

Tailwind CSS 推廣了11檔數字命名規範——50、100、200至900、950——此後被 Radix UI、shadcn/ui、Material Design 3 以及大多數現代元件庫生態系統採納為標準。其優勢在於可預測性：使用過這些系統的開發者能立即判斷出500級令牌是中範圍基礎色，100級令牌是非常淺的色調，800級令牌是用於淺色背景的深色調。

本工具產生的色階與 Tailwind 內建調色板（藍色、紅色、綠色等）視覺相容，便於新增能與 Tailwind 預設值自然融合的自訂品牌顏色。Tailwind 匯出格式與 tailwind.config.js 中 theme.extend.colors 的期望格式完全一致，CSS 變數匯出格式適用於 Tailwind v4 的 @theme 區塊。

理解 WCAG 對比度比率

文字顏色與背景之間的對比度比率由相對亮度計算——衡量每種顏色在人眼中的感知亮度。WCAG 公式為 (L1 + 0.05) / (L2 + 0.05)，其中 L1 是較亮顏色的亮度，L2 是較暗顏色的亮度。結果範圍從 1:1（顏色相同，無對比度）到 21:1（白底黑字，最大對比度）。

WCAG AA 要求一般文字達到 4.5:1，大文字（18pt+）達到 3:1。在本工具中，每個色塊的白色文字和黑色文字對比度比率都會被計算，並以 W✓ 和 B✓ 徽章顯示。中間色階檔（400–600）通常兩個閾值都無法通過——它們適用於裝飾性填充和互動強調色，而非文字背景。

色彩空間：HSL、OKLCH 及其重要性

傳統調色板產生器在 HSL（色調、飽和度、亮度）色彩空間中工作。HSL 直觀且支援廣泛，但感知上並不均勻：相同的數值亮度步長在不同色調下看起來差異顯著。從 50% 到 60% 的亮度變化在藍色中看起來是大跳躍，在黃色中卻是小步驟，因為人眼在整個光譜中對顏色的感知方式不同。

OKLCH 是一個感知均勻的色彩空間，無論色調如何，相同的數值亮度步長對人眼來說都顯得相等。Tailwind CSS v4 正是因此在內部切換到了 OKLCH。對於調色板產生器來說，OKLCH 產生的色階中每一檔都真正看起來像是向更淺或更深方向的均勻一步——對於無障礙調色板設計尤為寶貴。

匯出為 CSS、Tailwind、SCSS、JSON 和 DTCG

CSS 變數匯出在 :root { } 內使用 --color-N 命名模式。Tailwind 匯出直接插入 tailwind.config.js 中的 theme.extend.colors——將 'color' 重新命名為你的令牌名稱（例如 'primary' 或 'brand'）。SCSS 匯出使用與 Sass 和 Less 相容的 $color-N 變數語法。JSON 匯出遵循 W3C DTCG 令牌格式，與 Style Dictionary、Theo、Supernova 以及現代令牌管道生態系統中的任何工具相容。

所有四種格式輸出相同的 11 個十六進位值，因此產生後在格式間切換無需任何更改。點擊任意單個色塊可將其十六進位值直接複製到剪貼簿——在需要為 Figma 設計檔案、一次性內聯樣式或快速顏色參考取得特定色調時非常實用。

與 Coolors、Adobe Color 和 Material Design Color Tool 的比較

Coolors.co 是一款調色板探索工具，專為產生隨機5色組合而設計。非常適合尋找靈感，但不產生令牌色階，不輸出 Tailwind 設定，也不顯示每個色塊的 WCAG 對比度徽章。

Adobe Color 提供基於色輪的色彩和諧產生及部分匯出選項，但儲存和匯出調色板需要 Adobe 帳號。它不產生 Tailwind 相容的顏色色階或 DTCG JSON，也缺乏每檔對比度比率顯示。

Google 的 Material Design Color Tool 產生10檔色階（缺少50檔），專為 Material Design 主題設計——輸出結果無法乾淨地對應到 Tailwind 或其他生態系統。

本工具產生完整的11級色階，在每個色塊上顯示 WCAG W✓/B✓ 徽章，匯出四種格式，無需登入。所有操作在瀏覽器中執行——顏色資料不會上傳至伺服器。