无需登录 数据私有 本地保存

色调与色度生成器 - 明暗渐变色卡制作

24
0
0
0

色调与色度生成器

基于任意基础色，一键生成 Tint（加白变亮）与 Shade（加黑变暗）的完整渐变色卡

基础颜色
预设颜色
Tint 数量
4
Shade 数量
4
步长 (%)
10%
显示格式： |
浅色 Tints 深色 Shades
点击任意色块即可复制颜色值

常见问题与知识

什么是色调 (Tint) 和色度 (Shade)？

Tint（色调）是在基础色中加入白色，使颜色变得更亮更柔和；Shade（色度）是在基础色中加入黑色，使颜色变得更暗更深沉。两者结合可以创建完整的明暗渐变体系，广泛应用于UI设计、品牌配色和插画创作中。

Tint 和 Shade 有什么区别？

Tint 提升颜色的亮度（Lightness），保持饱和度递减趋向白色，适合做背景、悬停状态、卡片底色；Shade 降低亮度，保持色相加深趋向黑色，适合做文字色、边框、阴影层次。两者配合使用可构建设计系统中的完整色彩层级。

如何在设计中使用渐变色卡？

在UI设计中，Tint 色常用于背景、禁用状态、次要按钮；Shade 色适用于主按钮hover态、标题文字、图标颜色。使用统一色系的Tint/Shade渐变可以让界面层次分明且视觉和谐，避免使用纯黑或纯白破坏色彩一致性。

生成的颜色值准确吗？支持哪些格式？

本工具在RGB色彩空间中进行精确的线性插值计算，确保每个Tint/Shade色阶过渡均匀自然。支持 HEX（如#3498DB）、RGB（如rgb(52,152,219)）和 HSL（如hsl(207,70%,53%)）三种主流格式输出，可直接用于CSS、设计软件和开发代码中。

步长参数如何设置？

步长控制每个色阶之间的白色/黑色混合比例。步长越大（如20-25%），色阶变化越明显，适合需要强烈对比的场景；步长越小（如5-8%），色阶过渡越细腻，适合微妙的渐变设计。推荐默认10%步长，能获得视觉上均衡的4-5级色阶。

Tint/Shade 色卡在CSS中如何使用？

生成的颜色值可直接复制到CSS中作为CSS变量或直接使用。例如：--primary-light: #5DADE2;（Tint）、--primary: #3498DB;（Base）、--primary-dark: #1B4F72;（Shade），构建完整的CSS design tokens体系，便于全局主题管理。

🔧 相关工具