由基礎顏色產生 10-12 個明暗色階，並匯出可用於設計權杖（Design Token）的 CSS 變數。
從基礎顏色生成 10 到 12 階明暗色票，並輸出可直接納入設計權杖的 CSS 變數。
根據輸入的 HEX 顏色建立一組由淺到深的色階。
可在 10 階與 12 階之間切換，方便對齊不同設計系統的刻度。
會輸出 `:root` CSS 變數，適合直接複製到設計權杖或樣式基礎層。
品牌藍
#2563EB
青綠色樣本
#14B8A6
12 階輸出
base=#14B8A6, steps=12
色票階梯
50: #EFF6FF ... 500: #3B82F6 ... 900: #1E3A8A
設計權杖 CSS
:root {
--shade-50: #eff6ff;
--shade-100: #dbeafe;
...
}單色複製
點選任一色票即可複製對應 HEX 值。
把色票直接當成語意命名使用
先建立基礎色階，再另外映射到 primary、success、warning 等語意權杖。
基礎顏色本身過亮或過暗
先調整 base color，再重新生成整組色階。
沒有驗證文字與背景對比度
色票生成後，仍需逐一檢查實際元件的可讀性。
顏色明暗階產生器適合建立基礎色票與設計權杖草稿；正式採用前，仍應搭配元件對比度與品牌規範複核。
10 階與 12 階該怎麼選？
若設計系統已固定刻度就跟隨現有規範；若還在整理基礎層，可先比較兩組在元件上的可用性。
輸出的變數命名可以直接上線嗎？
工具提供基礎色階變數，正式上線前通常還會再映射到語意化的設計權杖名稱。
色票能保證可存取性嗎？
不能，仍需逐一驗證文字、圖示與背景組合的對比度。