颜色

我们来彻底拆解一下 CSS 的十六进制（Hex）颜色码，并提供一套让你能快速上手、微调并应用于实践的设计方法。

第一部分：彻底搞懂 #RRGGBB 编码

从第一性原理出发，屏幕上所有颜色的本质是光的三原色混合，即 Red（红）、Green（绿）、Blue（蓝），这被称为 RGB 加色模型。当你把这三种颜色的光以不同强度混合时，就能创造出成千上万种颜色。

• 全开 (最亮): 红、绿、蓝光都开到最亮，混合后得到白色。

• 全关 (最暗): 所有光都关闭，得到黑色。

为了在代码中精确控制这三种光的强度，计算机为每一种颜色通道（R、G、B）分配了一个数值范围：从 0 (全关) 到 255 (全开)。这个范围的大小是 256 个级别，即 28，正好是一个字节（8-bit）能表示的范围。

所以，一个颜色可以用三个0-255的数字表示，例如：

• rgb(255, 0, 0) 是纯红色。

• rgb(255, 255, 255) 是白色。

• rgb(80, 150, 200) 是某种蓝色。

那么，十六进制 (#RRGGBB) 是什么？

它本质上就是 rgb(R, G, B) 的另一种写法，一种对计算机更友好的紧凑格式。

“十六进制” 是一种计数系统，我们平时用的是十进制（0-9），而十六进制使用 0-9 和 A-F 一共16个符号来计数。

• 0-9 对应 0-9

• A 对应 10

• B 对应 11

• C 对应 12

• D 对应 13

• E 对应 14

• F 对应 15

#RRGGBB 格式就是把 R、G、B 各自的 0-255 的十进制数值，转换成两位十六进制数。

• RR: 代表红色的强度

• GG: 代表绿色的强度

• BB: 代表蓝色的强度

为什么是两位？ 因为一个十六进制位可以表示16个数，两位十六进制数可以表示 16×16=256 个数，正好对应 0-255 的范围。

关键转换：

• 0 (十进制) = 00 (十六进制)

• 255 (十进制) = FF (十六进制) (因为 255=15×16+15)

所以：

• rgb(255, 0, 0) -> #FF0000

• rgb(0, 255, 0) -> #00FF00

• rgb(0, 0, 255) -> #0000FF

• rgb(0, 0, 0) -> #000000

• rgb(255, 255, 255) -> #FFFFFF

三位简写：

当 RR, GG, BB 的两位数字都相同时，可以简写成三位。

• #FF0000 -> #F00

• #00GG00 -> #0G0 (例如 #009900 -> #090)

• #FFFFFF -> #FFF

• #000000 -> #000

---

第二部分：快速记忆、获取与微调颜色的心法

不要去死记硬背每个代码，而是建立一个心智模型。把 #RRGGBB 想象成三个独立的调色滑块。

1. 记住几个关键“坐标”

你只需要记住 5 个关键的亮度节点，就能覆盖大部分情况：

• 00: 关闭 (最暗)

• 40: 暗 (约25%亮度)

• 80: 中等 (50%亮度，这是标准中灰色 #808080 的来源)

• C0: 亮 (约75%亮度)

• FF: 全开 (最亮)

记忆: 0 -> 4 -> 8 -> C -> F。

2. 掌握三个调整“杠杆”

有了坐标，你就可以通过调整三个杠杆来创造几乎任何颜色。

杠杆一：亮度 (Brightness) - 让颜色变亮或变暗

• 核心思想: 同步调高或调低 R, G, B 的值。

• 示例:

  • 从一个中蓝色 #4080C0 开始。

  • 想更亮一点？ 将每个值都增加一些：#80B0E0。

  • 想更暗一点？ 将每个值都降低一些：#2060A0。

  • 得到白色和黑色: #FFFFFF (全亮), #000000 (全暗)。

  • 得到灰色: 当 R, G, B 三个值相等时，就是灰色。值越高，灰色越亮。

    • #333333 (深灰), #808080 (中灰), #CCCCCC (亮灰)

杠杆二：饱和度 (Saturation) - 让颜色更鲜艳或更灰暗

• 核心思想: 调整 R, G, B 三个值之间的差距。差距越大，颜色越鲜艳（饱和度高）；差距越小，颜色越灰暗（饱和度低）。

• 示例:

  • 从一个纯红色 #FF0000 开始 (R和G/B的差距最大)。

  • 想让它不那么刺眼，变成“豆沙红”或“铁锈红”？ 保持 R 为主导，但给 G 和 B 加上一些值，缩小差距。例如 #C04040。这里的 R(C0) 仍然远大于 G(40) 和 B(40)，所以它还是红色系，但因为 G 和 B 不再是 00，颜色就不那么“纯”了，显得更柔和、沉稳。

  • 想得到一个“天蓝色”？

    1. 先想一个纯蓝色 #0000FF。太艳了。

    2. 降低饱和度，同时提高亮度。我们给 R 和 G 都加一点值，让它们向 B 靠拢，同时保证 B 是最大的。例如 #87CEEB (SkyBlue的官方代码)，你看，B(EB)最大，G(CE)其次，R(87)最小，它们之间有差距，但不极端，而且整体数值偏高，所以是明亮的、饱和度适中的蓝色。

杠杆三：色相 (Hue) - 改变颜色本身

• 核心思想: 改变 R, G, B 哪个是主导，哪个是辅助。

• 示例:

  • 从纯红色 #FF0000 开始。

  • 想把它变成橙色？ 红色（R）保持最强，然后开始加入绿色（G）。#FF8000 就是一个不错的橙色。G 加得越多，颜色就越黄。

  • 想把它变成黄色？ 把绿色（G）也开到最大。#FFFF00 就是纯黄色 (红光+绿光=黄光)。

  • 想把它变成紫色/品红？ 红色（R）保持最强，然后开始加入蓝色（B）。#FF0080 会得到一个偏粉的紫色，#FF00FF 是纯品红色 (红光+蓝光=品红光)。

总结心法：

1. 选定主色: 确定 R, G, B 哪个最大。想做蓝色，就把 BB 设为最大。

2. 调节亮度: 整体调高或调低 R, G, B 的值。

3. 调节饱和度: 拉开或缩小 R, G, B 之间的差值。

---

第三部分：前端颜色设计原则与技巧

掌握了技术，我们来谈谈艺术和策略。

1. 黄金法则：60-30-10 原则

这是一个经典的设计法则，能让你的配色方案和谐且有重点。

• 60% 主色 (Primary Color): 占据页面最大面积，通常是背景、大色块。它决定了网站的整体基调。一般选择中性色或饱和度较低的颜色，如白色、浅灰色、淡蓝色。

• 30% 辅色 (Secondary Color): 用于需要与主色区分开的模块，如卡片、侧边栏、激活状态的背景。它需要与主色有明显的区分，但又不能喧宾夺主。

• 10% 点缀色 (Accent Color): 这是最重要的颜色，用于需要用户注意和交互的元素，如按钮 (Call-To-Action)、链接、图标、警告提示。通常选择饱和度高、与主辅色对比强烈的颜色。

2. 对比度是可用性的生命线

无论颜色多好看，如果用户看不清文字，一切都等于零。

• WCAG 标准: Web 内容可访问性指南 (WCAG) 规定了文本和背景之间的最小对比度。AA 级要求普通文本至少为 4.5:1，大号文本（18pt+）至少为 3:1。

• 使用工具: 不要凭感觉。使用在线的对比度检查工具（Contrast Checker）或浏览器自带的开发者工具来验证你的颜色组合是否达标。

• 技巧: 一个常见的安全做法是，用深色（如深灰 #333333 而不是纯黑 #000000）文字搭配浅色背景（如白色 #FFFFFF），或者用白色文字搭配深色背景。纯黑配纯白有时会过于刺眼。

3. 从灰色开始设计

这是一个专业技巧，能让你专注于布局和信息层次，而不是一开始就被颜色干扰。

1. 灰度稿: 先用不同深浅的灰色（#FFF, #EEE, #CCC, #888, #333）来设计整个页面布局、卡片、按钮和文本。

2. 确定层次: 通过灰色的深浅来区分信息的重要性和模块的划分。

3. 上色: 当布局和层次结构清晰后，再根据 60-30-10 原则，用你选好的主色、辅色、点缀色去替换对应的灰色。这能确保你的设计在视觉结构上是稳固的。

4. 理解颜色的心理暗示（但别滥用）

颜色会引发情感共鸣，这与文化和语境紧密相关。

• 蓝色: 信任、专业、冷静。（科技、金融、企业官网）

• 绿色: 自然、健康、成长、成功。（环保、健康产品、表示“操作成功”的提示）

• 红色: 紧急、危险、热情、促销。（错误提示、清仓甩卖、呼吁行动）

• 黄色/橙色: 乐观、友好、警示。（创意产业、食品、需要注意的提示）

• 黑色/深灰: 权威、奢华、精密。（奢侈品、高端科技产品）

关键：不要迷信颜色心理学，它更多是锦上添花。用户首先关心的是你的产品好不好用，其次才是它看起来怎么样。

5. 借助工具，站在巨人的肩膀上

• 配色方案生成器: Coolors.co, Adobe Color 等网站可以帮助你快速生成和谐的配色方案。你可以锁定一个你喜欢的颜色，让它为你生成搭配的其他颜色。

• 大厂设计系统: 学习 Apple Human Interface Guidelines, Google Material Design, Ant Design 等成熟设计系统的用色规范。它们都是经过大量研究和实践验证的，是极好的学习范本。

最终建议：

我个人认为，对于初学者和大多数项目而言，最好的方案是采用“从灰色开始”的设计流程，并严格遵守“60-30-10”原则和“对比度”要求。先用不同深浅的灰色把界面做得清晰易用，然后选择一个你喜欢且符合产品调性的点缀色（例如品牌色），再搭配一个中性的主色和辅色。这个方法几乎不会出错，能保证你的设计既专业又可用。

我们来系统性地梳理一下红、绿、蓝（RGB）三原色是如何混合成我们能在屏幕上看到的所有颜色的。这背后的核心是加色模型（Additive Color Model）。

核心原理：加色模型 vs. 减色模型

首先，必须纠正一个我们从小在美术课上建立的认知误区。我们学到的是“红黄蓝”是三原色，混合起来会变暗，最终趋向于黑色。那个是减色模型（Subtractive Color Model），适用于颜料、油墨、染料等。它的原理是物体吸收（减去）了某些颜色的光，我们看到的是被反射的剩余光。

而屏幕、投影仪、LED灯等自身发光的设备，遵循的是加色模型（Additive Color Model）。

• 起点：黑色（没有任何光）。

• 过程：不断地往上“添加”光。

• 结果：添加的光越多，颜色越亮。当三种光都加到最亮时，就混合成了白色。

可以想象你身处一个完全黑暗的房间，面前有三盏灯：一盏纯红，一盏纯绿，一盏纯蓝。接下来所有的色彩，都是通过调节这三盏灯的亮度开关得到的。

---

系统性的混合规则

我们将每种颜色光的强度（亮度）量化为 0 (关闭) 到 255 (最亮)。

1. 基础颜色：三原色、黑与白

• 黑色 (Black)：关闭所有灯。

  • R=0,G=0,B=0

  • #000000

• 红色 (Red)：只开红灯到最亮。

  • R=255,G=0,B=0

  • #FF0000

• 绿色 (Green)：只开绿灯到最亮。

  • R=0,G=255,B=0

  • #00FF00

• 蓝色 (Blue)：只开蓝灯到最亮。

  • R=0,G=0,B=255

  • #0000FF

• 白色 (White)：将所有灯都开到最亮。

  • R=255,G=255,B=255

  • #FFFFFF

2. 次级颜色：两种原色的等量混合

当两种原色光以最大强度混合时，会产生明亮、鲜艳的次级颜色。

• 黄色 (Yellow) = 红光 + 绿光

  • R=255,G=255,B=0

  • #FFFF00

• 青色 (Cyan) = 绿光 + 蓝光

  • R=0,G=255,B=255

  • #00FFFF

• 品红 (Magenta) = 红光 + 蓝光

  • R=255,G=0,B=255

  • #FF00FF

一个有趣的关联：你会发现，光的次级颜色（青、品、黄）恰好是打印（减色模型）的三原色（CMY, Cyan, Magenta, Yellow）。这两个系统互为反转，构成了一个完美的色彩闭环。

3. “所有其他颜色”：三种原色的不等量混合

这是创造无限色彩的关键。通过改变每种原色光的比例和整体亮度，可以得到色谱中的任何颜色。

我们可以通过两个维度来控制：

维度一：改变比例（改变色相和饱和度）

颜色的“身份”（即色相，Hue）由占主导地位的光和辅助光的比例决定。

• 如何得到橙色 (Orange)？

  • 我们知道黄色是 红+绿。橙色在色谱上位于红色和黄色之间。

  • 因此，它的配方应该是**“满分的红”加上“一部分的绿”**。

  • 例如：R=255,G=128,B=0。这里的绿色分量大约是红色的一半，就得到了明亮的橙色 #FF8000。如果绿色再少点，就更偏红；绿色再多点，就更偏黄。

• 如何得到紫色 (Purple)？

  • 我们知道品红是 红+蓝。紫色通常被认为是介于品红和蓝色之间。

  • 因此，它的配方是**“满分的蓝”加上“一部分的红”，或者“满分的红”加上“一部分的蓝”**，具体取决于你想要哪种紫。

  • 例如：R=128,G=0,B=255。这里的红色分量大约是蓝色的一半，就得到了偏蓝的紫色（紫罗兰色）#8000FF。

维度二：改变整体亮度（改变明暗）

在确定了颜色的比例后，可以通过等比例地缩放 R, G, B 的值来调整明暗。

• 如何得到棕色 (Brown)？

  • 棕色在本质上是一种**“暗的、饱和度不高的橙色”**。

  • 1. 先得到橙色：我们用 #FF8000 (R=255,G=128,B=0)。
  • 2. 把它变暗：将所有值按比例降低。比如，我们把最亮的红色从 255 降到 160 左右（A0 in Hex）。为了保持橙色的比例，绿色大约是红色的一半，即 80 (50 in Hex)。
  • 3. 得到结果：Rapprox160,Gapprox80,B=0。代码 #A05000 就是一个不错的棕色。如果你再加入一点点蓝色，比如 #A05020，会让棕色看起来更“沉稳”，因为三种光都存在了，饱和度就降低了。

• 如何得到灰色 (Gray)？

  • 当 R, G, B 三个值完全相等，但又不是 0 或 255 时，就得到了灰色。

  • R=G=B

  • 例如：#808080 (R=128,G=128,B=128) 是 50% 的中灰色。#333333 是深灰，#CCCCCC 是浅灰。

可视化心智模型：RGB 色彩空间立方体

为了更好地理解这个系统，你可以想象一个三维的立方体：

• 原点 (0,0,0)：是黑色。

• 三个坐标轴：分别代表 R, G, B 轴，从 0 延伸到 255。

• 离原点最远的顶点 (255,255,255)：是白色。

• 坐标轴的末端：分别是纯红、纯绿、纯蓝。

• 另外三个顶点：分别是黄色、青色、品红。

• 立方体内的任何一个点：都代表一个独一无二的颜色，其坐标就是 (R, G, B) 的值。

你想要的所有颜色，都在这个立方体的内部或表面上。 混合颜色的过程，就是在个立方体中寻找一个点的过程。

总结梳理表

结果颜色	红色 (R)	绿色 (G)	蓝色 (B)	混合逻辑	示例代码
黑色	0	0	0	无光	#000000
白色	255	255	255	所有光最大强度	#FFFFFF
灰色	x	x	x	R=G=B, 且 x > 0	#808080
红色	255	0	0	纯红光	#FF0000
绿色	0	255	0	纯绿光	#00FF00
蓝色	0	0	255	纯蓝光	#0000FF
黄色	255	255	0	红光 + 绿光	#FFFF00
青色	0	255	255	绿光 + 蓝光	#00FFFF
品红	255	0	255	红光 + 蓝光	#FF00FF
橙色	255	~128	0	满分红 + 半分绿	#FF8000
棕色	~139	~69	~19	暗的、低饱和度的橙色	#8B4513

通过掌握“加色法”的根本原理，并理解通过调整“比例”和“亮度”这两个杠杆，你就拥有了系统性地创造和理解屏幕上任何颜色的能力。