一篇文说清楚怎么配色。设计师赋能,把配色卷起来。

深圳/设计爱好者/3年前/2140浏览
一篇文说清楚怎么配色。设计师赋能,把配色卷起来。
korbackim

配色方法五花八门,实际上有迹可循,毕竟且极易上手。

这篇文的诱因是在群里看到一张图,

掐指一算应该就是贩卖焦虑顺便报班的。


当看到把设计师能力硬拆开这么多项,
我深感现在设计培训不易,过度竞争把行业都卷成这样了。

有感而发,一时兴起,我也来添一份力。
让配色也稍微卷一点点。

正文开始:



相信许多搜索过配色教学的小伙伴们,看到的都是什么色彩理论基础、色环、补色、对比色、邻近色、同类色、四方色、等距三色、不同色彩的印象等等等等。
不是说这些没用,只不过
看起来一套一套的,用起来一懵一懵的。

既然别人都说那么多套了,也不差我这多说几套,大概看了一圈,没多少人讲,那么我也来讲讲这几套。
根据我写这个公众号这么多次的经验,太长没什么人看,所以我尽量总结掉知识点,还需要深入学习的小伙伴可以自己直接搜索,知识都是现成的,只是没人愿意讲而已。

真正的正文开始:



# 1
不管你是什么配色理论,都跳不出颜色空间, 不管你是色环还是色板,都是在一个颜色体系内的。
例如我最喜欢说的HSB(按色相H、饱和度S、明度B来控制颜色),
就出自孟塞尔颜色体系(Munsell color system,色相hue、纯度chroma、明度value)。
孟塞尔是美国的一个艺术家,在他之前,人们不了解色相、饱和度和明度之间的关系。记得我以前的一篇“设计师的人文关怀”吗?

人们从18世纪开始研究颜色空间,用三维实体来表现色彩关系。
其中最出名的有Philipp Otto Runge的球体↓


孟塞尔自己也画过色球,但后来他发现,如果要在人的感知上保持色相、饱和度和明度一致,那么这个“球体”难以强制为规则的几何形状。

而后孟塞尔发力的方向是测量人类视觉反应来确定每个维度中颜色的间距,让每个颜色都尽可能地均匀地表现出来。
这段文字看起来是不是很乱?我也觉得乱,所以我才说要精简文字,有兴趣的人自己去搜索。

总而言之,经过努力研究,孟塞尔的颜色空间长这样,确实不是很规则的几何形:
孟塞尔的色环有5个原色:红、黄、绿、蓝、紫,通常在原色和间色之间,按2.5的增量去设定颜色,在一个色环的相对两侧,具有相等值的两种颜色互为补色。
这是学术的说法,而在我们实际工作中,打开hsb面板直接调,真的简单又轻松;如果是印刷的话,hsb调完再换到cmyk改整数,方便而又不会被印刷厂笑话。

在这里要感谢一下孟塞尔大佬。
孟塞尔颜色体系的创立在历史学上有非常重要的意义。它在科学上,几乎难以挑剔,在创立过程中,结合了不同的科学领域,是个高度成熟的颜色系统,目前应用很广泛,许多后进的颜色体系都是在它的基础之上进一步完善。




那么讲了孟塞尔颜色体系,
顺便就说一下四大体系顺便亮出大杀器吧。

除了上面说的孟以外,还有德国的奥斯瓦尔德颜色体系、瑞典的NCS颜色体系、日本的PCCS颜色体系。

# 2
奥斯瓦尔德颜色体系
Ostwald System

奥斯瓦尔德(简称奥氏)颜色体系是元老级的色彩体系,由德国化学家威廉·奥斯特瓦尔德(Wilhelm Ostwald)研究发表。从时间来看最早,也折磨过美术生。
他这个体系主要依据是颜料调色,设定基本的八种颜色:黄、橙、红、紫、蓝、蓝绿、海绿、黄绿,然后在饱和度最高的单色中添加白色和黑色,从而得到不同明度、饱和度的等色相三角形。每个原色细分出3种色相,形成一个24色的色环。这24个色各自调出一个等色相的三角形,加在一起,就是奥氏颜色空间。
做色彩练习的时候,这颜色调得爽不爽?

但奥氏颜色跟人眼观察到的并不能完全匹配,因此有一定的局限性,只能说这是个先行者,给大家探探路。


# 3
NCS颜色体系
自然色彩系统Natural Color System NCS

NCS这套颜色体系的理论最初由德国生理学家Ewald Hering提出,由瑞典色彩中心基金会以心理学和物理学为试验基础而开发的。
NCS设定6个颜色:白、黑、红、黄、绿、蓝,对应人类视觉的六种基本颜色感知。
红、黄、绿、蓝为基本色也是互补色,每2种基本色之间划分100度,同时纯度和明度都分了100级,四色互混,再加上黑白混合出整个色彩空间。
有兴趣的可以深入了解了解,NCS这套颜色从色值上看还比较科学严谨,颜色数量也非常多,色卡可以买到你破产,虽然肉眼查看明度饱和度区别不会太明显,但足够给你在提案里大写特写了。
它的应用也比较广泛,因为设定好了科学严谨的规则,所以颜色可调可控,被很多领域采用。瑞典的国旗的蓝黄就是用了NCS标准色,宜家、法拉利也有用NCS来做配色设计。

undefined




好了,可以打住了!
知道这些颜色空间了,知道颜色怎么定了,很系统很科学,然后呢?
颜色该怎么选?
颜色该怎么配?
如果主色调为红色,然后其他颜色怎么来?
说来说去还不是要用邻近色或者xx度配色的方法去做?


所以你们这样才把设计的路走窄了嘛,全世界都这样无脑套颜色的话,还要你设计师干嘛?

我们来看下面这个↓


# 4
PCCS颜色体系
Practical Color-ordinate System
这套体系是日本色彩研究所发布的,可以粗暴理解专门研究颜色规律,集合了奥氏、孟塞尔、NCS的优点,给大家做出一个配色指引,系统地解决色彩和谐问题。

PCCS在孟塞尔体系的基础上,结合了饱和度跟明度,单独设置出来一个色调(Tone),主要用色相和色调的概念来讨论颜色。
颜色划分为24个色相、17阶明度和9级饱和度,再分为12个色调。

undefined



色调是亮度和饱和度的复合概念。
色相里存在明/暗、强/弱、暗/亮、浅/深的差异。PCCS把这种差异称为色调,我们中文设计的语境也可以说是“色调”或者“调性”。

这些色调总结出来之后,就方便记忆和沟通了,比如我以前吐槽过的马卡龙色和中性灰那些,马卡龙到底有多艳,中性灰到底要多灰,从色调来看,就一目了然。虽然色相不一样,但他们都具有同样的饱和度和明度,从调性上看是相对和谐的。

大致用法:
可以想象有一个球体,球体中每一个切面都是一个色调的色环,色环的“饱和度+亮度”从上到下逐层加重↓

你需要什么调性的,脑海里就想象出对应的色环↓
选好主色之后再根据自己的想法或者套用别人的xx度配色去配↓

很多网上的配色教学会给你分析日本的设计用了什么颜色,怎么低饱和度,怎么清新的感觉云云。
但其实套用PCCS的色调来看,就能更理性地总结出来,对于学习的人来说,会更通俗易懂。


这就是基于设计流程做的颜色系统,
首先你做设计的时候会知道需要做个什么风格的,是个什么调性,是小清新还是逼格或者土嗨,
然后根据调性定好色彩范围,色环调出来,里面基本上都是合适的颜色,
定好主色之后再根据自己的想法配,这个方式的容错率会很高,就算你不借助xx度配色之类的傻瓜方法,也做出比较协调的配色,给你更自由的设计空间。凭什么要用120度的颜色?我们用136度的照样做得出来。

但话又说回来了,不管你用什么方法,颜色都不是配了就一定合适的(单色、双色的除外)。
虽然我鼓励给设计师在自己范围内有一定的自由度,虽然配色是一门玄学,虽然有人天生就可以随便做好配色,
但设计的结果,应该是可推导可验证的。
虽然市场和数据可以验证你的配色设计,
但有没有方法可以在落地之前先行验证呢?

有!

我们下期继续!











好了不开玩笑了,方法很简单。
无论你用哪个方法配色,仍然觉得不够理想的话,
转成灰度图就行。
如果画面转为灰度之后,仍能呈现较为良好甚至完美的黑白灰关系,那么说明配色基本没有问题。如果不是你想要的灰度图,那么你也可以看出大概哪个部分出了问题,然后针对性调整。总比对着色板一顿猛点来得实际。


看到这里,恭喜你又比别人多会了一点没用的配色知识,稍微更卷了一点~希望多少能有些帮助吧。



好了,这期就到这里,我们下期再见~
88~


11
Report
|
24
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
华为项目——Ai智慧网图
Homepage recommendation
7.8月的一些作品
Homepage recommendation
CandleTown-蜡烛镇
Homepage recommendation
相关收藏夹
UI设计学习资料
UI设计学习资料
UI设计学习资料
UI设计学习资料
作品收藏夹
教程
教程
教程
教程
作品收藏夹
配色
配色
配色
配色
作品收藏夹
印刷干货
印刷干货
印刷干货
印刷干货
作品收藏夹
颜色
颜色
颜色
颜色
作品收藏夹
配色
配色
配色
配色
作品收藏夹
大家都在看
Log in