详细解析平面作品色彩系列之绿色篇

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:ifeiwu   作者:飞屋睿UIdesign

关键词

上次说了色彩系列黄色,今天继续聊聊绿色。这篇文章是在看了李正贤的《WOW不一样的配色设计》一书的部分摘录和读书笔记,除了色彩基础知识科普,也会有对应的网页案例分析,非常适合新手学习。

前言:

绿色是一种存在感极强的色彩,很多人都觉得绿色很难与其他色彩搭配,相对来说,它的配色显得比较单一。我们曾经探讨过橙色,由于橙色介于红色和黄色之间,因此看上去有种暧昧感。而绿色虽然介于蓝色与黄色之间,却与橙色完全不同,绿色的存在感极强,和蓝色黄色相近却拥有完全不同的视觉感受。

一、绿色的名称和词源

绿色作为大自然的主旋律,能带给人安宁舒适、生机勃勃的感觉。研究也表明,绿色有助于恢复视力、缓解紧张,对某些疾病的治疗也有辅助作用。然而,我们仔细观察就会发现,尽管生活中对于绿色的配色可谓“烂大街”,设计师们却都小心翼翼地绕过了100%的绿,或者偏黄或者偏蓝,这种有偏颇感的绿色成为大家的新宠,百看不厌。那么,为什么绿色有这样的雷区?100%的颜色看上去都有种难以和其他颜色相容的姿态吗?

淡黄绿色(Chartreuse)

法语Chartreuse意为查特酒,是一种法国和西班牙修道院僧侣酿制的黄绿色甜酒,其色彩呈现出黄色和草绿色,一般用来指称浅嫩绿色。

详细解析平面作品色彩系列之绿色篇

苹果绿(Apple green)

这是一种泛黄色较亮的绿色。

详细解析平面作品色彩系列之绿色篇

草绿色(Grass green)

这里指的是草的颜色,是一种泛黄色的深绿色。

详细解析平面作品色彩系列之绿色篇

深绿色(Malachite green)

该名称来源于一种古希腊语中叫做malakhe的植物叶子,是一种较深的绿色。

详细解析平面作品色彩系列之绿色篇

琉璃绿(Bottle green)

这是一种玻璃绿色,主要指称较深的绿色。

详细解析平面作品色彩系列之绿色篇

橄榄绿(Olive green)

橄榄的颜色本是黄色中泛绿,继续走到绿色的色域里就成为橄榄绿。指的是一种泛黄的绿色。

详细解析平面作品色彩系列之绿色篇

苔藓绿(Moss green)

像苔藓的颜色,是一种泛黄色低纯度的绿色。

详细解析平面作品色彩系列之绿色篇

卡其色(khakie)

印度语khakie是土的意思,原来是英属印度时期军装的颜色。这是一种较浑浊和黯淡的黄绿色。

详细解析平面作品色彩系列之绿色篇

蛋白石绿(Opal green)

蛋白石的颜色,是一种泛白的绿色。

详细解析平面作品色彩系列之绿色篇

冰绿色(Ice green)

冰下的颜色,是一种很亮的绿色。

详细解析平面作品色彩系列之绿色篇

二、绿色的意象和配色表现

100%的绿色虽然带有蓝色黯淡的感觉,但也隐含着黄色的光芒,不是一种完全冷暗的颜色。在绿色不作为主色的情况下,有必要稍微隐藏一些它的光芒。绿色与黑白色配色时,视觉效果较为强烈且具有明确的存在感。这样看来,绿色在配色中几乎不能帮助其他色彩,也不能强调整体的氛围,有独自抢眼的倾向,而又无法像红色那样给人以足够强烈的印象。

源于自然的绿色意象:

叶子:树木、自然、舒适、生命、智慧、新奇、休息、凉爽…… 地球:新奇、健康、和平…… 四叶草:幸运、顺应、服从、合格、稚嫩、青少年……

源于社会的绿色意象:

信号:前进、出发、行动、进行…… 宗教:恶魔(怪物)、堕落…… 符号:清醒、治疗、帮助、诚实、勤劳、中产阶级……

在绿色作为主色,其他颜色作为点睛色的情况下,配色可以很顺畅,但最好避免使用100%的绿色,降低纯度、提高明度是不错的方法。使用泛黄或泛蓝的青绿色,也会有较好的效果。例如,在树木不是作为主体而是作为单纯的背景物的情况下,树木的颜色要去“迎合”周围使用的颜色方向。这是避免100%绿色的好办法!假如画面上方是蓝色天空,可以把蓝色换成青绿色;如果天空中有黄色霞光,可以用泛黄的嫩绿或者橄榄绿来表示。

如果不想让画面整体的配色过于黯淡,绿色(尤其是100%的绿色)之外就需要有非常亮的色彩相互搭配,反之亦然。必须要提醒的是,即使画面中已经有了白色,最好也增加一种亮色,因为100%的绿色,似乎看上去就偏黯淡。

提前需要确定所使用的绿色要表现的是什么感觉,这样避免绿色影响整体配色的协调。温暖舒适的叶子的绿色和凉风拂面的秋叶的绿色是完全不同的。绿色在配色中尽量避免无意义的绿色,这样会显得抢眼。

不知道大家有没有注意到?曾经出现过一种用绿色做出的塑料的装饰树,虽然绿得足够抢眼,却让人看不到一点生机,一眼识破是假象。这是为什么呢?因为自然界的绿色是多种多样的。虽然看上去都是绿色,却可以有青葱的嫩绿,松针的草绿,清亮深邃的青绿色,落叶的橄榄绿等。这些颜色各有各的感觉。比如,泛黄的绿色,即便不是鲜明的嫩绿也给人温暖、自然、积极的印象。饱和度偏低且偏黄的绿色,看上去就更加柔和舒适。

详细解析平面作品色彩系列之绿色篇

青绿色是在绿色中加入了蓝色的绿色系色彩,给人以冷淡、清爽的感觉。此外,低纯度的青绿色,除了给人以非自然的感觉之外,还有后退的作用。尤其在表现远处的事物或背景的时候,可以使用到它。

详细解析平面作品色彩系列之绿色篇

三、绿色系的配色实例

由于绿色有作为主色的特质和丰富的颜色感觉,所以即便没有点睛色,也能独自撑起画面,是一种万能的主色。如果需要增加一种点睛色,选择绿色系中的一种也可以实现多样化的配色,这是绿色的长处。绿色和其他色彩不同,比例增加的话,容易使画面变得单调,而且不会根据色彩种类的增加而减弱自身的存在感。

首先绿色搭配黑白灰,毫无异议的显得干净利落。

详细解析平面作品色彩系列之绿色篇

上图中的绿色作为点睛色,平衡了黑白的单调,而这里的白色和绿色都趋向于轻薄,因此需要用深黑,以加强色彩的力量感。

详细解析平面作品色彩系列之绿色篇

绿色与红色、橙色与黄色等暖色的搭配时,重要的是要强调两者之中的一个。比如,在上图中的主色为绿色,点睛色就为红色和黄色,其中红色的颜色较深,突出强调图案中的人物形象,而其他的色彩就退而次之,绿色的饱和度较低且偏黄,与黄色相得益彰地变为了背景,辅助突出了点睛色。

绿色是一种非常抢眼的颜色,因此一旦绿色与其他色彩发生了冲突,我们就要着手调整。

详细解析平面作品色彩系列之绿色篇

很多人觉得绿色和红色不能搭配,否则会发生撞色。的确这不是容易搭配好的颜色,但是不代表它们完全不能搭配。在搭配的方式上可以参考上图,一个作为主色,一个作为点睛色。其中绿色是往蓝色靠拢的绿色,避免100%的绿。且红色的饱和度并不高。这样就减少了冲突却保留了两种色系在视觉上的对比,让画面显得更为活泼。

详细解析平面作品色彩系列之绿色篇

绿色与蓝或紫这类冷色调搭配时,很多人觉得比较棘手的地方是显得有点太过黯淡。这时,不妨可以考虑增加绿色的温暖感,使用偏黄的绿色,同时增加绿色的亮度,让画面有亮色的部分。或者增加另一种颜色的亮度。

详细解析平面作品色彩系列之绿色篇

其实两种比较亮的颜色相配是非常容易的,由于色彩的感觉不强,就显得比较融洽,但这样的坏处就是会让画面冲击力不够,不易给人留下印象。解决这一问题需要增加另一种颜色,这种颜色中的其中一种的色重,最好的办法就像上例中增加紫色渐变,这样就出现了较为深一点的紫色。这时紫色与绿色略有冲突,对比的效果深刻。而黄色的出现也增加了色彩中的温暖感,实现了色彩的色温的平衡。

详细解析平面作品色彩系列之绿色篇

绿色与橙色的搭配,在我看来并没有蓝色与橙色搭配那么协调。由于绿色和橙色在色环上表现为邻近色,邻近色之间的色彩感觉应该类似,然而绿色却是有着丰富的色彩表现力,而又相对比较抢眼,因此很容易把画面变得比较“闹腾”,最终既没有强烈的对比感,也没有完全的和谐感受。这时,如果一定要用到这样的一组搭配,不如选择偏蓝色的绿色,这时的绿色看上去偏冷感,和橙色拉开了距离,增加了画面的活跃感。而运用较亮且没那么高的饱和度的色彩,则会让画面趋向柔和。

后记

其实为什么搭配不好绿色,还是在于我们一开始选择绿色时就不自主地选择了原色。只要避开了原色,几乎任何一种色彩都能与绿色搭配,适当的调整绿色的比例,,增加亮度或者偏蓝或者偏黄都有可能搭配出赏心悦目的画面。

 收藏