顏色明暗生成器 使用指南
設計系統常用同一色相的 50–900 梯度。本工具按 HSL 明度變化生成階梯,便於批量產出一致配色。純前端,不上傳。
核心功能
- 基色→梯度
- HSL 明度步進
- CSS 變量輸出
- 深淺預覽
- 本地處理
適用場景
- 設計系統配色
- 按鈕/狀態色階
- 圖表色板
使用步驟
- 輸入基色
- 選檔位數
- 生成複製梯度
實用技巧
- 用 HSL 更均勻
- 避免兩端過暗/過亮
- 可直接出 CSS 變量
常見問題
- 和調色板工具有何不同?
- 本工具只做單色明暗梯度,不做互補/類比。
- 能給個例子嗎?
- 輸出 50/100/.../900 共 10 檔。