外观
色彩三要素
颜色不是玄学，也不是一个点——它是**色相（名字）+ 饱和度（浓度）+ 明度（亮度）**三个维度叠加出来的三维组合。拆开它，你就能看懂、复现、解释任何颜色。
颜色是三维的，不是玄学
人眼看到的是一个"颜色"，但它根本不是一维的，而是三个独立维度叠加的结果。不理解这一点，就只能靠感觉瞎调；理解了，任何颜色都能被拆解、被复现、被解释。这三个维度是：
- 色相 Hue = 这是什么颜色——红、绿、蓝……是它的"名字"。
- 饱和度 Saturation = 颜色有多纯——从鲜艳到灰。
- 明度 Lightness = 颜色有多亮——从亮到暗。
任何一种颜色，都能用这三个维度完整描述。就像三维立方体各占一条轴，一个颜色 = 立方体里的一个点。
颜色不是一维，是色相 / 饱和度 / 明度三个独立维度叠加。
色相 Hue：是什么颜色
色相回答"这是什么颜色"：红、橙、黄、绿、蓝、紫……它由色相环表示——一个 0° 到 360° 的圆环，走一圈把所有"颜色名字"串起来。记住这条环上的关键刻度，就能给任何颜色"定位出名字"。
| 度数 | 色相 |
|---|---|
| 0° | 红 |
| 60° | 黄 |
| 120° | 绿 |
| 180° | 青 |
| 240° | 蓝 |
| 300° | 品红 |
色相环 0°~360°：0°红、60°黄、120°绿、180°青、240°蓝、300°品红。
饱和度 Saturation：多浓 + 明度 Lightness：多亮
颜色定了"名字"（色相）之后，还有两件事要定：它有多纯，以及它有多亮。
- 饱和度回答"这个颜色有多纯"：从鲜艳到灰。0% 是纯灰（一点颜色都没有），100% 是纯色（最饱和）。
- 明度回答"这个颜色有多亮"：0% 是纯黑，100% 是纯白，50% 是"纯色本来的亮度"。
关键澄清：饱和度 ≠ 鲜艳度。鲜艳度（视觉刺不刺眼）是饱和度 + 明度共同作用的结果。一个颜色饱和很高但明度也高（比如亮黄）就刺眼；饱和很高但明度被压下来就不刺眼；明度极低接近黑时，就算饱和 100%，你也看不出它"鲜"。所以调色时别只盯饱和度一个旋钮——要同时看饱和和明度，才是"鲜艳度"。
饱和度 0% 纯灰、100% 纯色；明度 0% 纯黑、100% 纯白、50% 是"纯色本来的亮度"。
微信绿拆解：三个旋钮一起拧
微信绿 #07C160 的三要素拆解：
| 要素 | 数值 | 含义 |
|---|---|---|
| 色相 H | 149° | 落在绿区（120°~180° 之间） |
| 饱和度 S | 93% | 很高，几乎接近纯绿，没有掺灰 |
| 明度 L | 39% | 中等偏暗，比纯绿暗一点，不容易刺眼 |
微信首页左下角那个绿底白字的"微信"图标，就是它的品牌色。我们用三要素把它拆开：色相 149° 落在绿区（120°~180° 之间）；饱和度 93% 很高，几乎接近纯绿、没有掺灰；明度 39% 中等偏暗，比纯绿暗一点、不容易刺眼。
为什么这个绿"看着舒服"？ 不是玄学，拆开就明白：
- 明度 39%（中等偏暗）+ 白色背景 → 有足够对比、能看清，又不刺眼。
- 色相落在 149° 绿区 → 绿色是人眼最放松、最舒适的颜色区（人眼对绿色最敏感、适应）。
- 饱和度高但明度被压住 → 鲜艳但不刺眼，刚好是"有精神又不喧哗"的平衡。
一句话：舒服 = 色相选对人眼友好区 × 明度压到不刺眼 × 饱和度给足识别度——三者共同作用，不是单一因素。
微信绿 #07C160 = hsl(149, 93%, 39%)：色相 149°、饱和 93%、明度 39%。
深度
HSL 是什么，为什么比 RGB 更适合设计师？
- RGB（Red/Green/Blue）：用红、绿、蓝三个发光通道的强度（0~255）拼出颜色。这是显示器底层的工作方式——屏幕就是靠三个灯管发光。
- HSL（Hue/Saturation/Lightness）：用色相、饱和、明度三个人眼感知维度描述颜色。这是人脑的工作方式。
同一件事、两种语言：
RGB(7, 193, 96) === hsl(149, 93%, 39%) ← 微信绿，两种写法
三盏灯强度 三个感知维度- RGB 适合"机器"：精确、是存储/传输标准，但反直觉——"想调亮一点"你得同时改三个数字。
- HSL 适合"人"：直觉、可单维度调整——"调暗明度""降点饱和"一句话就是改一个数字。
边界要点：HSL 是设计语言，Hex/RGB 是工程语言。设计师用 HSL 想事，交付时转成 Hex 给开发。它们说的是同一个颜色。
设计工具里常用的 HSL 三元组表示（更接近人的直觉）：
hsl(149, 93%, 39%) /* 微信绿：色相149°、饱和93%、明度39% */
↑ ↑ ↑
色相 饱和 明度 ← 三个维度对设计师来说，HSL 比十六进制码友好得多：改一个数字就是一个维度，能用"把明度调暗一点""把饱和降一点"这种话直接表达。
用哪个：什么时候用 HSL，什么时候用 RGB/Hex？
| 场景 | 用哪个 |
|---|---|
| 设计时"我要这个感觉"（调亮/调灰/换色相） | HSL |
| 交付给开发、存进 Design Token | Hex / 十六进制码（#07C160，最通用） |
| 底层渲染、程序里混合颜色 | RGB / 色彩空间 |
在 Penpot 拾色器里怎么读 HSL
- 选中一个形状，点右侧"填充"色块打开拾色器。
- 拾色器里有两种模式：十六进制码（
#07C160）和 RGB 滑块。 - 记住三要素的对应：RGB 的 R≈色相偏暖、G≈绿色分量、B≈蓝色分量，但不能直接读成 HSL——要把"三个旋钮"的直觉映射过去。
- 实操建议：Penpot 填色时，先用十六进制码输入标准色（如
#07C160），再微调。"想让这个绿更鲜一点"→ 在视觉上找饱和更高的绿；"想让这个绿更深但不脏"→ 往暗里走一点同时保持饱和。
完整实例：微信绿的完整拆解 + 变体
| 维度 | 数值 | 人话 |
|---|---|---|
| 色相 H | 149° | 一个健康的青绿色 |
| 饱和度 S | 93% | 几乎不掺灰，很纯 |
| 明度 L | 39% | 中等偏暗，压住刺眼感 |
| 十六进制 | #07C160 | 交付给开发时用的最终格式 |
变体练习（同一色相，换饱和/明度）：
- 微信绿压暗 →
hsl(149, 93%, 30%)：更沉的深绿，用于按压态/深色背景。 - 微信绿变淡 →
hsl(149, 93%, 60%)：更亮的浅绿，用于图标/强调。 - 微信绿降饱和 →
hsl(149, 40%, 60%)：灰绿的"禁用态"感觉。
看出规律了吗？色相不动（还是绿），只拧饱和/明度两个旋钮，就得到一套"同一家族"的颜色——这就是后面配色和 Token 的基础。
误区
| # | 误解 | 正解 |
|---|---|---|
| 1 | "颜色好不好看是玄学，只能靠感觉" | 颜色是可量化的三个维度（色相/饱和/明度），拆开就能理解、能复现 |
| 2 | "饱和度 = 鲜艳度" | 错。鲜艳度是饱和和明度共同作用；明度压下来，饱和再高也不刺眼 |
| 3 | "Hex 码就是颜色全部" | Hex 只给了机器读的数值，不给人直觉；设计上要用 HSL 想事 |
| 4 | "调亮就是加白、调暗就是加黑" | 精准做法是改明度这一个维度，而不是粗暴掺白/掺黑（那会同时改变饱和/色相） |
| 5 | "颜色越艳越好看" | 鲜艳≠好看，舒适靠色相选对 + 明度压住 + 饱和给度，三者平衡 |
练习
即时题（自测）
Q1：微信绿 #07C160 的色相落在哪个颜色区？
答案
绿区（色相 149°，介于 120°~180°）。Q2：把微信绿的饱和度从 93% 改成 20%，颜色会有什么感觉？
答案
变"灰"、变"淡"，不再那么纯绿，接近脏绿/灰绿。Q3：把微信绿的明度从 39% 改成 80%，它会？
答案
变亮、变浅、接近浅绿，鲜艳感会减弱（更接近"嫩绿"）。Q4（误区题）：一个颜色饱和度 100%、明度 5%，它看起来"鲜艳"吗？
答案
不鲜艳——明度太低接近黑，就算饱和拉满也看不出"鲜"。这正说明**鲜艳度 = 饱和×明度共同作用**。模块题（综合）
题目：用 HSL 三要素，把微信绿调整成"适合做图标的浅绿"和"适合做按压态的深绿"，分别写出大致数值，并说明你动了哪个维度、为什么。
参考思路
- 图标浅绿：色相基本不动（还是 149° 绿），**明度调高**到 60% 左右，饱和可略降 → 更亮、更醒目。 - 按压深绿：色相不动，**明度调低**到 30% 左右 → 更沉、更适合被按下的反馈。 - 关键点：**只动明度（和可能的饱和），色相保持**，才能保证还是"同一个家族"的绿，而不是变成别的颜色。迷你案例（微信实战）
目标：在 Penpot 里，用微信绿训练"读 HSL + 拧三旋钮"的直觉。
- 新建一个画板，画三个矩形。
- 给第一个填微信绿
#07C160（十六进制码输入）。 - 用拾色器读它的色相/饱和/明度，确认约为
hsl(149, 93%, 39%)。 - 第二个矩形：只改明度到 60%，观察它变浅——这就是"图标浅绿"。
- 第三个矩形：只改明度到 30%，观察它变深——这就是"按压深绿"。
- 试着只改色相（比如 210°），看它从绿变成蓝——体验"色相决定是什么颜色"。
做完你就能体会到：同一个家族的颜色，靠拧一个维度就能批量生产——这是后面配色与 Design Token 的地基。
素材
- 👉 打开交互演示：色彩三要素 — 拖动色相环 + 饱和/明度滑块，亲手拧出微信绿 #07C160
- HSL 到十六进制换算：用设计工具（Penpot/Figma）拾色器直接互转，或在线色转换工具。
- 色相环：任意设计工具/Figma 的色相滑条，拖一圈看 0°~360° 的颜色变化。
- 微信绿
#07C160：真实品牌色，可在拾色器里输入验证三要素。 - 后续衔接：本知识点（三要素）→ 02 配色方案（怎么组合）→ 03 色彩对比度（怎么保证可读）→ 12 样式系统（存为可复用色样式）→ 23 Design Tokens（沉淀为 Token）。