颜色基础知识

破冰——为什么你觉得颜色很难沟通？#

你是否经历过这样的对话？

• PM: “这个红色能不能再大气一点？”
• 前端/开发: “这个灰色背景和文字对比度好像不太够，我也说不准，反正看起来有点费劲。”
• 设计师: “我想一种那种五彩斑斓的黑。”

为什么关于颜色的沟通总是充满玄学？因为人类的自然语言在描述颜色时是极其匮乏且主观的。 你眼中的“大气红”和我眼中的“春节红”可能完全不是一个东西。

但好消息是：只要是在屏幕上，颜色就是数学。 设计师眼里的“氛围感”、“高级感”，在代码世界里，无非就是 R, G, B 可以在显示器上具象化的三个数字，或者是 H, S, B 这种更符合人类直觉的参数调整。

如果我们能学会用参数而不是形容词来沟通，效率将会翻倍。比如，与其说“再亮一点”，不如说“把亮度 (Brightness) 调高 10%”。

这就引出了我们今天要讲的第一个核心概念——HSB 模型。

从 HSB 模型看懂“五彩斑斓的黑”#

在刚开始接触设计时，我们往往习惯使用纯黑色 #000000。但在现实世界中，几乎不存在绝对的纯黑。物理世界中的阴影往往带有环境光的颜色倾向，或者物体本身的固有色在极低亮度下的表现。

使用纯黑色会让画面显得“死板”、“生硬”，缺乏透气感。而所谓“五彩斑斓的黑”，实际上就是在极低的亮度（Brightness）下，加入一定的饱和度（Saturation），并赋予不同的色相（Hue）。

HSB 模型解析#

相比于 RGB（红绿蓝）模型，HSB（色相、饱和度、亮度） 模型更符合人类对颜色的直观感知：

为什么要是“五彩斑斓”的？#

当我们将亮度（B）压得很低（例如 10%-20%），颜色主体呈现黑色。但如果我们保留一定的饱和度（S）并改变色相（H），这个黑色就会带有特定颜色的“倾向”。

例如：

• 冷黑 (Cool Black)：带蓝色倾向，常用于科技、专业感的场景。
• 暖黑 (Warm Black)：带橙红色倾向，常用于复古、人文感的场景。

下面是一组“五彩斑斓的黑”的示例。请注意观察它们与纯黑色的微妙区别：

实践建议#

1. 避免使用 #000000：除非是特殊的强对比需求（如 OLED 屏幕省电模式或极致的高对比度设计），否则尽量将亮度提升到 5-15% 之间。
2. 与主色调呼应：如果你的网站主色调是蓝色，那么你的文字颜色或背景深色最好也是稍微偏蓝的“黑”，这样整体感会更强。
3. 用参数沟通：觉得颜色“脏”往往是饱和度（S）太低；觉得“刺眼”往往是明度（B）太高。尝试用 HSB 参数而不是形容词与设计师沟通。

建立调色板#

要建立一个调色板，首先让我们从色轮开始。通过色轮，我们可以直观地理解颜色之间的关系。

1. 三原色 (Primary Colors)：色轮的基础是红、黄、蓝三种原色。这三种颜色是色彩的基石，无法通过其他颜色混合得到。
2. 三间色 (Secondary Colors)：将相邻的两个原色等量混合，就会得到三间色。
   • 黄色 + 蓝色 = 绿色
   • 蓝色 + 红色 = 紫色
   • 红色 + 黄色 = 橙色

通过这种方式，我们构建了一个包含六种基本颜色的简化色轮。接下来，如果你继续混合相邻的颜色（例如红色和橙色），就会得到复色 (Tertiary Colors)，色轮也会变得更加丰富。

颜色搭配及关系#

有了色轮，我们就能利用几何位置关系来寻找和谐的配色方案。这里我们可以使用一个 18 色轮 工具来演示这些经典法则。这里的色轮被分为了三个可旋转的同心圆环，你可以点击或使用下方按钮来旋转中间和内层的圆环。

试着调整圆环，观察以下三种经典的色彩关系：

1. 三色组 (Triadic Colors)

   • 定义：在色轮上通过一个等边三角形连接的三种颜色。
   • 特点：每种颜色之间相隔 5 个色块（在 18 色轮上）。这种搭配对比强烈，充满活力，但比互补色更平衡。
   • 示例：将外圈对准红色，尝试旋转内圈找到蓝色和黄色（经典的红黄蓝三原色就是一组）。

2. 分裂互补色 (Split-Complementary Colors)

   • 定义：选定一种颜色，加上它互补色（对面颜色）两侧的两种颜色。
   • 特点：这是一种非常安全的配色方案。它既保留了互补色的高对比度，又因为使用了临近色而减少了视觉上的紧张感。
   • 示例：如果主色是红色，它的互补色是绿色。分裂互补色就是红色，加上绿色旁边的蓝绿色和黄绿色。

3. 类似色 (Analogous Colors)

   • 定义：色轮上相邻的 3-4 种颜色。
   • 特点：因为色相相近，它们在一起非常和谐舒适，这是大自然中最常见的配色（如秋天的红橙黄树叶）。
   • 示例：将三个圆环转动到对齐的位置，观察红色、橙红色、橙色这一组连续的色彩。

实战：如何从零构建一套 UI 配色方案#

了解了色轮上的理论关系后，你可能会问：“我选了一组互补色，然后呢？我该怎么把它们分配到界面上？”

这就需要引入配色结构的概念。一套完整的 UI 配色方案 (Color Palette) 并不是随意堆砌的颜色列表，它像一支球队，每个颜色都有自己的位置和职责。

1. 配色的黄金法则：60-30-10#

在开始挑选具体颜色之前，请先记住这个比例分配原则。这能保证你的界面主次分明，不会因为颜色太多而显得杂乱。

• 60% 主色 (Primary / Neutral)：这是界面的基调，通常是背景色或大面积的中性色。它负责确立空间的整体氛围。
• 30% 辅助色 (Secondary)：这是你的品牌色。用于导航栏、卡片头部、图标等。它负责传递品牌性格。
• 10% 强调色 (Accent)：这是行动点。用于 CTA 按钮 (Call to Action)、高亮信息。它负责引导用户点击。

2. 一套标准配色包含哪些角色？#

当我们打开 Figma 或编写 CSS 变量时，我们需要填满以下三个“坑位”：

A. 品牌主色 (Primary Brand Color)#

这是你的核心颜色（也就是你在色轮上选的那个颜色）。

• 用途：主要按钮、选中状态、品牌 Logo、加载进度条。
• 挑选建议：选择饱和度较高、视认性好的颜色。蓝色是科技产品的首选，因为它代表信任且对色盲友好。

B. 中性色系 (Neutrals) —— 最容易被忽视的基础#

很多开发者的误区是：主色选得很认真，背景和文字却随便用 #000000 和 #FFFFFF。 高质量的 UI 需要一套“有倾向”的中性色。

• 包含内容：背景色（极浅灰）、边框色（浅灰）、正文色（深灰）、标题色（近乎黑）。
• 技巧：不要用纯灰。如果你主色是蓝，你的灰色里也应该带一点点蓝（冷灰）；如果主色是橙，灰色里带一点点黄（暖灰）。这会让界面看起来非常协调。

C. 强调色 / 功能色 (Accent / Semantic)#

• 强调色：用于需要在一堆主色中脱颖而出的地方（比如“立即购买”按钮）。通常使用主色的互补色或对比色。
• 功能色：即我们在上文提到的红（错误）、黄（警告）、绿（成功）。注意：功能色的明度和饱和度最好与你的品牌主色保持视觉一致。

---

3. 三种“拿来即用”的配色方案配方#

如果你不想从头调试，可以直接套用以下三种经典的色彩组合逻辑。它们覆盖了 90% 的互联网产品风格。

方案一：现代信赖感 (Modern Trust)#

适合 SaaS、工具、后台。这是最安全、最专业的配色，也是目前硅谷的主流审美。

方案二：活力与亲和力 (Energetic & Friendly)#

适合电商、C 端 App、生活方式。如果你希望产品看起来“热情”、“年轻”，这种方案非常有效。

方案三：暗黑极客风 (Dark / Cyber)#

适合游戏、开发者工具、区块链。暗色模式不是简单的黑底白字，而是“深灰底 + 荧光色”。

结语：限制是最好的设计#

对于非专业设计师来说，最大的陷阱就是“选了太多颜色”。 建议在你的 CSS 变量中，严格限制颜色数量：1 个主色，1 个强调色，5 个不同深浅的灰。这就足够构建一个 Facebook 或 GitHub 级别的界面了。

无障碍设计 (Accessibility)——不可妥协的数学标准#

目标： 结合 CalArts 的“对比度”概念，引入 WCAG 标准。这是 PM 和开发必须严格遵守的红线。

引入概念： Contrast Ratio (对比度比率)。#

核心规则：

背景和文字的对比度必须达到 4.5:1 (WCAG AA标准)。

PM 在验收时，不要只看好不好看，要问：“这个灰色的字在白底上，对比度够吗？老年人能看清吗？”

工具推荐： 推荐使用 Chrome DevTools 自带的对比度检查器，或者 WebAIM 网站。这就是用工程手段验证设计质量。

色彩的相对性——为什么同一个组件看起来不一样？#

目标： 介绍 Josef Albers 的理论，但用于解决实际开发 Bug。

场景重现： 为什么同一个 Button 组件，放在白色卡片上很好看，放在深色侧边栏里就很奇怪？

原理解析： 颜色是相对的。深色背景会“吃掉”浅色元素的边缘，或者让高饱和度的颜色产生光晕（Visual Vibration）。

解决方案： 这就是为什么要设计 Dark Mode (深色模式) 专用的调色板，而不是简单地反转颜色。前端需要理解，同一个 Token (--bg-primary) 在不同主题下映射的 Hex 值是不同的。