技术传播人士应该知道的色彩搭配常识

Foreword

最近在如何使用颜色来提高技术文档的可读性？这篇文章中提到了一些色彩相关的名词。如果不是专业的设计人员，可能了解得不是特别透彻，对于某些颜色准则的运用也会存有疑惑。

技术传播中，Visual Effectiveness 是很重要的一部分。各种图表是很常见的一种形式，而图表中又很可能会涉及颜色的运用。Technical Writer 或 Technical Communicator 也不应该只局限于文字，而应该多站在技术传播的角度去思考各种问题。

我在之前读 Robin Williams 的 Non-Designers Design Book《写给大家看的设计书》时，学到了一些可以快速 Get 的色彩搭配知识，这里跟大家分享一下。此外，还会分享两款简单易用的配色工具。

三分钟 Get 设计中的色彩搭配常识

即便你对色彩运用零基础也没关系，因为下面这些内容特别通俗易懂，也比较实用，很适合小白入门。

1. 认识色轮

• 三原色：色轮的基础是红、黄、蓝三种颜色，即三原色 (Primary colors)。这是唯一无法创建的颜色，而其它颜色都可以通过混合颜色来得到。

  

  三原色

• 三间色：将三原色当中任何两种原色以同等比例混合而成的颜色，即三间色 (Secondary colors)，也叫第二次色。

  

  三间色

• 第三色：现在再将上面色轮上空白两边的颜色等量混合，得到的颜色就是第三色 (Tertiary colors, or Third colors)。

  

  第三色

2. 四种颜色关系

接下来，了解下四种颜色关系，即：互补色、三色组、分裂互补三色组和类似色。

• 互补色：色轮上相对（即完全对立）的颜色称为互补色 (Complementary colors)。

  应用：由于它们的对立性，最佳搭配是一种作为主色，另一种用于强调。

  

  互补色

• 三色组：色轮上彼此等距的任意三种颜色即构成一个三色组 (Triad)。

  应用：红、黄、蓝就是一种很流行的颜色组合，常用于儿童产品。不过，也因此很容易显得幼稚，此时就需要引入一些暗色和亮色来调和。

  由于红黄蓝是三基色，因此这一组合也叫基色三色组 (Primary triad)。同理，绿色、橙色和紫色构成的颜色组合叫间色三色组 (Secondary triad)。

  除了红黄蓝构成的基色三色组以外，所有三色组中三种颜色都有基础色使其相互连接，因此看上去非常协调。

  

  三色组

• 分裂互补三色组：选择一种颜色，在色轮的对面找到它的互补色，互补色两侧的颜色与该颜色便构成一个分裂互补三色组 (Split complement triad)。这样得到的组合会有一种更为细致的颜色边界。

  

  分裂互补三色组

• 类似色：类似色组合 (Analogous colors) 由色轮上彼此相邻的颜色组成，也叫相似色。

  应用：它们都有相同的基础色，因此就形成了一个协调的组合，用不同的亮色和暗色构成一组类似色，可以营造出相当醒目的效果。

  

  类似色

3. 暗色和亮色

• 色调：纯色就是色调 (Hue)。向色调增加黑色就构成一个暗色 (Shade)；向色调增加白色就构成一个亮色 (Tint)。

  

• 单色组合：由一种色调及其多种亮色和暗色组成的颜色组合，即单色组合 (Monochromatic colors)。深深浅浅的单色也可以呈现出很棒的效果。

  

  黑色的不同亮色
  

  暗褐色的不同亮色

• 暗色和亮色的组合：可以从上面提到的四种颜色关系中选择一个，然后使用那些颜色的不同亮色和暗色，可以放心颜色的搭配，摆脱幼稚，表现丰富的效果。

  

4. 色质

色质 (Tone) 是指某种颜色的特定明暗度、深浅度或色调。

应用：色质过于接近，会影响文字的可读性。如果使用类似色质的色调，一定要尽力避免它们挨在一起，每种色调的用量也不要完全相同。

色质过于接近，可读性差

色质差异明显，可读性好

5. 暖色与冷色

• 暖色 (Warm colors) 是指其中包含一些红色或黄色的颜色。
• 冷色 (Cool colors) 是指其中包含蓝色的颜色。

应用：冷色趋于做背景色；而暖色则是趋进型的，可以很快映入眼帘。如果要组合暖色和冷色，一定要少用些暖色。由于冷色是后退型的，需要使用更多的冷色才能产生效果或形成有效的对比。

两款简单易用的配色工具

在选择颜色的时候，可以使用一些工具来协助，就会简单很多，有些工具还可以让你预览配色效果。这儿跟大家分享两个配色工具：

• The Color Scheme Designer

  地址：http://www.paletton.com

  

• Adobe Color CC

  地址：https://color.adobe.com/create/color-wheel/

  

Afterword

了解关于颜色运用的基础知识是一件很简单的事，关键是要试着应用到自己的工作、学习或生活中。一起实践吧！欢迎留言交流哦~

你可能想读：

技术文档诞生记 | 完整的技术写作流程是怎样的？
Technical Writer 可提供的交付物有哪些？
Technical Writer 日常工作中好用的小工具
技术翻译需要有 Technical Writer 的 sense
深度解析关于技术翻译的六个认知误区
如何让你的内容输出更加专业更有设计感？
书单 | 有哪些技术传播从业者必知必看的书籍？
有哪些适合技术传播从业者关注的优质博客？（一）
有哪些适合技术传播从业者关注的优质博客？（二）
经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议（上篇）
经验分享 | 来自 11 位 Technical Writer 前辈的职业发展建议（下篇）
英语技术文档的标题到底该大写还是小写？
如何使用正则表达式批量添加和删除字符？
Markdown：写技术文档、个人博客和读书笔记都很好用的轻量级标记语言
如何为 Markdown 文件自动生成目录？
技术写作实例解析 | 简洁即是美
两分钟趣味解读 Technical Writer
若脱离理解，直译得再正确又有何意？
优质译文不应止于正确，还要 Well-Organized
Technical Writer 需要 Technical 到会写代码吗？
写在入职技术型创业公司 PingCAP 一个月之后
揭秘 Technical Writer 的工作环境 | 加入 PingCAP 五个月的员工体验记

-END-