TingYu Tools

颜色阴影/明度

从基色生成明/暗阶梯,复制 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