颜色阴影/明度
从基色生成明/暗阶梯,复制 HEX。
基础设置
生成的颜色阶梯数量(3-20)
算法
方向
💡 使用说明
什么是颜色阴影?
颜色阴影生成器可以从一个基色生成一系列渐变的浅色和深色变体,常用于设计系统的调色板创建。
算法说明
- 混合算法: 混合算法:通过与白色/黑色混合
- HSL 明度调整: HSL 算法:调整 HSL 明度值
- 乘法算法: 乘法算法:通过乘法因子调整
功能特点
- 三种颜色阴影算法
- 支持 3-20 个阶梯
- 双向生成(浅色/深色)
- 一键复制所有颜色
- 实时预览效果
应用场景
- 设计系统调色板创建
- UI 组件颜色变体
- 主题色阶梯生成
- 按钮悬停状态颜色
使用技巧
- 建议使用 5-10 个阶梯
- 混合算法最接近自然过渡
- HSL 算法保持色相一致
- 深色阶梯适合按钮悬停效果
浅色阶梯
10#edf4fe阶梯 10#dbe8fd阶梯 9#caddfd阶梯 8#b8d2fc阶梯 7#a6c6fb阶梯 6#94bbfa阶梯 5#82aff9阶梯 4#70a4f8阶梯 3#5f99f8阶梯 2#4d8df7阶梯 1基色
#3B82F6基础颜色深色阶梯
10#3676e0阶梯 1#306ac9阶梯 2#2b5fb3阶梯 3#26539d阶梯 4#204786阶梯 5#1b3b70阶梯 6#152f59阶梯 7#102343阶梯 8#0b182d阶梯 9#050c16阶梯 10