顏色深淺產生器 — Tailwind 風格
選擇任意基礎色，即可產生完整的11段色階（50、100、200、300、400、500、600、700、800、900、950），與Tailwind CSS和Material Design的色階規範一致。每個色階均顯示相對白色或黑色文字的WCAG無障礙對比度等級。點擊色塊複製hex代碼，或點擊「複製CSS」將所有色階匯出為CSS自訂屬性。
運作原理
顏色色階的運作原理
顏色色階是基礎色由淺到深的一系列系統化變體，用於在UI設計中建立視覺層次和無障礙對比度。Tailwind CSS的規範使用50、100、200、300、400、500、600、700、800、900和950共11段色階。數字越小顏色越淺（HSL明度越高），數字越大顏色越深。500段通常最接近輸入的基礎色。
本工具透過將輸入的hex顏色轉換為HSL（色相、飽和度、明度），在保持色相和飽和度不變的同時，將每段色階對應到預定義的明度值來產生色階。50段對應約97%明度（接近白色），500段對應約52%（中間值），950段對應約12%（接近黑色）。這種方式能在所有亮度等級上保持顏色特性，產生視覺上一致的色板。
色板中的WCAG對比度等級
色板中的每段色階都會顯示相對黑色或白色文字（取可讀性較強者）的WCAG（網頁內容無障礙指引）對比度等級。等級標準為：AAA（對比度≥7:1，最佳無障礙）、AA（≥4.5:1，一般文字必達標準）、AA Large（≥3:1，僅適用於大號文字和UI元件）以及Fail（<3:1，不適合用於文字）。在許多地區，符合WCAG 2.1 AA標準是無障礙存取的最低法律要求。
使用顏色色板建構UI時，請為背景上的文字選擇AA或AAA等級的色階。通常情況下，50~300段與深色文字有較強對比，700~950段與白色文字有較強對比。中間色階（400~600）對於小號文字通常處於AA Large或Fail等級，適合用於裝飾元素、邊框或大號白色文字的背景，但不適合用於小號本文文字。
在CSS和設計系統中使用色板
點擊「複製CSS」按鈕，可將色板匯出為:root區塊中的CSS自訂屬性（CSS變數），直接貼到樣式表中即可使用。例如，blue-500變數會輸出為--color-500: #3b82f6（具體取決於您選擇的顏色）。您可以根據專案需求修改變數前綴，例如--brand-500、--primary-500、--blue-500等。CSS自訂屬性具有層疊特性，可以按元件或主題進行覆蓋。
Tailwind CSS、Material Design、Ant Design、Chakra UI等設計系統均採用編號色階作為顏色體系。有了一致的色階，就能自信地做出設計決策：50用於懸停背景，100用於淺色主題的啟用狀態，500用於主要按鈕，700用於按鈕懸停狀態，900用於深色背景。將所有品牌色統一在同一編號色階上，能提升設計的可預測性，減少元件層面的設計決策。
常見問題
›色階數字（50~950）代表什麼？
數字遵循Tailwind CSS顏色色階規範。數字越小顏色越淺：50接近白色，100非常淺，200和300為淺色調。中間值（500）接近原始顏色。數字越大顏色越深：700為深色，900非常深，950接近黑色。色階並非線性，而是經過調整使整個範圍內的步進在視覺上感覺均勻。
›淺色調（tint）和深色調（shade）有什麼區別？
淺色調是顏色與白色混合後變亮的結果，深色調是顏色與黑色混合後變暗的結果。用HSL術語來說，淺色調明度較高，深色調明度較低，色相保持不變。本色階中，50~400為淺色調（比基礎色更淺），600~950為深色調（比基礎色更深）。500段大致等於基礎色本身。
›這個工具是如何產生色階的？
工具將hex顏色轉換為HSL（色相、飽和度、明度）。在保持色相和飽和度不變的同時，將每段色階編號對應到目標明度值：50段→明度97%，500段→52%，950段→12%。然後將結果轉換回hex。這種方式在所有色階上都能保持顏色的特性（暖度、冷度、鮮豔度）。
›什麼是WCAG？為什麼色階會顯示等級？
WCAG（網頁內容無障礙指引）定義了可讀文字所需的最低對比度。AA要求一般文字的對比度為4.5:1，AAA要求7:1。每段色階的對比度等級顯示該背景上的黑色或白色文字是否符合AA或AAA標準，幫助您判斷哪些色階可以安全用於文字，哪些只適合裝飾性元素。
›如何在Tailwind CSS中使用這個色板？
Tailwind允許在tailwind.config.js中自訂顏色。在theme.extend.colors下新增色階：colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }。之後即可使用bg-brand-100、text-brand-700、border-brand-300等類別名稱。對於使用CSS優先設定的Tailwind v4，請將CSS變數輸出貼到主題定義中。
›為什麼所選顏色的500段色階與輸入值不完全一致？
工具會為每段色階設定特定的目標明度值——500段的目標明度約為HSL的52%。如果您的輸入顏色明度不同（例如較淺的顏色明度為70%），500段色階會被調整至52%。這樣可以產生一致的色階，但意味著500段可能與原始輸入不完全相同。如果希望500段與輸入顏色完全一致，可以手動調整hex值——色階將基於您的輸入相對產生。
›可以與CSS自訂屬性配合使用嗎？
可以。點擊「複製CSS」即可取得包含所有11段色階自訂屬性的:root區塊，隨時可用。在CSS中透過var(--color-500)、var(--color-50)等方式引用。--color-前綴可以改成任何適合您專案的名稱（--brand-、--primary-、--blue-）。自訂屬性具有層疊特性，可以限定到某個元件，也可以在媒體查詢中覆蓋以支援深色模式。
›這些色階與CSS的color-mix()函數有什麼區別？
CSS的color-mix()函數（現代瀏覽器支援）按百分比混合兩種顏色，類似於混合顏料。本工具使用預定義的明度色階（基於HSL），能產生更可控、更可預測的設計系統色階。color-mix()更適合一次性混色（例如將品牌色與20%白色混合），而本工具用於產生完整的系統化設計系統色板。兩種方法各有其適用場景。
相關工具
最後更新: