如果把整个色彩体系比作一门语言，那么色相、明度、饱和度就是这门语言里最基础的三个语法规则。你当然可以在感觉的驱动下「凭直觉配色」，就像有些人不懂语法也能说得很溜。但一旦你想要有意识地控制页面层级，通过颜色传递更清晰的情绪或把灵感中的一个颜色，系统化延伸为一套完整色，你就会发现，离不开对这三属性工作方式的理解。

很多新手对颜色的认知停留在比较粗糙的印象里：这个红太艳了，拉暗一点； 这个蓝有点脏，再蓝一点……但「拉暗一点」「再蓝一点」分别是在动哪一个属性？

你其实是在改明度、饱和度，还是色相？它们各自对画面产生了什么具体影响？如果回答不出来，你就很难在之后的实践中，形成稳定的「可复制配色能力」。所以我们先不急着谈什么和谐配色、情绪色板，我们只做一件事：把色相、明度、饱和度这三个滑块逐个拆开，让你清楚知道，每调动一次，它在背后究竟对画面做了什么。

1. 色相：颜色的“姓氏”

先从色相（Hue）开始，它其实回答的是一个最朴素的问题：这到底是「什么颜色」？

是红，还是黄，还是绿，还是蓝……这些在色轮上绕一圈的「颜色家族」，就是色相的世界。你可以把色轮想象成一个圆形字典：0° 附近是红，顺时针转过去，经过橙、黄、黄绿、纯绿，再往后是青、蓝、紫、品红，最后绕回红色。

在这个圆环上移动，就是色相在工作。很重要的一点是，色相是「环形」而不是「直线」。这意味着两个色相之间的关系，既有「距离」也有「方向」。

从红往黄走，是变暖；从红往紫走，是变冷；绕一整圈，又回到红。当我们说这个主色偏黄一点，蓝色往青一点调，其实就是在告诉工具：请保持明度和饱和度大致不变，只在色相圆环上挪一小步。

如果你在一个 UI 项目里，把所有主色的色相固定在某个范围之内，比如都集中在蓝到青的扇形区域，你会感觉整体气质比较统一。

示例图片来源

而一旦有某个元素的色相突然跳到了相反位置比如一个暖橙色按钮闯入大面积冷蓝界面，它会立刻跳出来，吸引注意力，这其实已经涉及到后续色相对比的内容了，我们会在后文单独展开，这里只先让你意识到：色相，决定的是这是不是同一种颜色家族的人。

冷色界面突然闯入暖色，图片来源

明白了色相是给颜色确定「姓氏」，我们再来看，明度和饱和度则是在这同一个姓氏下，塑造不同的「性格」。

2. 明度：控制画面的光

明度（Lightness / Value），可以先简单理解成：这个颜色在画面里，看起来有多亮、多暗。当你在工具里把同一个蓝色的明度从高往低拖，你会看到一个很直观的变化：

• 明度高的时候，它接近浅蓝、天空蓝
• 明度居中的时候，是比较标准的蓝
• 明度再降低，它会慢慢向深蓝、藏青、接近黑色的方向聚拢

明度为上述数值时（X=对应数值），对应的颜色

注意，这个过程里，色相基本没变，饱和度也可以保持大致不变，但仅仅是「亮/暗」的变化，就足以改变画面的层级感。对设计师来说，明度最重要的用处之一是：用来安排信息层级与可读性。

同样是蓝色标题，如果你把它放在浅灰背景上，标题蓝色的明度如果太高（非常浅），就会和背景挤在一起，阅读困难；明度如果太低（接近黑），又会显得过于沉重，抢了其他内容的风头。通常的做法是先确定一个背景明度，然后在这个基础上，向上或向下偏移一定的明度区间，分别给标题、正文、辅助信息使用。

背景明度90条件下，标题如果明度也是90，基本无法看清楚内容，明度如果低到10，颜色几乎接近为黑

这背后本质上都是在做一件事：通过明度差，建立哪一个更重要，哪一个更靠前的视觉秩序。

还有一个细节值得注意：很多新手在做暗色界面时，习惯只顾着把背景拉黑，却忘了同步调整其他元素的明度。结果就是背景变暗了，按钮、文字、边框却还停留在原来的明度逻辑上，导致整体发灰、层级模糊。

如果你对明度的理解足够清晰，这类问题会很自然地被你看出来，背景变暗是关键元素的明度要重新分配，重新拉开差距。可以说明度是你安排画面“光从哪里来”的工具。

3. 饱和度：情绪的音量键

轮到饱和度（Saturation / Chroma）登场了，它跟前面两个相比，稍微抽象一点，但你可以用一个非常生活化的比喻去理解。

饱和度，就是这个颜色「有多用力地在说话」。当饱和度很高时，这个颜色像一个非常兴奋、声音很大的人，在画面里很难被忽视；当饱和度很低时，它就像一个轻声说话的人，甚至慢慢接近「灰色人群」，藏进背景。仍然拿同一个蓝色为例，如果你在工具里只动饱和度：

• 高饱和蓝：鲜亮、强烈，常见于按钮、强调标签；
• 中等饱和度：更加日常、稳重；
• 低饱和度：逐渐靠近灰蓝，情绪变温和，适合作为背景或大面积铺色。

蓝色的饱和度由低到高示意

这里有一个细小的观察点，很容易帮你提高配色的敏感度，当你觉得某个界面「看着很吵」或「看着很脏」，其实常常不是色相的问题，而是饱和度分配不当。颜色太吵，多半是高饱和色用得过多；而颜色太脏，有可能是明度和饱和度一起被拉到一个尴尬区域，既不鲜明，也不干净。

有经验的设计师会下意识做一件事，在开始决定主色之前，先想清楚这个产品应该「说话大声」还是「说话温和」，然后相应地为整个系统设定一个饱和度上限。比如某些工具类产品，会限制整个系统的大部分颜色都在中低饱和度区间，让界面安静、不打扰内容；只有少数关键按钮才适度提高饱和度。

这些具体的配色策略，我们其他文章会展开讲，这里你只需要记住一句话：饱和度，就是画面情绪的音量键。你调大它，画面就更亢奋；你调小它，画面就更克制。

4. 三个属性的分工协作

到这里，我们分别看完了三条「滑轨」，但在实际设计中，你很少只动其中一个。更常见的情境是：一只手在调色相，另一只手在微调明度和饱和度，三者一起配合，完成对颜色的塑形。在这里我们做一个非常简化的心智模型，帮助你在脑中建立一条操作顺序：

1. 先用色相，选定「大致是哪个颜色家族」：比如你决定这个产品的主色范围在蓝–青区间，那么色相先锁定在这一带。

2. 用明度，安排好层级关系与可读性：背景是偏亮还是偏暗？标题和正文分别需要多大的明度差？按钮要不要更亮一点？ 这些都交给明度来处理。

3. 最后用饱和度，微调画面的情绪气质 ：同样是蓝色主色，你可以让它高饱和，显得科技感强、很冲；也可以把饱和度收一收，让它更像专业工具、办公软件那种稳重感。

你可以把这三步想象成先搭骨架，再调光线，最后加情绪。

真正复杂、体系化的配色方法（例如如何用这三属性构建一套完整色板、如何根据品牌个性设置色彩人格），我们会在后续章节慢慢拆开写，本篇只希望让你在调色时，不再是凭感觉乱拖三个滑块，而是知道：现在我在动哪一个属性； 它会在视觉和认知上，带来什么具体后果。

5. 设计师常见的三种误解

理解一件事有时比学会一件事更快的方式，是看看大家经常误会它在哪里。围绕色相、明度、饱和度，新手普遍会有几个典型的错误认知，本篇不展开解决方案，只先把这些「雷区」标出来，方便你在后续学习时对照：

误解一：只用明度解决所有问题

觉得太扎眼就拉暗一点，不够突出就拉亮一点，结果就是所有问题都被粗暴地扔给明度处理，饱和度几乎没被认真使用。久而久之，你会发现自己的界面只剩下黑–白–中灰，颜色很难有细腻的气质变化。

误解二：以为色相变化就能创造足够对比

有些同学为了让模块区分明显，会在色相上乱跳：这里一块绿色，那里一块橙色，中间再插个紫色。色看来是不同了，但由于明度和饱和度控制不好，该分不开的地方还是分不开，该抢戏的地方还是抢戏。色相带来的只是类别差异，真正帮你做层级分配的，仍然是明度与饱和度。

误解三：把饱和度当成“喜欢就好”的主观选择

经常听到的说法是：我个人喜欢高饱和一点或我最近很爱这种莫兰迪低饱和色。

喜欢当然可以，但如果你只把饱和度当成审美偏好而不是界面情绪的控制器，那你就很难根据项目类型、目标用户，刻意调整界面气质。在后续的文章里，我们会专门讲不同饱和度区间如何对应不同场景，本篇先帮你把心理预期种下即可。

6. 小结

把本篇走完，你可以试着在脑中做一个简单的小实验：想象自己打开 Figma 或 Sketch，面对调色面板时，不再只是凭本能拖动，而是默默问自己三句：

1. 我现在是在选什么颜色家族？——色相在决定这一点；
2. 它在整个画面中应该有多亮 或多暗？——明度在控制这一点；
3. 它应该以多大的「音量」出现？是要喊出来，还是轻声说？——饱和度在负责这一点。

只要这三个问题在你脑海里变得越来越清晰，后续关于配色关系、色彩风格、色彩与情绪的文章，你都会更容易吸收，因为所有进阶技巧，最后都会回到这三个基础属性的不同组合方式上。

在下一篇里，我们就可以在不重复这些基础概念的前提下，顺势往前走一步：从三属性本身怎么工作，过渡到三属性变化所带来的几种典型视觉关系。比如同色相不同明度、近明度不同色相等等，也就是你在界面里最常遇到、也是最容易翻车的那些配色情境。而当你读完那几篇，再回头看今天这篇基础文章时，或许会突然意识到：原来一切复杂的色彩技法，最后都不过是三条滑轨在不同方向上的配合而已。