任務路徑 / 從輸入到結果
如何產生顏色色階
- 01
設定基礎顏色
在「基礎顏色」下輸入十六進制值——#RGB、#RGBA、#RRGGBB 和 #RRGGBBAA 都可以，輸入框初始為 #6D5EF8。基礎顏色永遠位於成品色階的正中間。
- 02
選擇色階數量
把「色階數量」設為 3 到 20 的整數——預設是 9。奇數數量能讓明暗兩側圍繞基礎顏色均勻分布；偶數數量同樣讓基礎顏色居中，只是淺色側會多一個色塊。
- 03
產生色階
點擊「產生色階」。色板從深暗色階經過基礎顏色延伸到淺亮色階，每張色卡都帶編號並標註十六進制值，因此位置 1 永遠是最深的一級。
- 04
瞭解混合行為
基礎顏色之下的色階向黑色混合，之上的亮色階向白色混合，但混合朝任一極端的推進都不會超過 78%。兩端的顏色保持有彩度、可用，而不會塌縮成接近純黑或純白。
- 05
載入範例色階
點擊「載入範例」會圍繞 #0EA5E9 產生七級色階——一套完整的參考執行，方便你在輸入自己的品牌色之前先查看。「重設」恢復 #6D5EF8 的基礎顏色和數量 9。
- 06
複製或下載符記
點擊「複製輸出」複製由 --toolars-shade-1 … 自訂屬性組成的 :root 程式碼區塊，或點擊「下載」儲存為 toolars-color-shades.css，可以直接貼進樣式表。每張色卡上也會顯示十六進制值，方便單獨複製。