设计师配色入门：色相环 / 互补色 / 三角色 / 黄金比例

色相环是理解色彩关系最直观的工具。传统美术用的是 12 色色相环：3 个原色（红、黄、蓝）位于 0°、120°、240° 的位置，3 个间色（橙、绿、紫）分别位于原色之间，再加 6 个二次色补充细节。现代设计工具（如 Figma、Adobe Color）还提供 24 色甚至连续的 360° 色相光谱。

在 12 色环上，两个颜色距离越近，搭配越和谐（邻近色），距离越远越冲突（互补色）。这个物理关系是配色理论的基石。

12 色色相环、24 色色相环与 Adobe Color 的 360° 连续色谱各有用途。初学者用 12 色就能掌握基本配色规律；细分工作可升级到 24 色；精确设计则用数字色相值（0-360°）。

HSL（色相-饱和度-亮度）：最符合人类色彩直觉的模型。H（色相）0-360° 对应色相环；S（饱和度）0-100% 控制颜色的鲜艳程度，0% 是灰色，100% 是纯色；L（亮度）0-100% 控制明暗，0% 是黑，100% 是白，50% 是纯色。设计师最爱用 HSL，因为调整参数直观——想要更浅版本的蓝色？只需增加 L 值。

HSB（色相-饱和度-明度）：与 HSL 类似但略有区别。HSB 的 B（明度）0% 是黑，100% 是该色相的最亮版本。Photoshop、Sketch 默认用 HSB。H 和 S 定义相同，区别在于 V/B 的计算方式——这导致 HSB 中同样的蓝色可能比 HSL 显得更饱和。

RGB（红-绿-蓝）：屏幕的底层语言。网页用 RGB 编码颜色值，十六进制表示为 #RRGGBB。例如 #FF0000 是纯红（R=255, G=0, B=0），#0000FF 是纯蓝。RGB 对人不直观（看到 #A74D9E 你很难想象是什么紫），但计算机偏好它。

CMYK（青-品红-黄-黑）：印刷工业标准。纸质材料通过减色混合（青+品红+黄 = 棕色，加黑 = 深棕），与光的加色混合（RGB）逻辑相反。设计师在屏幕用 RGB，但印刷前必须转换到 CMYK，否则颜色会偏移——这就是为什么屏幕上漂亮的红色印刷出来可能显得暗沉。

实战建议：网页设计用 RGB/十六进制；调整配色时用 HSL（最直观）；印刷前转 CMYK 并测试校样；移动端应用考虑色彩管理，某些安卓机显示色温偏冷。

互补色方案：选择色相环上相隔 180° 的两种颜色（如红+绿、蓝+橙）。天然形成高对比，容易显得冲突。用法：降低其中一色的饱和度或亮度（如深蓝 + 浅橙）；让互补色中的一个作为大面积背景，另一个作为小面积强调；适合需要高视觉冲击的品牌（运动品牌、快餐）。

邻近色方案：选择色相环上相邻或相近的 2-3 种颜色（如蓝+蓝紫+紫，或绿+青绿+蓝）。天然和谐，显得温和专业。用法：作为品牌主调最保险；层级分明（深色作主，浅色作辅，中间色过渡）；适合科技、金融、医疗等需要传递稳定感的行业。

三角配色：在色相环上选择间隔 120° 的三种颜色（如红-黄-蓝，或橙-绿-紫）。比互补色更复杂但不至于混乱。用法：通常设 1 个主色 + 2 个辅色；避免三个颜色饱和度都很高（会累眼睛），降低 2 个辅色的 S 或 L；设计教科书最爱的方案。

四角配色：选择色相环上间隔 90° 的四种颜色（如红-黄-绿-蓝）。复杂度最高，初学者不推荐，但大品牌系统有时采用（富有想象力且需要多个产品线区分）。

单色方案：一个色相，通过改变饱和度和亮度生成配色（如深蓝-中蓝-浅蓝-极浅蓝）。最保险也最容易显得单调。用法：科技巨头（Apple、Facebook）偏爱单色系加黑白；通过微妙的灰度变化产生层级；加一个强调色（通常是互补色的低饱和版本）以打破单调。

色彩与情绪的关联既有生物学基础，也有文化积累。几个核心色彩的心理学解读：

红色：高激发、警觉、能量、紧急。火焰、血液的进化关联让人类天生对红色敏感。用途：重要警告（错误消息、库存告急）、促销标签、运动品牌。过度使用显得廉价或侵略。

蓝色：冷静、信任、专业、远距离。天空和大海的关联让人放松。用途：金融、科技、医疗品牌（79% 银行 logo 含蓝色）。对比太弱的蓝容易显得沉闷。

绿色：增长、自然、健康、安全。农业社会与生态关联。用途：环保品牌、健康产品、金钱（美元是绿色）。深绿显得高端，荧光绿显得廉价。

黄色：活力、乐观、警觉。阳光与能量。用途：儿童产品、快餐、出租车。黄色最难配搭（容易显得廉价或刺眼），需要配深色压制，或用橄榄黄等低饱和版本。

紫色：奢华、创意、神秘。皇族与魔法的关联。用途：美妆、艺术品牌、高端产品。过度用容易显得古怪。

橙色：温暖、友好、兴奋。火焰与水果。用途：创意行业、食品、社交平台。用处最灵活的色彩之一。

黑色 / 白色 / 灰色：中立色。黑色显得高端与权力，白色传递纯净与简洁，灰色温和但易显得冷淡。现代设计趋势是以黑白为骨架，彩色为强调。

品牌色是品牌的第二张脸。选错了，即使 logo 设计完美也显得不专业。正确流程是：

第一步：定位。问自己「我的品牌想让用户感到什么？」科技公司通常选蓝（信任）或黑（高端）；食品品牌选黄、橙、红（食欲）；医疗选蓝绿（安心）；体育品牌选红黑（能量）。

第二步：避免通用色。蓝色虽然专业，但看看有多少科技公司都用蓝。考虑打破预期——蓝色为主但加一个意外的强调色（如鲜黄）；或直接选择竞争对手较少的色彩（如特定的紫或棕）。

第三步：色值调整。不要用纯色（#FF0000）。改用稍微降低饱和度或亮度的版本（如 #E63946），会显得更专业。在 HSL 中，通常 S 降到 70-90%，L 保持 40-50%，效果最佳。

第四步：生成调色板。不只有一个主色，还需要亮度变体。例如主色 #0066CC（蓝），生成深蓝 #003D7A（按钮悬停）、浅蓝 #B3D9FF（背景）。用 HSL，固定 H，改 L 值，保证一致性。

第五步：测试跨平台。色彩在不同屏幕显示不同。在 Windows、Mac、手机、印刷纸上都看一遍。MacBook 屏幕偏暖，Windows 偏冷，手机 OLED 更饱和，印刷与屏幕偏差最大。

这是室内设计的经典法则，被广泛应用于网页与产品设计。规则是：60% 主色 + 30% 辅色 + 10% 强调色。

实施方法：假设主色是深蓝（#0066CC），辅色是浅灰（#F0F4F8），强调色是橙（#FF9900）。

60% 主色：背景、大面积区域。网页中通常用白色或极浅灰作实际背景，主色不直接占 60%，而是在 header、侧边栏、卡片等地方累积到 60%。

30% 辅色：次级内容、分隔线、文字。浅灰用于背景区分、边框、禁用状态。可以有多个辅色，但都应当较低饱和度。

10% 强调色：按钮、链接、重要图标。用高饱和的对比色，面积小但视觉权重高。橙色虽只占 10%，视觉存在感却顶 30% 的辅色。

检查方法：设计完后，用 Figma 的颜色覆盖功能（Inspect → Color），快速统计各色占比。也可截图后用在线色彩统计工具（如 Color Counter）验证比例。偏离比例较大的页面通常看起来不平衡。

无障碍设计不是可选项，是法律义务（美国 ADA、欧盟 EN 301 549）。WCAG（Web Content Accessibility Guidelines）定义了三个对比度级别：

AA 级（最常见要求）：文字与背景对比度 ≥ 4.5:1。例如 #000000 黑文字配 #FFFFFF 白背景，对比度是 21:1，远超 4.5:1。# 767676 灰文字配白背景，对比度约 4.5:1，刚好及格。

AAA 级（更严格）：≥ 7:1。政府网站、医疗应用通常要求 AAA。

大字体例外：18pt+（或加粗 14pt+）的大字，只需 3:1 对比度。按钮文字大多是大字体，容许比例稍低。

快速检查：用在线工具（如 WebAIM Contrast Checker）输入前景色和背景色的十六进制值，立即出对比度数字。Figma 也有内置检查。

色盲友好设计：全球约 3.8% 人口（男性 8%、女性 0.5%）有某种色盲。最常见的是红绿色盲（无法区分红绿）。设计原则：

不要仅用颜色区分信息。例如交通灯只用红绿吓人——应加符号（红 = X、绿 = ✓）。图表中的数据线不要只靠红绿，加纹理或标签。表单中的错误不要只用红色，用红色 + 警告图标 + 文字。

色盲模拟：设计前用色盲模拟器检视。Figma 有插件（Color Blind），Sketch 有 Contrast 插件；网页可用 Chrome 插件 Color Oracle。看一遍色盲患者的视觉体验。