🌈
色调梯度
由一个颜色生成从浅到深的色调(tint/shade)梯度,做渐变与色板。
本地处理 · 不上传
加载工具中…
相关：色调梯度 · tint shade · 颜色深浅 · 色阶 · 渐变色板
色调梯度由一个基准色生成加白的浅色（tint）与加黑的深色（shade）系列，形成完整的色阶。直接混合黑白生成的色阶中间容易发灰，在 HSL 空间调明度效果更好。
使用步骤
- 输入基准颜色
- 设置生成的级数
- 查看浅色与深色梯度
- 复制各级色值
使用场景
- 为设计系统生成完整色板
- 制作按钮的常态与悬浮态颜色
- 生成图表的配色系列
- 建立主题的颜色层级
小贴士
- 直接混合黑白生成的色阶在中间段容易发灰发闷，在 HSL 空间调整明度通常效果更好。
- 一套完整的色板通常需要 9 到 11 个级别，从最浅到最深，这样才够用于文字、背景、边框等各种场景。
- 深色模式下不能简单地把色板反转，因为深色背景上的颜色感知不同，通常需要单独调整饱和度。
常见问题
色阶为什么中间发灰？
直接与黑白混合会降低饱和度，中间段最明显。改在 HSL 空间只调整明度、或用感知均匀的色彩空间处理，能保持整个色阶的鲜亮度一致。
一套色板要几个级别？
通常 9 到 11 级。这样能覆盖浅色背景、边框、图标、正文、强调文字等各种用途。级别太少不够用，太多则在实际使用中难以区分。
深色模式能直接反转吗？
不能简单反转。深色背景上的同一颜色看起来更亮更饱和，通常需要降低饱和度并微调明度。多数成熟的设计系统会为深色模式单独定义一套色板。
色调梯度是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用色调梯度，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。