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

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

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

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

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

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

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

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

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

示例图片来源

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

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

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

2. 明度：控制画面的光

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

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