色环与配色
色彩搭配的理论,离不开「色环」,色环帮我们总结了很多色彩搭配的「公式」,这些经验可以帮我们轻松搭出和谐的配色。
在进行调色时应该采用那种模式呢?弄清楚两种颜色模式的原理,我们就可以找到最合适的方案啦。
RGB 颜色模式
RGB 即是代表红、绿、蓝三个通道的颜色,通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
HSL 颜色模式
看完了 RGB 颜色模式的原理之后,你可能会有些困惑,虽然红绿蓝这三种色光是可以构成眼所能看到的任何色彩,但是我们很难通过人脑去分析出想要的颜色如何用这种思路调出来。我们在调颜色时说的都是:“这个颜色太浅了,可以再深一点”,“这个颜色太暗了,可以再亮一点”,这里的“深、浅”,“亮、暗”就是通过 HSL 颜色模式的概念来调的。
H 是色相(Hue),色相是色彩的首要特征,是区分各种不同色彩的最准确的标准。比如:红、橙、黄、绿、蓝、紫,就分别代表不同的色相。色相取值在 0-255 之间。
S 是饱和度(Saturation),也就是纯度,取值在 0-255 之间,饱和度越高颜色越鲜艳,饱和度越低颜色越趋近于灰色;
L 是亮度(Lightness),即颜色的深浅,取值在 0-255 之间。亮度越高,颜色越接近白色,越低,则越接近黑色。
有了这个概念之后,我们就可以更直观地调出想要的颜色了。
1. 单色
单色是最简单保险的一种颜色搭配方式,在同一色相上进行纯度和明度的变化,给人协调统一的美感。适合新手使用,百搭且不容易出错。
在 PPT 的设计中,选择一种单色作为主题色,用中性色作为背景和文字的颜色,一份美观实用的 PPT 配色就诞生啦。
2. 同类色
色环角度相距 30° 以内的颜色,我们称之为同类色。
这种颜色构成的画面给人一种和谐、统一、高级的感觉,比单色搭配又了一分生动。
用同类色构建的微渐变效果,高级感满满!
这类配色形式优点:舒服、统一、视觉比较柔和、容易把控。缺点是:冲击性很弱,运用不得当会单调、缺少视觉层次感。所以此类配色方式不易用于对抗、冲击力强的设计作品。
3. 近似色
色环角度相距 30°-90° 的颜色,我们称之为近似色(类比色)。
近似色既有适度色彩对比又协调统一,色彩生动又不失和谐。
这类配色方式优点:阳光、活泼、稳定、有一定视觉冲击力、视觉层次感丰富。整体视觉层次感丰富、有跳跃性,但同时也很舒服、和谐。
4. 对比色
色环角度相距 120°-180° 的颜色,我们称之为对比色。
对比色能表达强烈的视觉情感,带来较大的视觉冲击力。
当对比色的面积较大时,给人的视觉冲击力是很强烈的。而当其中一个色相较少时,点缀、装饰的作用就显现出来,这部分颜色就是画面中容易出彩的部分。
5. 互补色
色环上相对的颜色,也就是色环相距 180° 的颜色为互补色。
互补色是色彩对比最为强烈的两个颜色,互补色的运用对技法上要求较高,运用不当容易让画面「辣眼睛」,当然互补色运用得当也可以创造出大胆出彩的设计。
这类配色形式优缺点和对比色很相似。只不过此类视觉冲击力更强也更难把控。
除了以上色相上的搭配外,我们还可以从明度和饱和度上考虑,变化出更多的搭配。
6. 高饱和度配色
最近流行的酸性设计中,就是用高饱和度的颜色辅以夸张的视觉符号产生强烈的视觉刺激,打造一种前卫又复古的独特视觉风格。
7. 低饱和度配色
我们常听到的莫兰迪色,就是采用低饱和度的颜色搭配。在莫兰迪的画中所有的色彩都渗入了灰色和白色调,将原本浓郁艳丽的本色转化成为优雅高级的灰色质感,达到一种低饱和度的状态。我们将这种配色的思路提取出来,运用到设计中,便可打造出一种高级感。
PPT 中的配色原则
1. 可读性
颜色的搭配要遵循内容的可读性,背景和文字同时使用过于鲜艳或者对比度低的颜色,会使得内容可读性变差。
2. 一致性
颜色的一致性是指所有页面的颜色遵循一套规则,运用固定的一套主色、辅助色、字体色贯穿全篇。
当遇到下图这种 PPT 中颜色使用较多,且没有任何规律的情况,就违背了颜色使用的一致性原则,需要对 PPT 的颜色进行统一。
我们可以选取封面中的紫色和粉色作为主题色,通过紫色和粉色的纯度和明度的调节,还可以变化出更多的辅助色,用这些颜色贯穿到每页的图表图示中,画面看起来和谐统一。
3. 适用性
颜色可以传达情绪和信息,PPT 的配色往往奠定了整个 PPT 的调性,在颜色选择上要选择与主题相符的配色方案。比如某企业有自己的 VI 色,某行业有自己的特有色彩基调等等,我们应根据相应的企业规范或者行业调性来决定 PPT 的配色。
以下列举几个常见颜色对应的相关行业,供大家选择配色时作为参考:
着重提醒配色比例:70%主色、25%辅助色、5%点缀色。一般情况下:色相控制在三个以内,因为色相越少,越容易把控,越不容易乱!
还有个有趣的配色、调色网站,没有思路时可以找下参考,操作起来也很方便:叫做Adobe Color(https://color.adobe.com/zh/create/color-wheel):