颜色色阶生成器
为任意颜色生成明暗色阶，适合设计系统。
100#e7f0fe
200#cee0fd
300#9ec1fa
400#6da2f8
500#3c83f6
600#0b64f4
700#0950c3
800#073c92
900#052861
1000#021431
How to Use
- 输入基础颜色（HEX、RGB 或 HSL 格式），生成器自动生成从最浅色调（与白色混合）到最深暗调（与黑色混合）的完整色阶，包含 10–20 个渐变变体。
- 调整色阶步数和明暗增量，在线性插值（均匀步进）和感知插值（视觉上更均匀的步进，考虑人眼对亮色比暗色更敏感的特性）之间切换。
- 导出色阶：复制单个 HEX 值，下载 CSS 自定义属性块用于设计令牌，或一次性复制所有值，以兼容 Tailwind 配置、Figma 或其他设计系统工具的格式输出。
Frequently Asked Questions
- 色调（tint）和暗调（shade）有什么区别？
- 色调是将颜色与白色混合，使其变亮。暗调是与黑色混合，使其变暗。中间调是与灰色混合。生成器可以从基色生成色调、暗调或两者兼有。
- 设计系统需要多少个色阶？
- 大多数设计系统使用受 Material Design 和 Tailwind CSS 启发的 10 级色阶（50、100、200……至 900），为背景色、边框色、文字色和悬停状态提供足够的精度。生成器默认生成 10 级色阶，但你可以自定义数量。
- 可以调整亮度插值曲线吗？
- 可以——在线性插值和感知插值之间切换。线性模式在 HSL 亮度上均匀分布各步（数学上均匀），感知模式考虑人眼对亮度的非线性感知。感知模式通常生成更实用、视觉上更平衡的色阶。