配色產生器
選擇一個基礎顏色，立即產生一組由淺到深的漸層色階，隨時可複製到您的設計系統中。
🔒 在你的瀏覽器本機處理
載入中…
使用方法
- 在「基礎顏色」欄位輸入 HEX 色碼，或點擊色票選取器以視覺化方式挑選顏色。
- 只要辨識到有效的顏色，下方就會自動出現一整組色階，無需按任何按鈕。
- 色階範圍從非常淺的亮色到非常深的暗色，全部與您的基礎顏色維持相同色相。
- 點擊任一色票即可將其 HEX 色碼複製到剪貼簿——畫面上會短暫顯示「已複製！」提示，確認操作成功。
功能特色
- 從任何基礎顏色產生平滑的 9 階由淺到深色階
- 每個色階都維持相同的色相與飽和度，就像 Tailwind 自己的顏色色階一樣
- 色階中包含您輸入的確切基礎顏色，而非近似值
- 任一色票的 HEX 色碼都可一鍵複製
- 100% 在裝置端執行——您的顏色永遠不會離開瀏覽器
常見問題
這個工具會把我的顏色傳到任何地方嗎？
不會。整組色階都是透過簡單的 JavaScript 運算直接在您的瀏覽器中產生——絕不會上傳或傳送到任何伺服器。
色階是如何計算出來的？
工具會先將您的基礎顏色轉換為 HSL，接著固定色相與飽和度，並讓明度從非常淺平均遞減到非常深。您輸入的確切基礎顏色會被放在色階的中間位置。
我可以在 Tailwind 或其他設計系統中使用這些配色嗎？
可以。這組色階遵循與 Tailwind 的 50/100/.../900 色階相同的概念——單一色相由淺到深的漸層——因此您可以直接把 HEX 色碼複製到自己的主題或 CSS 變數中。
可以輸入哪些顏色格式？
僅限 HEX 色碼，可加或不加開頭的 #，支援 3 位數縮寫（如 #abc）或 6 位數（如 #3b82f6）。若想以視覺化方式挑選，也可以使用色彩選擇器。
為什麼會出現錯誤訊息？
您輸入的文字不符合可辨識的 HEX 色碼格式。請確認格式類似 #3b82f6（或 3b82f6，或縮寫的 #abc）。