千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:首页  >  技术文章  >  正文

设计中的色彩搭配

时间:2018-12-20 17:06     来源:千锋教育 作者:UI老师

  一、色彩的来源

  作为设计师,不仅要知道熟悉色彩的运用,也应该知道大自然中色彩的来源。色彩的产生,是由于光线照射到物体上之后,会被吸收、反射或透射出来,也就是说物体表现了什么颜色也就是反射了什么颜色的光。

  那么,这些反射的光是哪儿来的呢?当然是来自于太阳的光线。

  但是,阳光中除了给我们颜色之外,还给了我们什么东西?如图:

1

      二、色彩的分类

  丰富多样的颜色可以分成两个大类无彩色系和有彩色系,有彩色系的颜色具有三个基本特性:色相、纯度、明度。在色彩学上也称为色彩的三大要素或色彩的三属性。

2

 

色相是有彩色的大特征即色彩的相貌,比如红、黄、蓝等颜色。

3

指色彩的纯净程度,它表示颜色中所含有色成分的比例。同一种颜色含有灰色的成分越多,纯度越低,也就是我们常说的“脏”。

4

明度是指色彩的明亮程度。各种有色物体由于它们的反射光量的区别而产生颜色的明暗强弱。

  有彩色的色相、纯度和明度三要素是不可分割的,应用时必须同时考虑这三个因素。

  三、色彩的视觉特性

  1冷暖色

5

  色彩本身并没有冷暖的温度差别,之所有有冷暖色的差别是因为人们的心理联想。

  比如说看到红色就联想到太阳、火焰、热血等,久而久之,就会产生温暖、热烈、危险的心理联想。同样,看到蓝色,人们就会联想到太空、冰雪、海洋等,此时则容易产生寒冷、理智、平静的感觉。

  冷暖主要与色相有关,据科学研究,冷色与暖色的心理温差大概是3℃。

  2 膨胀、收缩色

6

  注意看上图中的两个小点,白色的小点看起来会比黑色的小点面积大一些,而实际上它们是一样大小的,这就是色彩的膨胀和收缩特性。

  膨胀和收缩特性与色彩的明度和色温都有关,明度高、暖色,有膨胀、扩大感,反之明度低、冷色则显小。

  3 前进、后退色

7

  由各种不同波长的色彩在人眼视网膜上的成像有前后,红、橙等光波长的色在后面成像,感觉比较迫近,蓝、紫等光波短的色则在外侧成像,在同样距离内感觉就比较后退。这就使得色彩具有前进、后退的特性。

  暖色、高明度的颜色,有前进的感觉,看起来离我们近。相反,冷色、低明度的颜色,则有后退的感觉。

  4 软、硬色

8

  色彩的软硬度主要来自明度的变化,明度越高的感受越软,明度越低感觉越硬。

  当然这跟物体的造型也很有关系,一般来说,圆滑的造型+高明度的色彩,在观感上会软,在心理感受上会给人亲近感。

  反之,尖锐的造型+低明度的色彩,会显得很硬。会给人威严、力量感。

  5 兴奋、沉静色

9

  色彩给人的兴奋度主要由色相决定,红橙黄等鲜艳而明亮的暖色给人兴奋感。而蓝、绿、紫等色使人感到沉着、平静。

  纯度对色彩的兴奋感也有一定影响,高纯度色让人兴奋,低纯度色使人沉静。

  6 活泼、庄重色

10

 

  色彩的活泼与否,主要是由色彩的丰富度有关。

  暖色、高纯度色、丰富多彩色、强对比色,这些会给人跳跃、活泼、有朝气的感觉。

  反之,冷色、低明度低纯度的颜色,则给人庄重、严肃的感觉。

  实际上这是一种色彩搭配方式,并不是单一的色彩能形成的感受。

  7 华丽、朴素色

11

  色彩的三要素对华丽及质朴感都有影响,其中纯度关系大。

  明度高、纯度高的色彩,丰富、强对比 色彩感觉华丽、辉煌。

  明度低、纯度低的色彩,单纯、弱对比的色彩感觉质朴、古雅。

  但无论何种色彩,如果带上光泽,都能获得华丽的效果。

  四、色彩属性坐标

  上面讲了很多色彩给人的心理感受,我们可以发现,其实有些特性是重合的,比如说膨胀色和前进色,他们在某种程度上是相似的。

  色彩有这么多特性,要怎么才能记住并在工作中应用呢?

  下面给的大家展示了一个色彩属性的座标分布图,只要找到相应的情绪关键词,你大概就能知道对应的是什么颜色了。

12

13

  五、配色原则

  讲完了色彩的心理感受,我们再来说说配色时需要遵守的基本原则。

  大原则——主色要突出。

  要一眼能看出来整个画面是什么色调的。

14

  第二大原则——画面色彩不超过3种。

  这里的3种色彩是指3种色相,比如浅蓝与深蓝其实算一种颜色。另外黑白一般不包括在内。

  3种色彩一般被划分为主色、辅色、点缀色,这样可以让你比较容易的控制画面整体的色彩。

15

  第三大原则——大协调,小冲突。

  画面的整体色彩要看起来协调,但是在局部可以有强烈的对比色,这样可以提升视觉层次感。

16

  除以上的三大原则外,还有日本设计师很早就总结出来的配色黄金比例。 一般来说,颜色越少画面就越简洁,作品也会显得越成熟。同时,颜色少还有助于我们控制画面,不至于玩脱。

17

  六、常用配色方法

  在知道了大概的配色原则之后,我们再来看,几类颜色具体要怎么搭配。

  同类色

  简单来说就是相似色配色,色彩的选择限制在色环中30°之间的色相。这是一种不容易出错的配色方式。

  同类色对比很弱,容易产生统一、含蓄、稳重的效果,但是也会比较单调,呆板。

18

18

  配色关键词:和谐、统一

  邻近色

  相比同类色来说,邻近色的色相之间被拉开了不少,相比同类色丰富、活泼,视觉层次感强,但同时又不失和谐与稳健。

19

  配色关键词:调和、稳健

  对比色

  一般整个设计亮点的地方,往往就是对比强烈的地方。因此,我们做设计的时候要时刻记得,重要的信息要用对比来强化。

  颜色的对比不只是色相对比,明度和纯度的对比也很重要。

20

  配色关键词:华丽、强烈

  互补色

  互补色是色环上正对面的两组色,它是冲突强烈的一组色彩。比如红与绿、黄与紫等。效果强烈、眩目、响亮、极有力,但若处理不当,易产生幼稚、原始、粗俗、不安定、不协调等不良感觉。

21

  配色关键词:冲突、对比

  四角色

  四角色就是全色系,它分别分布在色环对等的四个角,是色相丰富的一组色彩。

  这种配色方式是难驾驭的,虽然是多彩色,但是一般还是得以其中一种为主色彩,再添加适当比例的其它几种颜色。

  许多业务线比较丰富的平台公司喜欢用四角色来做LOGO,因为多色具有非常好的延展性,每项子业务都可以有专属的某种色彩作为品牌色,与其它业务差异化。

22

相关文章

  • 北京总部地址:北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 深圳校区地址:深圳市宝安区宝安大道5010号西部硅谷B座A区6层A605/B座C区1层108
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 广州校区地址:广州市白云区永平街永泰学山塘学山文化创意谷A1栋六楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 郑州二七区校区地址:郑州市二七区航海中路60号海为科技园C区10层
    郑州高新区校区地址:郑州市高新区金梭路与银杏路交叉口教育科技产业园南门D座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 武汉金融港校区地址:武汉市东新区光谷大道77号金融港B18栋三楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 成都校区地址:成都市高新区肖家河沿街138号肖家河大厦三楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 青岛校区地址:青岛市市北区龙城路31号卓越世纪中心4号楼5层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 重庆校区地址:重庆市九龙坡区科园一路3号渝高大厦9楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 哈尔滨校区地址:哈尔滨市松北区世泽路689号 科技创新城4号楼1101
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 南京校区地址:南京市建邺区应天大街780号弘辉产业园1栋2层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 沈阳校区地址:辽宁省沈阳市浑南区世纪路16号东大软件园B园B1座A201
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 合肥校区地址:合肥市包河区徽州大道396号东方广场B座12A
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、、PMP认证、红帽RHCE认证
  • 千锋教育服务号

    关注千锋学习站小程序
    随时随地免费学习课程

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱