图文不好看？可能是配色出了问题

你在图文排版的过程中有没有遇到过这些问题？

1. 整体内容丰富，排版整洁，但是看着还是不好看；
2. 选择的颜色看起来不舒服，再好的内容阅读量也上不去；
3. 颜色太多，挑花了眼，怎么挑也挑不对。

如果你出现过这些问题，那么沙师弟今天就为大家介绍解决这些问题的方法：配色。

1

为什么我们需要配色？

色彩通过人的印象或者联想而产生影响。配色就是将各种颜色摆在适当的位置，做一个最好的安排。

从微信图文排版的角度来说，合理配色还有更重要的作用。

1. 辅助阅读

通过文章中不同颜色的搭配，作者可以轻松突出内容重点，读者也可以一下就区分出内容层次。

比如「深夜发媸」 使用深红色的文字来标出重点内容，读者在阅读时很轻松就能接收到作者需要突出的信息。

「咪蒙」使用浅灰色将文章的主题内容和补充内容区分开，读者在阅读时可以区分出文章的层次。

「新世相」使用蓝色标出人名，不仅和内容有所区分，也符合大部分网页的设计规律。

2. 树立品牌风格

不论是自媒体还是企业，公众号都代表对外的形象。由于颜色带给人的不同印象，也就树立了各自的品牌风格。

比如「印象笔记」使用了与LOGO相同的绿色。

「小黄人科技」 使用了与LOGO相同的明黄色。

2

基础的色彩理论

1. 色彩三要素

包括色相、饱和度和透明度。人眼看到的任一种颜色都是这三个特性的综合效果。

色相 是色彩的首要特征，是区别各种不同色彩的最准确的标准。比如红、橙、黄、绿、青、蓝、紫等。

明度 可以理解为亮度，也就是色彩的明暗差别，或者深浅差别。色彩的明度差别包括两个方面：一是不同色相间存在的明度差别，比如黄色就比蓝色的明度高；二是同一色相的深浅变化，如藏蓝、中蓝、浅蓝都是蓝，但一种比一种浅。

纯度 是指色彩的鲜艳度。不同色相所能达到的纯度是不同的，比如红色纯度是最高。而高纯度色相加白或黑，可以提高或减弱其明度，但都会降低它们的纯度。

2. 互补色与类似色

在一个由12种基本颜色构成的色轮中， 互补色 是指在色轮中完全对立的颜色，比如红色与绿色、蓝色与橙色、紫色与黄色； 类似色 是指是指色轮中90度角内相邻的颜色，比如橙黄色、橙色与橙红色。

3

不会出错的配色妙招

第一招，色不过三

同一篇图文中，色相不要超过3个。这是在配色过程中首要遵循的基本原理。如果颜色太多，会有一种眼花缭乱的感觉（如下图所示）。

相反，如果是下图这样使用橙色作为主色调，用绿色来强调重要内容，不仅界面简洁统一，也会加强用户对产品的记忆度。

第二招，以图选色

根据文章中配图的色调选择颜色。比如你的文中出现星空的图片，那么你就可以选取深蓝色来搭配（如下图所示）。

第三招，互补+类似

互补色在色盘上相互对立，搭配在一起会产生视觉冲击的效果。如果你有需要强调的内容，那么使用互补色就再合适不过了。

不过沙师弟并不建议大面积的使用互补色，比如红色配绿色，就算有视觉冲击的效果，但是很容易引起读者的反感。

类似色在色盘上相邻，不论组合两种颜色还是三种颜色，他们都有相同的基础色，这样就形成了一个协调的组合（如下图）。

4

提高配色能力

每个人对于色彩的感知能力是天生的，很多画家对颜色的运用就达到了我们普通人望尘莫及的程度。但是配色的能力可以通过后天学习培养。

掌握了基本的色彩理论知识之后，要懂得欣赏其他人对色彩的运用，还要在图文排版的过程中大量尝试，尽可能的找到最合理的搭配。

沙师弟为大家推荐几个美观好用的配色网站（在后台回复关键词“配色”获取网址），希望大家可以通过浏览网站提高自己对色彩的感知力，激发自己的的色彩灵感。

➤ brandcolors.net

BrandColors收录了世界最知名的品牌、企业公司、知名网站的颜色，可以快速下载获取颜色文件，支持ASE、SCSS、LESS和CSS格式。

➤ www.design-seeds.com

Design Seeds是一个色彩与灵感的网站，主要从自然和生活中寻找创作元素。每日更新推送的色彩提炼为设计师、艺术家、手工艺师、室内设计师提供着源源不断的配色灵感。

➤ www.degraeve.com/color-palette

Color Palette Generator支持JPG和PNG格式的图片，并且会对图片色彩显示做详细分解，非常适合你偶然在浏览网页时发现的配色优秀的图片。不过该网站仅仅只能处理网络图片，如果你选择这款工具的话，需要将图片上传之后才能所用。

拓展阅读

排版示例 | 并列类图文信息如何配色和排版？

排版示例 | 用色彩划分文章内容

· 往期精华 ·

纯文字排版	旋转文字	emoji
滑动拼图	动态引导