色彩理论知识是美术学科的首要的、基本的课题。设计师经常运用色彩理论基础知识,无论是建立品牌形象,还是想要在广告中表达正确的情绪,理解色彩理论知识都会有很大帮助。本文分享了一些色彩理论搭配技巧,帮助你了解色彩理论基础知识,学习像专业人士一样思考色彩理论。

1. 什么是色彩理论知识

色彩理论基础知识可以帮助你正确使用色彩,你将会以一种全新的方式来看待色彩。

1.1 牛顿的色轮

1666年,牛顿通过棱镜实验发现了颜色是光的一部分。牛顿经过多次实验,将结果一一记录在一张圆形的图上,产生了最早的色轮版本,自此,我们便有了更直观的色彩理论知识框架。

色彩图

1.2 三原色与间色、复色

英国科学家布鲁斯特认为红、黄、蓝是颜料三原色(所谓原色,即是任意一色都不能由另外两种原色调出来)。

我们可以将色彩分为三类来更好地理解色彩理论:

  • 原色——色轮具有三种原色:红色、蓝色和黄色。你可以将原色视为色轮的根,那是因为色轮上的所有其他颜色都来自于它们——无论是原色间的相互混合还是原色与辅助颜色的混合。

  • 间色——通过一次混合两种原色,我们可以产生三种间色:红色+蓝色=紫色、蓝色+黄色=绿色、红色+黄色=橙色。

  • 复色——将一种原色与一种间色混合在一起,就得到了复色。这意味着总共有六种复色,每种都以其颜色组合命名:红橙色、红紫色、黄橙色、黄绿色、蓝绿色和蓝紫色。

色轮

1.3 色相、饱和度和亮度

通过上面对于原色、间色和复色色彩理论知识的了解,现在你已经可以自由的混合创造颜色了,也能更加深入理解色彩理论知识了。用更专业的色彩理论来描述颜色:色相、饱和度和亮度。

  • 色相(H):色相是色彩的首要特征,按照波长来划分色彩的相貌,是区别各种不同色彩的最准确的标准。在HSB色彩模型下,色相的取值范围为0°到360°。

  • 饱和度(S):指色彩的鲜艳程度,也称作纯度。HSB色彩模型下,饱和度和明度取值范围为0到100%。随着饱和度降低,色彩变得暗淡直至成为无彩色,即失去色相的色彩。

  • 明度(B):也称为亮度。表示色彩的明暗程度,色调相同的颜色,明暗可能不同。例如,绛红色和粉红色都含有红色,但前者显暗,后者显亮。亮点的就称其为“明度高”;反之,则称其为“明度低”。在无彩色中,明度最高的是白色,中间的是灰色,最后随着灰度不断降低,得到黑色。

色板

2. 色彩搭配指南

研究表明,颜色可以影响我们的情绪和行为。这就需要用到色彩理论色轮了。颜色在色轮上的位置,反映了它与其他颜色的“关系”,关系得当的,搭配起来就和谐、好看。

外卖登录页

类比色是指色轮上相邻的三种颜色。它们搭配在一起的效果非常和谐,因为它们之间没有太大的对比,彼此不冲突、不抢眼。例如,Pixso资源社区中的外卖登录页,类比色(红色、红橙色和橙色)都散发出温暖的感觉,他们搭配在一起能共同营造出热闹、喜乐的氛围。

医疗健康界面

互补色是色轮相对两侧的任意两种颜色,它们之间的强烈对比强调了它们之间的不同,形成了一对充满活力的组合。如Pixso资源社区的医疗健康界面所示,选用的蓝色和橙色是一对常见的互补色。

颈椎健康指数app

单色是只选一种颜色,以不同的饱和度、不同的明度等组合在一起,在同一色系的基础上进行的色彩搭配。如Pixso资源社区的颈椎健康指数app,单色配色简约大气、色调干净统一且稳定,容易营造出和谐与平衡的感觉,是较容易掌握的配色方法。

3. 如何进行色彩搭配

在对色彩理论基础知识有了一定的理解后,我们可以借助专业的UI/UX设计工具Pixso来进行色彩搭配。Pixso作为国内新一代在线协作设计工具,不单原型、设计、交付能一站式进行,还支持跨平台协作、标注、绘画以及文件实时云同步。至于色彩搭配方面,Pixso更是表现力拉满:

3.1 一键取色

使用Pixso,我们只需要把所需参考颜色的图片拖拽进入工作台,在右上角的插件里找到图片取色插件,点击“一键取色”即可获取色彩搭配以作参考。

Pixso一键取色

3.2 大厂色板

除了参照色彩理论基础知识,应用大厂的配色方案也是一种很聪明的做法。Pixso内置色板管理插件,除了能够找到Material Design、Arco Design、Element等大厂色卡外,还可以自定义色板,在设计项目中快速复用。

大厂色板

3.3 颜色样式

确定了基本的配色方案以后,为了使设计的整体元素具有一致性,避免多样式导致的视觉效果不佳以及给用户带来的认知障碍,我们可以使用Pixso的组件和样式创建功能,创建一个颜色的样式。

在Pixso中,颜色样式可以应用于填充样式、描边样式和文字,也可以为图像或渐变创建颜色样式。具体创建步骤为:

Step1:选择需要创建样式的对象。

Step2:在右侧属性面板中,单击要保存的属性的样式图标。

Step3:点击颜色样式面板中的【+】号,创建新样式。

Step4:为样式命名,然后单击【创建样式】。

创建颜色样式

现在你已经掌握了色彩理论基础知识,是时候将它们付诸实践了。打开Pixso工作台,尝试将色轮中不同关系的颜色搭配起来,看看色彩碰撞产生的化学反应吧!