配色方法

假设要做一张周末步行活动海报。你喜欢蓝、橙、绿，每个单独都不错，但放在一起就不知道谁该做背景、谁该做标题，也不知道该改哪里。这才是配色要解决的任务：⁠先有用途，再选择颜色之间的关系，并把它们分配到具体位置。

本篇会给出六种可尝试的方案，再完整做一遍蓝橙方案的选择与修正。它们可以作为入门起点，最终要在真实画面里检查，不是抽出几个漂亮色块就已经完成设计。

先看完整画面，再看色卡

下面四张示意海报的图形、文字和位置相同，只改变颜色分配。A 是同色系，B 是邻近色方向，C 是蓝橙对比，D 是三角配色。先选你希望用于这次活动的版本，再说你看到了哪些差别。

A 的主要变化来自浅深；B 把主要彩色区域留在黄绿到蓝绿附近；C 用较大的蓝色山形与较小的赭橙色圆形成对比；D 给蓝、红、黄三个家族分工。⁠本页关于“适合”的判断，是这些具体图案、面积和文字条件下的设计建议，不是所有人共有的色彩情绪定律。

六种常用起点：选的是什么，为什么能成立？

把红、橙、黄、绿、蓝、紫按相邻过渡围成一圈，就得到一种传统色相家族的示意。下面 A 只选择一个方向，通过浅深与彩度增加变化；B 选择邻近方向；C 选择对侧方向；D 选择三个间隔较开的方向。分裂互补则从某色的对侧再向两旁分别取一个方向。

色相环告诉你候选彼此离得近还是远，⁠不能告诉你哪种颜色应占最多面积，或文字该用多深⁠。接下来把这些关系翻译成可直接尝试的方案。

“同色系、邻近色、互补”等名称主要描述色相关系。它们没有替你决定明度、彩度、面积和文字可读性。以下颜色是本课自配的实际示例；十六进制色值方便在自己的工具里复现。

这里的“互补方向”是颜色家族关系，经过明度与彩度调整后，不保证任意软件中的色相角恰好相差 180°。红黄蓝传统色环与屏幕 RGB 色环的对侧颜色也不完全一样。名称帮助选择方向，不能代替实际对照。

跟着完成一张蓝橙海报

任务先固定：周末步行活动需要一个醒目的标题、一组山形和一个较小的活动重点。我们要让标题可读、山形成立、橙色只作局部强调。下面三幅保持图形与位置一致，按决定顺序完成配色。

A：先用灰确认层级。 浅底、深色标题和山形已经能组成画面。圆暂用中灰，避免一开始就被鲜艳颜色带走。这里先回答“信息能否分开”，还没有回答“用什么气氛”。

B：确定主色与共同背景。 把山形设为深蓝 #284D68，背景设为浅米 #F1E9D9，标题用更深的蓝黑 #233849。选择蓝是这个案例对远山的表达选择；米底与蓝山也同时拉开浅深和冷暖。标题单独使用深色，因此不用强迫山形承担文字可读性。

C：加入重点，再检查周围。 圆改为赭橙 #C87A35，用与蓝相隔较远的色相方向增加区别；彩度控制在较克制的范围，面积也小于山形。灰蓝绿的前景 #7F9CA5 接近主色方向，但更浅，让它成为辅助层。

为什么不用同样深的灰圆？可以用，那会把重点更多交给位置和明暗。为什么不选鲜红？也可以试，但要重新比较它与主色的色相差、彩度和明度。此处选择橙色，是为了得到可见的蓝暖对照；“互补”这个名称本身不完成这些判断。

到这里，色卡和画面里的每个角色能够一一对应。接下来不要同时把五种颜色都换掉：先用小改动找出问题来自哪一项。

三个接近实际的偏差：一次只修一个问题

文字色过浅

A 只把标题改浅，其余色值与位置不动。蓝橙关系仍在，但标题与浅底分不开。B 只恢复深色标题。修复的是文字与底的对比，没必要同时把山形改黑。

重点色更鲜艳

A 只把重点换成更鲜艳的橙色，B 使用原来的赭橙。比较重点是否开始压过标题或山形。这不是“鲜艳一定错”：若是需要更强活动感的方案，A 可能合适；若目标仍是克制的局部强调，B 更接近本题目标。

重点区域变大

A 只增大圆，所有颜色和其他图形不变；B 恢复较小的圆。大的橙圆可能变成画面的主要对象，也更像一轮太阳。颜色没有变，角色却可能变了。先决定圆要承担什么，再判断需不需要缩小。

下面的交互把三个比较分别放到当前方案里。先选一套配色，再选一个偏差；回到“按角色安排”可恢复基准。切换到灰阶可以辅助核对明暗，但不能代替彩色画面本身的比较。

灰阶将角色方案按 sRGB 相对亮度转成灰色，辅助检查明暗；它不是上一课保留 OKLCH L 的转换，也不衡量美感。

面积为什么能改变“同一组颜色”的作用？

现在用更简单的十二格把面积单独拿出来。保持几何布局和三种编码色不变，只给已有格子重新分配颜色，避免把“颜色变了”与“布局也变了”混为一谈。

第一个方案中，赭色只占一格，可以成为局部强调；第二个方案中它占六格，就开始承担大面积色调。第三个方案把蓝灰和赭色交换位置，说明“重点色”是一种用途，不是某个颜色天生拥有的身份。十二格的比例是实验条件，不是应该照抄到每幅画里的配方。

三类常见失败，怎样动手修？

对于网页普通文字，WCAG 2.2 的 AA 最低对比要求通常是 4.5:1，大字通常为 3:1，并有具体尺寸条件。这里的对比值用于文字可读性检查，不给海报或配色打“美观分”。单靠颜色标示类别时，还应配合文字、形状或图案。W3C：文字最低对比度

第二个任务：已有插图的页面，为什么不直接套海报？

海报里彩色山形就是主要内容；茶叶介绍页已经有绿色插图，还要容纳文字和入口。新增颜色应先考虑怎样支撑现有信息，不能因为海报的蓝橙好用，就把同样的面积与强度原样搬过来。下面把这个任务留给你先判断，再展开分析。

换到茶叶介绍页：保留现有插图，选一次修改

绿色叶片插图已经确定，任务是先看插图与标题，再找到购买入口。A 的橙色大入口有些抢；B 缩小入口并改为深绿；C 又把背景换成更暖的米色。先比较 A→B，再比较 B→C：哪一步解决了竞争？哪一步主要在改变整体色调？

两个迁移自检

情境一： 你要做一张较克制的茶叶介绍页，照片本身已经有很多绿。你选哪一种起点，为什么？

情境二： 蓝橙配色里，橙色小字放到蓝色区域上不容易读。是否说明互补配色不能用？

把自己的任务带入最后一次练习：写出用途，选择一个主色家族，配一个低彩度底和一个候选重点色，再说明各自的面积与位置。保留一个备选方案，比较它们的取舍。能完成这一过程，才真正从“认识几个配色名称”走到了“有理由地搭配”。

延伸：Adobe：把四类配色用到海报上、Adobe 色环工具。这些工具可以帮助找候选；本页的六组色值、图案与具体设计分析为本站自制示例。