颜色淡化生成器

根据基础色生成10档Tints(淡化)和10档Shades(加深),点击色块即可复制HEX。

Tints 淡化(混入白色)

Shades 加深(混入黑色)

Tones 调色(混入灰色)

关于 颜色淡化生成器

颜色淡化生成器帮助设计师和开发者快速生成基于某一基础色的Tints、Shades和Tones系列色阶。Tints通过混入白色让颜色变浅,Shades通过混入黑色让颜色变深,Tones通过混入灰色让颜色变得柔和。

三种色阶区别

  • Tints 淡化:向基色中加入白色,常用于hover态、背景色、浅色界面。
  • Shades 加深:向基色中加入黑色,常用于active态、强调色、深色界面。
  • Tones 调色:向基色中加入灰色,使颜色更柔和中性,适合长时间阅读场景。

设计系统中的应用

在Material Design、Tailwind等设计系统中,每种颜色都包含从50到900的多个色阶。本工具使用线性混合算法生成10档色阶,可帮助你在自己的设计系统中构建一致的色阶体系。