本文目录
什么是颜色的暗色调、浅色调和浊色调?
暗色调(shade)是通过将一种颜色与黑色混合、使其变暗而产生的。浅色调(tint)是通过与白色混合、使其变亮而产生的。浊色调(tone)则是通过与灰色混合、降低颜色饱和度而产生的。这三种操作结合在一起,便能从任意单一基准色生成一整套完整的调色板。
理解暗色调、浅色调和浊色调之间的区别,是色彩理论的基础。设计师利用这些变化在用户界面中营造出深度、层次和视觉对比,同时通过让每种颜色都源自同一基准色相来保持和谐。
色调生成的工作原理
颜色色调生成器接收一种基准色(例如 #3b82f6),并通过在 HSL 颜色空间中调整明度值,生成一系列更浅和更深的变体。
- HSL 操作——生成器在保持 H(色相)和 S(饱和度)不变的同时调整 L(明度)值,从而创建出感知上均匀的色阶
- 步长计算——从最浅到最深的区间被划分为若干等间距的层级(通常为 10 到 20 级),以形成平滑的渐变
- 颜色混合——为获得更自然的效果,一些生成器会使用真正的颜色混合(与白色/黑色/灰色混合),而非简单的明度调整
免费试用 —— 无需注册
生成颜色色调 →何时使用颜色色调生成
要从单一品牌色打造协调、专业的设计,颜色色调调色板必不可少。
- 设计系统——从你品牌的主色生成一套完整的颜色刻度(从 50 到 950),供所有 UI 组件使用
- UI 主题化——使用基准色更浅和更深的变体,为按钮和交互元素创建悬停、激活、聚焦和禁用状态
- 无障碍对比度——从完整的暗色调与浅色调谱系中进行选择,测试并挑选符合 WCAG 对比度的配色组合
常见问题
暗色调和浅色调有什么区别?
暗色调是与黑色混合(更深)的颜色,而浅色调是与白色混合(更浅)的颜色。例如,藏青色是蓝色的一种暗色调,而婴儿蓝则是蓝色的一种浅色调。两者保持相同的色相,但在明度上有所不同。
一个设计系统应该有多少种色调?
大多数设计系统遵循 Tailwind CSS 的约定,使用 10 个层级(50、100、200、300、400、500、600、700、800、900、950)。基准色通常位于 500,浅色调在其之上,暗色调在其之下。这为 UI 状态、文本和背景提供了足够的粒度。
我可以从色调中生成符合无障碍标准的配色组合吗?
可以。通过生成一整套色调调色板,你可以针对 WCAG 对比度要求测试各种配对。一般来说,在浅色调(50-200)上使用深暗色调(700-900),或反过来,即可确保文本可读性所需的足够对比度。