---
title: 配色方法
url: https://doc.liz6.com/general-education/visual-foundations/06-color-in-context
locale: zh
area: general-education
tags:
- 通识入门
- 视觉基础
date: 2026-09-10
modified: 2026-09-10
description: 从同色系、邻近色、互补方向到实际海报，学习选择底色、主色和重点色，并通过明暗、彩度、面积和文字对比解释与修正配色。
---
# 配色方法
假设要做一张周末步行活动海报。你喜欢蓝、橙、绿，每个单独都不错，但放在一起就不知道谁该做背景、谁该做标题，也不知道该改哪里。这才是配色要解决的任务：**先有用途，再选择颜色之间的关系，并把它们分配到具体位置。**
本篇会给出六种可尝试的方案，再完整做一遍蓝橙方案的选择与修正。它们可以作为入门起点，最终要在真实画面里检查，不是抽出几个漂亮色块就已经完成设计。
## 先看完整画面，再看色卡
下面四张示意海报的图形、文字和位置相同，只改变颜色分配。A 是同色系，B 是邻近色方向，C 是蓝橙对比，D 是三角配色。先选你希望用于这次活动的版本，再说你看到了哪些差别。
A 的主要变化来自浅深；B 把主要彩色区域留在黄绿到蓝绿附近；C 用较大的蓝色山形与较小的赭橙色圆形成对比；D 给蓝、红、黄三个家族分工。**本页关于“适合”的判断，是这些具体图案、面积和文字条件下的设计建议，不是所有人共有的色彩情绪定律。**
## 六种常用起点：选的是什么，为什么能成立？
把红、橙、黄、绿、蓝、紫按相邻过渡围成一圈，就得到一种传统色相家族的示意。下面 A 只选择一个方向，通过浅深与彩度增加变化；B 选择邻近方向；C 选择对侧方向；D 选择三个间隔较开的方向。分裂互补则从某色的对侧再向两旁分别取一个方向。
色相环告诉你候选彼此离得近还是远，**不能告诉你哪种颜色应占最多面积，或文字该用多深**。接下来把这些关系翻译成可直接尝试的方案。
“同色系、邻近色、互补”等名称主要描述色相关系。它们没有替你决定明度、彩度、面积和文字可读性。以下颜色是本课自配的实际示例；十六进制色值方便在自己的工具里复现。
| 起点 | 本课示例：底色 / 主色 / 重点色 | 为什么这样分配，适合先试什么 |
| --- | --- | --- |
| 同色系 | `#E9F1EA` / `#527659` / `#214329` | 灰绿底、较深绿主形、深绿重点，减少色相之间的竞争；可以先试植物手册、安静的商品图。需要拉开浅深，否则容易糊成一片。 |
| 邻近色 | `#F3F1DF` / `#46766B` / `#B6BE63` | 米白底托住蓝绿与黄绿，它们有邻近家族的联系；可以先试植物、食材等相关题材。黄色方向较浅，不能直接承担所有小字。 |
| 互补方向 | `#F1E9D9` / `#284D68` / `#C87A35` | 蓝与橙接近传统色环的相对方向；深蓝主形与少量赭橙重点分工，米白给两者留出空间。适合尝试清楚的主次，别把双方都铺成高彩度大块。 |
| 分裂互补方向 | `#F0E8DD` / `#505A80` / `#BF734B`，辅以 `#B39A50` | 以蓝紫为主，把对侧暖色拆成偏橙与偏黄两个方向，得到更多变化。暖色仍需要分主辅，否则增加颜色只会增加竞争。 |
| 三角配色 | `#F4EEE1` / `#436990` / `#C15B5D`，辅以 `#C6A64D` | 蓝、红、黄在传统色环上相隔较开，能提供明显差异；适合试更丰富的活动插画。以一种为主，其他作较小区域，通常比三者同样强更容易组织。 |
| 中性色＋重点色 | `#F2ECE3` / `#8D8981` / `#A54235` | 米灰、暖灰建立共同背景，小块砖红形成差别；适合在多图或信息页面里保留一个明确重点。中性色也有偏色，需要一起比较。 |
这里的“互补方向”是颜色家族关系，经过明度与彩度调整后，不保证任意软件中的色相角恰好相差 180°。红黄蓝传统色环与屏幕 RGB 色环的对侧颜色也不完全一样。名称帮助选择方向，不能代替实际对照。
## 跟着完成一张蓝橙海报
任务先固定：周末步行活动需要一个醒目的标题、一组山形和一个较小的活动重点。我们要让标题可读、山形成立、橙色只作局部强调。下面三幅保持图形与位置一致，按决定顺序完成配色。
**A：先用灰确认层级。** 浅底、深色标题和山形已经能组成画面。圆暂用中灰，避免一开始就被鲜艳颜色带走。这里先回答“信息能否分开”，还没有回答“用什么气氛”。
**B：确定主色与共同背景。** 把山形设为深蓝 `#284D68`，背景设为浅米 `#F1E9D9`，标题用更深的蓝黑 `#233849`。选择蓝是这个案例对远山的表达选择；米底与蓝山也同时拉开浅深和冷暖。标题单独使用深色，因此不用强迫山形承担文字可读性。
**C：加入重点，再检查周围。** 圆改为赭橙 `#C87A35`，用与蓝相隔较远的色相方向增加区别；彩度控制在较克制的范围，面积也小于山形。灰蓝绿的前景 `#7F9CA5` 接近主色方向，但更浅，让它成为辅助层。
为什么不用同样深的灰圆？可以用，那会把重点更多交给位置和明暗。为什么不选鲜红？也可以试，但要重新比较它与主色的色相差、彩度和明度。此处选择橙色，是为了得到可见的蓝暖对照；“互补”这个名称本身不完成这些判断。
到这里，色卡和画面里的每个角色能够一一对应。接下来不要同时把五种颜色都换掉：先用小改动找出问题来自哪一项。
## 三个接近实际的偏差：一次只修一个问题
### 文字色过浅
A 只把标题改浅，其余色值与位置不动。蓝橙关系仍在，但标题与浅底分不开。B 只恢复深色标题。修复的是文字与底的对比，没必要同时把山形改黑。
### 重点色更鲜艳
A 只把重点换成更鲜艳的橙色，B 使用原来的赭橙。比较重点是否开始压过标题或山形。这不是“鲜艳一定错”：若是需要更强活动感的方案，A 可能合适；若目标仍是克制的局部强调，B 更接近本题目标。
### 重点区域变大
A 只增大圆，所有颜色和其他图形不变；B 恢复较小的圆。大的橙圆可能变成画面的主要对象，也更像一轮太阳。颜色没有变，角色却可能变了。先决定圆要承担什么，再判断需不需要缩小。
下面的交互把三个比较分别放到当前方案里。先选一套配色，再选一个偏差；回到“按角色安排”可恢复基准。切换到灰阶可以辅助核对明暗，但不能代替彩色画面本身的比较。
**把六组配色放进实际画面**
在固定海报中选择六种配色，分别比较文字变浅、重点色更强、重点面积变大与基准方案。每次只修改一个颜色角色或一个形状尺寸。
灰阶将角色方案按 sRGB 相对亮度转成灰色，辅助检查明暗；它不是上一课保留 OKLCH L 的转换，也不衡量美感。
## 面积为什么能改变“同一组颜色”的作用？
现在用更简单的十二格把面积单独拿出来。保持几何布局和三种编码色不变，只给已有格子重新分配颜色，避免把“颜色变了”与“布局也变了”混为一谈。
**三种颜色，三种分配**
画面固定为 12 个等面积单元，只重新分配米色、蓝灰和赭色。小面积强调方案为 7:4:1，大面积赭色为 4:2:6，角色互换为 7:1:4；几何布局始终不变。
第一个方案中，赭色只占一格，可以成为局部强调；第二个方案中它占六格，就开始承担大面积色调。第三个方案把蓝灰和赭色交换位置，说明“重点色”是一种用途，不是某个颜色天生拥有的身份。十二格的比例是实验条件，不是应该照抄到每幅画里的配方。
## 三类常见失败，怎样动手修？
| 问题 | 原因可能在哪里 | 优先做的一次修改 |
| --- | --- | --- |
| 每一块都在抢 | 面积、彩度和反差都很强，没有主辅 | 先指定主色，把部分辅助区域降低彩度或移向中性色；保留一处重点 |
| 所有颜色都很柔和，却显得发灰 | 整体明暗范围过近，主体与背景缺少差别 | 先拉开重要边界的明度，再决定是否需要增加彩度 |
| 色卡很好看，放到页面里字看不清 | 忽略了实际面积与前景背景关系 | 改字色或字后面的底色；不要只换标题的色相 |
对于网页普通文字，WCAG 2.2 的 AA 最低对比要求通常是 4.5:1，大字通常为 3:1，并有具体尺寸条件。这里的对比值用于文字可读性检查，不给海报或配色打“美观分”。单靠颜色标示类别时，还应配合文字、形状或图案。[W3C：文字最低对比度](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
## 第二个任务：已有插图的页面，为什么不直接套海报？
海报里彩色山形就是主要内容；茶叶介绍页已经有绿色插图，还要容纳文字和入口。新增颜色应先考虑怎样支撑现有信息，不能因为海报的蓝橙好用，就把同样的面积与强度原样搬过来。下面把这个任务留给你先判断，再展开分析。
## 换到茶叶介绍页：保留现有插图，选一次修改
绿色叶片插图已经确定，任务是先看插图与标题，再找到购买入口。A 的橙色大入口有些抢；B 缩小入口并改为深绿；C 又把背景换成更暖的米色。先比较 A→B，再比较 B→C：哪一步解决了竞争？哪一步主要在改变整体色调？
先判断，再展开图解
A→B 同时减少入口面积并改用深绿，让它仍可识别、但较少与插图竞争；这是一组实用组合修改，不能仅凭结果把作用全部归于其中一项。B→C 保持插图、入口与布局不变，主要调整底色及灰色信息条的色调。B、C 都可能成立，取决于希望整体偏清凉还是偏温暖。不能因为茶叶是绿色，就要求所有区域都填绿。
展开参考思路
可以先试米灰中性色底加少量深绿，让照片保留主要彩色信息；也可以用较弱的邻近色建立联系。若每个边框、标题、按钮都再加高彩度绿，可能反而让照片失去重点。判断依据是现有照片、信息层级和阅读用途，不是“茶只能配绿”。
展开参考思路
不能这样推断。色相差别与文字的明暗对比是不同问题。先检查字与紧邻背景的对比，可把字改浅、把底色改深或为文字加稳定底板；仍然可以在其他大色块里保留蓝橙关系。通过文字检查也不等于已经获得所有意义上的无障碍可用性。