注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

 
 
 

日志

 
 

常用配色基本概念及精彩相关实例剖析  

2009-06-06 14:29:21|  分类: 〖P--S教程〗 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
作者: redfall
 
在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法。

  这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。

  前面我们介绍了常用的电脑色彩模式RGB、HSB,以及色彩的三大属性,今天我们介绍常用配色的基本概念和相关实例剖析
 
色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色,就可以得到一个色彩环。色环通常包括12种不同的颜色。
ps教程总汇[与爱好者共享] - 迎春 -  
 
■ 原色:
  也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多,变化丰富,但这三种颜色却是最基本的原色,原色是其他颜色调配不出来的。除白色外,把三原色相互混合,可以调和出其他种颜色。
  根据三原色的特性做出相应的色彩搭配,有最迅速最有力最强烈的传达视觉信息效果。
ps教程总汇[与爱好者共享] - 迎春 -
 
ps教程总汇[与爱好者共享] - 迎春 -
 
黄色分析:
  选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值255时,HSB数值中的SB也呈现最高值100%,页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。
  结论:
  HSB中SB呈现的数值越高,饱和度明度越高,页面色彩强烈艳丽,由于黄色是亮度最高的颜色这一特性,也给人视觉产生强烈刺激的状态,对视觉刺激是迅速的、警戒、醒目的效果,但不易于长时间观看。


→ 红色网页例图:http://www.doritos.com
ps教程总汇[与爱好者共享] - 迎春 -
 
红色分析:
  我们看到RGB中R的数值是227,混合了G30、B40,因此红色的纯度轻微降低,颜色稍偏深红。HSB数值中S显示的饱和度为87%,B为89%,因此颜色还是较为饱和明亮。
  结论:
  主色R227数值较高的时候,由于混合了G30、B40少许颜色,饱和度明度稍微降低,视觉刺激减弱,红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性,该网页整体看来仍然厚重而热烈的表达了主题。
→ 蓝色网页例图:http://www.voxhon.com
ps教程总汇[与爱好者共享] - 迎春 -
 
蓝色分析:
  RGB数值中B蓝色的数值是131与R2、G83相混合,蓝色的纯度降低。结合HSB中数值H色相目前显示的是203°,而三原色的纯蓝为240°来看,蓝色的色相偏离较大,加上B为51%的明度,颜色偏暗,因此视觉冲击力较弱。页面沉稳、凝重。
结论:
  当蓝色色相偏离于三原色的纯蓝时,视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性,适合用于表达成熟、稳重、安静的网页设计主题。蓝色在网页设计里也是使用得较频繁的颜色。
 
■ 间色:
  又叫"二次色"。它是由三原色调配出来的颜色,是由2种原色调配出来的。红与黄调配出橙色;黄与蓝调配出绿色;红与蓝调配出紫色,橙、绿、紫三种颜色又叫"三间色"。在调配时,由于原色在份量多少上有所不同,所以能产生丰富的间色变化。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 间色网页例图:http://cidadefm.clix.pt
ps教程总汇[与爱好者共享] - 迎春 -
 
间色分析:
  上网页例图4种间色搭配一起非常明快、鲜亮。
  从RGB数值显示上看,绿色含量较高达到208,混合了R189的黄色光,因此颜色偏黄绿色,由于添加了B18,饱和度相对降低。玫瑰色中R的含量最高,与B109混合为主要组成色,添加了少量的G27黄,纯度偏高。橙色中R的含量很高为255,混合了G145黄为主要组成色,添加了第三色B34,饱和度稍降低。紫色是由蓝色和红色调配而成,B为170,R为148,混色份量相当也就成为了组合紫色这一间色的主要成份,但是由于添加了G87,也是4组颜色中的间色混合第三色数值最高的,HSB中S数值相对其他三色,降低很多,因此颜色相对于其它3种较沉稳,缓和。
  以上4组颜色RGB数值的共同点是以两色混合为主,都是三位数值,另外一色份量较少,为两为数值,因此饱和度较高,色相倾向明显。HSB数值的共同点是,除了紫色,其他三色的S饱和度相当,属较高数值,因此视觉刺激也强。
结论:
  间色是由三原色中的两原色调配而成的,因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。
  间色尽管是二次色,但仍有很强的视觉冲击力,容易带来轻松、明快、愉悦的气氛。
 
■ 复色:
  也叫"复合色"。复色是由原色与间色相调或由间色与间色相调而成的"三次色",复色是的纯度最低,含灰色成份。复色包括了除原色和间色以外的所有颜色。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 复色网页例图:http://www.benharper.net
ps教程总汇[与爱好者共享] - 迎春 -
 
复色分析:
  以上4种颜色中深绿色和赭石色为复色,之所以还选择其它2颜色,为的是更好的配合说明复色的特性,如果没有另外两种非复色搭配,页面配色就可能出现肮等不舒服的感觉。
  我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数,另外两者成份相当,都为两位数组合而得。RGB之间的数值差距较接近、不明显,色阶较趋于直线平稳,呈灰阶。HSB中SB显示的数值也非常接近,成为符合复色特性的必须条件。
结论:
  复色是由两种间色或原色与间色混合而成,因此色相倾向较微妙、不明显,视觉刺激度缓和,如果搭配不当,页面便呈现易脏或易灰朦朦的效果,沉闷、压抑之感,属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感;明度高的多复色(参看明度的网页例图)多用来表示宁静柔和、细腻的情感,易于长时间的浏览。
 
■ 补色:
  是广义上的对比色。在色环上划直径,正好相对(即距离最远)的两种色彩互为补色。如:红色是绿色的补色;橙色是蓝色的补色;黄色是紫色的补色。
  补色的运用可以造成最强烈的对比。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 补色网页例图:http://www.upsod.org
ps教程总汇[与爱好者共享] - 迎春 -
 
补色分析:
  选用了一组红绿对比色,极赋视觉冲击力、所表现出的性格异常鲜明。
  我们看到RGB中绿色的数值显示情况符合复色的条件,因此注定了该颜色明度稍暗、纯度较低的特性,而红色R数值118构成了该色的主要成份,其他G72,B61数值接近,纯度和亮度相对绿色较高,因此2色在构成色彩空间差距上拉大。HSB中2色的S数值也显示出,它们的饱和度相差较大。
  结论:
  补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用,对比并突出了前景纯度明度较高的面积较小红色的图形,形成了视觉中心重点突出,达到主次分明的主题效果。
  红绿、橙蓝、黄紫这三组补色中,前两种使用得最频繁。这三组补色搭配出的最终效果和目的,可以用两个字来概括——强烈!
■ 邻近色:
  是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系,只是范围缩小了一点。例如红色和黄色,绿色和蓝色,互为邻近色。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 邻近色网页例图:http://www.artoyz.com
ps教程总汇[与爱好者共享] - 迎春 -
 
邻近色分析:
  上图选用了红色、黄色为邻近色示例,主要在色相上做区别丰富了页面色彩上的变化。
  RGB数值上看,以上5色R的数值都很高,仅是微妙的不同。其中浅黄色的B为138,因此在HSB数值中纯度S显示最低,为46%;5色RGB中G的数值都不同,色相、明度也产生相应的不同。从数值上分析整体看来,5色都有在同一频率的变化。
结论:
  由于是相邻色系,视觉反差不大,统一、调和,形成协调的视觉韵律美,相较显得安定、稳重的同时不失活力,是一种恰到好处的配色类型。
 
■ 同类色:
  比邻近色更加接近的颜色,它主要指在同一色相中不同的颜色变化。例如,红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类,黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一,又有微妙变化的作用。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 同类色网页例图:http://www.misspato.com
ps教程总汇[与爱好者共享] - 迎春 -
 
同类色分析:
  选用红色系4种同类色示例,主要在明度上做区别变化。
由于是红色系,4色RGB数值中的R,数值都很高,且相当。从HSB数值看出,明度越高的颜色饱和度越低。
  这4种同类色相来看,明度在强中弱的节奏中的缓和的进行变化。
结论:
  第一眼看上去给人温柔、雅致、安宁的心理感受,便可知该组同类色系非常调和统一。只运用同类色系配色,是十分谨慎稳妥的做法,但是有时会有单调感。添加少许相邻或对比色系,可以体现出页面的活跃感和强度。
■ 暖色:
  指的是红、橙、黄、这类颜色。暖色系的饱和度越高,其温暖特性越明显。可以刺激人的兴奋性,使体温有所升高。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 暖色网页例图:http://www.mrwong.de
ps教程总汇[与爱好者共享] - 迎春 -
 
暖色分析:
  由于是暖色系,以上3种颜色RGB数值中R的含量为主导,B都为0,暖度强度倾向在G的添加黄色成份变化中可以看到,较规律的数值变化、较有视觉节奏感。HSB中纯度S和明度B都达到最高值,是鲜艳夺目的搭配色组合。
结论:
  高明度高纯度的色彩搭配,把页面表达得鲜艳炫目,有非常强烈刺激的视觉表现力。
充分体现了暖色系的饱和度越高,其温暖特性越明显的性格。
 
■ 冷色:
  指的是绿、青、蓝、紫等颜色,冷色系亮度越高,其特性越明显。能够使人的心情平静,清爽,恬雅。
ps教程总汇[与爱好者共享] - 迎春 -
 
→ 冷色网页例图:http://www.portaldemoda.pt
ps教程总汇[与爱好者共享] - 迎春 -
 
冷色分析:
  该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中3种蓝色系的RGB数值从二位数到三位数,随着明度的递增的同时,由低到高在有规律有节奏的变化。HSB的数值SB也相对随着同比变化,纯度S的含量都不大,因此这几组色彩相对含蓄柔和。
  绿色系RGB数值G的色相明显,相应添加了高亮度的黄色R,使色彩较鲜艳明快。HSB数值SB也显示出其高纯度高亮度的特性。
  结论:
  冷色系的亮度越高,其特性越明显。单纯冷色系搭配视觉感比暖色系舒适,不易造成视觉疲劳。蓝色、绿色是冷色系的主要系,是设计中较常用的颜色,也是大自然之色,带来一股清新、祥和安宁的空气。

  本部分小结:

  ●从以上例子可看出三原色视觉冲击力最强,也最是刺目的,容易制造冲突、烦燥、不舒适的心情,所以是较难掌握的配色,大面积大范围使用要慎重。间色是由三原色中的两色调配二次,间于原色和复色之间,属于中性色,视觉冲击力次之,颜色的刺激缓和不少,给人舒适、愉悦的心情,是较容易掌握的配色,也是在设计中使用得比较多的颜色。复色是由两种间色或原色与间色相混合而产生的颜色,呈灰色阶,视觉冲击力更弱,柔和但是使人沉闷压抑。复色调配好了,能体现出高层次高素养的成熟特性魅力,也称为高级灰,是很经看的颜色。
  由上可知,颜色相互混合的越多,饱和度越低,视觉冲击力越弱。

  ●色彩运用到一定程度后,应该逐渐认识到在一个环境、区域范围里,色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下,黄色可以说这个时候是呈暖色,而出现在桔红、朱红、深红这几个区域环境下,黄色可以说在这个时候是呈冷色。同样的,蓝色相对绿色是冷色,紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求,环境协调度的需要等等做相应的搭配调整。

  ●RGB三者的数值越接近,色阶较趋于直线平稳,呈灰阶,网页对视觉的刺激性越缓慢、柔和;RGB三者的数值相互间差距越大,色阶曲线波动就大,网页对视觉的刺激性越迅速、强烈。HSB数值中SB相应数值越高,视觉刺激度越强烈。抓住以上这些规律及色彩特性,在以后的网页设计配色中,根据不同的需要配置不同的颜色,来达到某些不同的目的和效果。
  通过RGB数值和HSB数值的计算,能帮助更科学理性的分析判断,为的是更准确的研究分析网页设计配色的协调性、合理性、掌握其规律性。
  有经验的设计师通常仅仅凭目测、直觉,就能随心所欲的掌控色彩的配置了。但如遇到困惑,不防也使用一下模式计算法。

  评论这张
 
阅读(835)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017