超多案例!零基础学配色系列之黄色+绿色篇 - 优设网 - UISDC

超多案例!零基础学配色系列之黄色+绿色篇

2016/12/30 22966评论区

comprehensive-understanding-yellow-green-1

@飞屋睿UIdesign :人气超高的从零开始学配色教程出进阶版咯。进阶版不仅增加了更多案例,而且案例的配色也越来越丰富,特别全面的系列教程,建议收藏。

往期回顾:

  1. 《带你重新全面认识色彩系列之橙色进阶篇》
  2. 《超多案例!零基础学配色系列之红色+蓝色篇》

黄色

黄色是光之色彩,因此,在整个色谱上,它是最亮的存在。当你想要提亮整个画面,黄色是不二之选。黄色同时也是一种暖色,可以表达出一种温暖欢快的感觉,它是黯淡颜色的救世主,明亮的黄色一旦出现,必然赋予了画面更多的活力。而我们对黄色的运用也必然需要进入其情感空间,才能更好掌握各种色调的黄色所赋予的不同魅力。

不同的黄色调表达了不同的情感基调,明度和饱和度都较低的黄色隐隐透出了绿色,因此,当你想要降低黄色的温度,不妨考虑降低它的明度或饱和度

uisdc-webcolor-20161229-0

在网页中所使用的黄色,以明度较高为多。大多是在表达可爱、温暖、欢快、活泼。大面积运用明亮的黄色,可以让整个页面充满活力。由于黄色并不如红色那么抢眼,但也足以夺人眼球,因此,增加页面的吸引力,从某种程度上说,黄色是优于红色的。

黄色的页面给人以一种明亮、积极向上的活力,高明度、高饱和度的黄色作为背景色,以黑色作为搭配,刚好降低黄色的亮度和温度,让整个画面光明和黑暗兼有,非常具有跃动感。

uisdc-webcolor-20161229-1

uisdc-webcolor-20161229-2

uisdc-webcolor-20161229-3

uisdc-webcolor-20161229-4

可见黄色作为光之色彩,想要平衡其强烈的光感,就要增加黑暗,比如纯黑作为极好的搭配。这种强烈的对比,碰撞出了巨大的活力。很多创意机构的网页都喜欢这一配色,也是希望能传达出这一信息。

黄色和白色等其他无彩色搭配都非常相得益彰,尤其当它作为背景色时,会让出现在这背景上的任何物体都显得更加光亮。

uisdc-webcolor-20161229-5

uisdc-webcolor-20161229-6

黄色除了作为大面积背景使用,也可以作为强调色,在画面比较暗的场景里运用黄色作为强调色,就会增加整个画面的亮度,让作品活跃起来。

如下页面中,整个风景图作为背景,天色显得有点暗,这时在其上方增加黄色的文字就改变了整个背景的平淡无奇。 当明亮的黄色作为主色使用时,它其实也起到了强调的作用,这时无论背景是黑色亦或白色,它都能轻而易举的凸显出来。

uisdc-webcolor-20161229-7

将黄色作为主色,让画面更加鲜明活泼。

uisdc-webcolor-20161229-8

黄色常见的搭档是蓝色,黄色的温暖和蓝色的凉意,黄色的欢快与蓝色的忧郁,在色轮上看它们彼此是相隔120度的对比色,因此能相互烘托对方的特色。

用黄色作为背景,也可以用蓝色作为主色,搭配起来相得益彰,只是活力并不如黑色搭配来得多,而也适合用在相对需要冷静的场合

uisdc-webcolor-20161229-9

uisdc-webcolor-20161229-10

黄色与蓝色在比例上持平,也不会让画面显得冲突。

uisdc-webcolor-20161229-11

黄色可以与任何颜色搭配,而每种颜色都需要与黄色调整好彼此的比例,保持调性的和谐。

黄色和绿色是邻近色,因此在运用配色时,降低其明度,就能让画面显得更为“柔和”,整个画面显出古典的意味,低明度的黄色是具有怀旧色彩的,因此在怀旧这一主题中常常用到。

uisdc-webcolor-20161229-12

黄色可以很张扬,也可以比较低调。低明度低饱和度的黄色是最接近自然的原色。由于它的存在感比较弱,可以作为阅读的背景,而又比白色多了几分阳光的味道。

柔和低调的黄色作为背景,类似纸的颜色,在此基础上,选用金色作为主色,让配色显得温暖又华丽。

uisdc-webcolor-20161229-13

后记

可以看到黄色作为背景色出现的时候居多,它应该是一个能承载一切的颜色,它的功能有点像阳光。有黄色在的地方,就象征着温暖。

绿色

绿色所表现的最大特质就是绿色植物,因此它会让人联想到森林或草原。绿色本身是一种中性色,也就是它可暖可寒。夹杂黄色的绿色就会具有暖意,而夹杂蓝色的绿色则带着寒冷。前者会联系到阳光下的嫩芽,而后者会浮现出湖水的画面。

某些时候,绿色象征着和平,带来宁静温馨,而又有一些时候绿色则象征妒嫉、邪恶等紧张,总之,绿色的色调宽泛到几乎任何行业都可以运用到它。宽泛的绿色色调充满了非常广阔的情感空间。

uisdc-webcolor-20161229-14

绿色属于大自然色系,在大自然的色彩中,最饱和的绿色几乎是不多见的,因此中等以及中等以下饱和度的绿色相对较多,因此在运用时需注意这一点。

饱和度并不是越浓烈就越能凸显它的特质,往往过高的饱和度色彩会毁掉原本自然的一面而显得非自然。

利用青苹果本身的色彩作为大图背景就可以让绿色表现出其丰富而细腻的自然感觉。

uisdc-webcolor-20161229-15

茶文化为主题的网站也非常适宜绿色作为主色,配色时,为了表现一种古旧典雅,最好能压低绿色的明度。

uisdc-webcolor-20161229-16

绿色带来和平,同时也能给人以朝气蓬勃的感觉。它象征着一种生命力。这是其他任何色彩都不能比拟的。而单一的绿色近两年越来越少用到,而更多和蓝色或黄色等临近的色系搭配,让画面更加柔和丰富。

下面这两个页面都采用了绿色的渐变色系作为背景,表现出绿色更加自然的一面,让绿色不至于呆滞。

uisdc-webcolor-20161229-17

uisdc-webcolor-20161229-18

绿色和红色是一组对比色,对比色的搭配显得跳脱而活跃,应用得当时效果相当出彩。

下面这个页面带着蓝色调、高饱和度高明度的活泼的青绿色,与荧光粉红搭配显得分外明朗,时尚感满溢。

uisdc-webcolor-20161229-19

柔和的绿色搭配粉色尽显甜美温馨,尽管是对比色,保持了丰富的色彩层次。

uisdc-webcolor-20161229-20

 

uisdc-webcolor-20161229-21

低明度的绿色带着冷感,色相上稍微增加点黄,最终表现为豆绿色,颇有自然风的感觉,而配图的选择也应该尽量增加色温,让整个画面暖和起来。而饱和度、明度略低的绿色,则拥有一袭复古气质。这样的配色显得非常别致。

uisdc-webcolor-20161229-22

uisdc-webcolor-20161229-23

uisdc-webcolor-20161229-24

后记

绿色搭配的重点在于找准其自然的属性,大自然是最好的调色师,当你学会了自然的一招半点,灵感的小宇宙都会不期而遇来个小爆发。

2016年流行色:《2016流行色彩!如何在设计中运用潘通年度代表色?(附优秀案例)》

「色彩科普系列教程」

  1. 红色篇:《设计师的读书笔记!带你重新全面认识色彩系列之红色篇》
  2. 橙色篇:《深入浅出学配色!带你重新全面认识色彩系列之橙色篇》
  3. 黄色篇:《深入浅出学配色!带你重新全面认识色彩系列之黄色篇》
  4. 绿色篇:《深入浅出学配色!带你重新全面认识色彩系列之绿色篇》
  5. 蓝色篇:《深入浅出学配色!带你重新全面认识色彩系列之蓝色篇》
  6. 紫色篇:《深入浅出学配色!带你重新全面认识色彩系列之紫色篇》

原文地址:ifeiwu

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/comprehensive-understanding-yellow-green

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里