颜色色调生成器

步 1 / 2

基础颜色

步骤

下一个

色调是将某种颜色与白色混合后产生的结果，每一步都会变得更浅。该生成器以您的基础色为输入，生成一系列渐变渐浅的色调，适用于设计系统色板范围（100→400）、细腻的背景填充效果、深色原色上的悬停状态显示，以及需要突出强调但又保持低调的徽标/提示背景。

色调如何生成

下表展示了该工具在默认10级下生成的结果：

在单一底色周围组合明度（较浅）与色调（较深）以形成完整色阶：

该设计风格与Tailwind、Material、Open Color、Radix UI以及大多数主流设计系统相契合，通常采用10至11级的色阶体系。

该生成器直接在RGB色彩空间中混色。随着白色增加，饱和度的下降速度快于感知明度的上升，因此最上面的几级看起来发白或偏灰。这是RGB混色的正常表现：

极浅色调（第8级及以上）接近纯白色，在白色背景上视觉上难以区分。适用于以下场景：

但对于需要用户辨识明显颜色的按钮或标签而言并不理想。可将浅色与深色元素（如边框、文字）搭配使用，以增强视觉统一性。

该生成器直接在RGB中混色，而RGB插值会随着明度升高而降低饱和度，因此最上面的几级会偏向白色。改用OKLCH或LAB插值则可保留基础色的明显痕迹；如果这一点很重要，请使用支持OKLCH的设计工具。

效果相似但不完全相同：与白色混合时，饱和度和明度均按比例降低；HSL 调整明度可独立提升亮度值。色调呈现更自然（类似颜料质感）；HSL 若过度调高明度，则可能产生不真实的粉彩效果。

是的，暗模式通常需要采用不同的“亮度等级表“，因为背景本身已经较暗。许多系统会反转该分级标准（暗模式下的50级对应于明模式下900级的白色亮度）。

基于同一基准生成5级色阶（50-500）和5级色度梯度（500-900），并将其串联构成完整的10至11级设计系统色阶。