深入浅出学配色！带你重新全面认识色彩系列之绿色篇

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

2016年流行色：《2016流行色彩！如何在设计中运用潘通年度代表色？（附优秀案例）》

1. 红色篇：《设计师的读书笔记！带你重新全面认识色彩系列之红色篇》
2. 橙色篇：《深入浅出学配色！带你重新全面认识色彩系列之橙色篇》
3. 黄色篇：《深入浅出学配色！带你重新全面认识色彩系列之黄色篇》

前言：

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

一、绿色的名称和词源

绿色作为大自然的主旋律，能带给人安宁舒适、生机勃勃的感觉。研究也表明，绿色有助于恢复视力、缓解紧张，对某些疾病的治疗也有辅助作用。然而，我们仔细观察就会发现，尽管生活中对于绿色的配色可谓“烂大街”，设计师们却都小心翼翼地绕过了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%的绿。且红色的饱和度并不高。这样就减少了冲突却保留了两种色系在视觉上的对比，让画面显得更为活泼。

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

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

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

后记

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

【新手即学即用系列】

1. 《有哪些看上去很高大上，但实际很简单的PS技巧？》
2. 《有哪些看上去很高大上，但实际很简单的PS技巧？（入门篇）》
3. 《有哪些看上去很高大上，但实际很简单的PS技巧？（酷炫火焰篇）》
4. 《有哪些看上去很高大上，但实际很简单的PS技巧？（人像篇）》
5. 《有哪些看上去很高大上，但实际很简单的PS技巧？（渐变色篇）》
6. 《有哪些看上去很高大上，但实际很简单的PS技巧？（二次元篇）》

原文地址：ifeiwu

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量104万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com