颜色明暗生成器 使用指南
设计系统常用同一色相的 50–900 梯度。本工具按 HSL 明度变化生成阶梯,便于批量产出一致配色。纯前端,不上传。
核心功能
- 基色→梯度
- HSL 明度步进
- CSS 变量输出
- 深浅预览
- 本地处理
适用场景
- 设计系统配色
- 按钮/状态色阶
- 图表色板
使用步骤
- 输入基色
- 选档位数
- 生成复制梯度
实用技巧
- 用 HSL 更均匀
- 避免两端过暗/过亮
- 可直接出 CSS 变量
常见问题
- 和调色板工具有何不同?
- 本工具只做单色明暗梯度,不做互补/类比。
- 能给个例子吗?
- 输出 50/100/.../900 共 10 档。