色調與陰影產生器

關於本工具

淺色調與深色調產生器可從任意基礎顏色建立更明亮和更暗的變體。淺色調透過將基礎顏色與白色混合（增加亮度）產生，深色調透過與黑色混合（降低亮度）產生。

此工具產生最多5層淺色調和5層深色調，加上原始基礎顏色，為您提供以所選色調為中心的11步調色板。點擊每個色板可複製其十六進位代碼。

使用方法

1. 使用拾色器選擇基礎顏色，或輸入十六進位代碼。
2. 使用範例按鈕快速嘗試預設顏色。
3. 調整層級數（3-5）以控制調色板寬度。
4. 點擊任意色板複製其十六進位代碼，或點擊複製全部。

使用情境

設計系統需要為每種品牌顏色提供系統性的色階。UI設計師從單一操作顏色產生懸停、啟用和停用狀態，前端開發人員建立一致的按鈕、徽章和卡片顏色變體。

常見問題

• 淺色調和深色調有什麼區別？ — 淺色調與白色混合（變亮），深色調與黑色混合（變暗）。色調與灰色混合，此工具不產生。
• 層級是如何計算的？ — 每個層級將基礎顏色與白色或黑色按10%、30%、50%、70%、90%的比例混合，提供一致的視覺步驟。
• 可以從這裡取得CSS變數嗎？ — 輸出為十六進位代碼，可以貼到CSS中作為--color-500、--color-400等使用。