收藏 分享(赏)

精彩实例全面剖析配色基本概念.doc

上传人:scg750829 文档编号:7870711 上传时间:2019-05-28 格式:DOC 页数:13 大小:915.50KB
下载 相关 举报
精彩实例全面剖析配色基本概念.doc_第1页
第1页 / 共13页
精彩实例全面剖析配色基本概念.doc_第2页
第2页 / 共13页
精彩实例全面剖析配色基本概念.doc_第3页
第3页 / 共13页
精彩实例全面剖析配色基本概念.doc_第4页
第4页 / 共13页
精彩实例全面剖析配色基本概念.doc_第5页
第5页 / 共13页
点击查看更多>>
资源描述

1、精彩实例全面剖析配色基本概念设计理论 RSSurl:/Design-Theory/8366.html source:在实用美术中,常有“远看色彩近看花,先看颜色后看花,七分颜色三分花“ 的说法。这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。前面我们介绍了常用的电脑色彩模式 RGB、HSB,以及色彩的三大属性,今天我们用几个精彩实例介绍全面剖析配色基本概念。 色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色,就可以得到一个色彩环。色环通常包括 12 种不同的颜色。三原色 原色:也叫“三原色 “。即红、

2、黄、蓝三种基本颜色。自然界中的色彩种类繁多,变化丰富,但这三种颜色却是最基本的原色,原色是其他颜色调配不出来的。除白色外,把三原色相互混合,可以调和出其他种颜色。根据三原色的特性做出相应的色彩搭配,有最迅速最有力最强烈的传达视觉信息效果。 黄色网页例图:http:/www.uni-leipzig.de/studienart/i_flash.htm黄色分析:选取了主色调黄色为示例。我们看到 RGB 数值中 RG 呈现最高值 255 时,HSB 数值中的 SB 也呈现最高值 100%,页面呈现最高纯度亮度纯黄色。因此黄色在三原色中也是亮度最高的颜色。结论:HSB 中 SB 呈现的数值越高,饱和度明

3、度越高,页面色彩强烈艳丽,由于黄色是亮度最高的颜色这一特性,也给人视觉产生强烈刺激的状态,对视觉刺激是迅速的、警戒、醒目的效果,但不易于长时间观看。 红色网页例图:http:/红色分析:我们看到 RGB 中 R 的数值是 227,混合了 G30、B40,因此红色的纯度轻微降低,颜色稍偏深红。HSB 数值中 S 显示的饱和度为 87%,B 为 89%,因此颜色还是较为饱和明亮。结论:主色 R227 数值较高的时候,由于混合了 G30、B40 少许颜色,饱和度明度稍微降低,视觉刺激减弱,红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性,该网页整体看来仍然厚重而热烈的表达了主题。 蓝色

4、网页例图:http:/蓝色分析:RGB 数值中 B 蓝色的数值是 131 与 R2、G83 相混合,蓝色的纯度降低。结合 HSB 中数值 H 色相目前显示的是 203,而三原色的纯蓝为 240来看,蓝色的色相偏离较大,加上 B 为 51%的明度,颜色偏暗,因此视觉冲击力较弱。页面沉稳、凝重。结论:当蓝色色相偏离于三原色的纯蓝时,视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性,适合用于表达成熟、稳重、安静的网页设计主题。蓝色在网页设计里也是使用得较频繁的颜色。间色 间色:又叫“二次色“ 。它是由三原色调配出来的颜色,是由 2 种原色调配出来的。红与黄调配出橙色

5、;黄与蓝调配出绿色;红与蓝调配出紫色,橙、绿、紫三种颜色又叫“三间色“。在调配时,由于原色在份量多少上有所不同,所以能产生丰富的间色变化。 间色网页例图:http:/cidadefm.clix.pt间色分析:上网页例图 4 种间色搭配一起非常明快、鲜亮。从 RGB 数值显示上看,绿色含量较高达到 208,混合了 R189 的黄色光,因此颜色偏黄绿色,由于添加了 B18,饱和度相对降低。玫瑰色中 R 的含量最高,与 B109 混合为主要组成色,添加了少量的 G27 黄,纯度偏高。橙色中 R 的含量很高为 255,混合了 G145 黄为主要组成色,添加了第三色 B34,饱和度稍降低。紫色是由蓝色和

6、红色调配而成,B 为 170,R 为 148,混色份量相当也就成为了组合紫色这一间色的主要成份,但是由于添加了 G87,也是 4 组颜色中的间色混合第三色数值最高的,HSB 中 S 数值相对其他三色,降低很多,因此颜色相对于其它 3 种较沉稳,缓和。以上 4 组颜色 RGB 数值的共同点是以两色混合为主,都是三位数值,另外一色份量较少,为两为数值,因此饱和度较高,色相倾向明显。HSB 数值的共同点是,除了紫色,其他三色的 S 饱和度相当,属较高数值,因此视觉刺激也强。结论:间色是由三原色中的两原色调配而成的,因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。间色尽管是二次色,但仍有

7、很强的视觉冲击力,容易带来轻松、明快、愉悦的气氛。复色 复色:也叫“复合色“ 。复色是由原色与间色相调或由间色与间色相调而成的“三次色“,复色是的纯度最低,含灰色成份。复色包括了除原色和间色以外的所有颜色。 复色网页例图:http:/复色分析:以上 4 种颜色中深绿色和赭石色为复色,之所以还选择其它 2 颜色,为的是更好的配合说明复色的特性,如果没有另外两种非复色搭配,页面配色就可能出现肮等不舒服的感觉。我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数,另外两者成份相当,都为两位数组合而得。RGB 之间的数值差距较接近、不明显,色阶较趋于直线平稳,呈灰阶。HSB 中 SB 显示的数值

8、也非常接近,成为符合复色特性的必须条件。结论:复色是由两种间色或原色与间色混合而成,因此色相倾向较微妙、不明显,视觉刺激度缓和,如果搭配不当,页面便呈现易脏或易灰朦朦的效果,沉闷、压抑之感,属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感;明度高的多复色(参看明度的网页例图)多用来表示宁静柔和、细腻的情感,易于长时间的浏览。补色 补色:是广义上的对比色。在色环上划直径,正好相对(即距离最远)的两种色彩互为补色。如:红色是绿色的补色;橙色是蓝色的补色;黄色是紫色的补色。补色的运用可以造成最强烈的对比。 补色网页例图:http:/www.upsod.org补色分析:选用了一组

9、红绿对比色,极赋视觉冲击力、所表现出的性格异常鲜明。我们看到 RGB 中绿色的数值显示情况符合复色的条件,因此注定了该颜色明度稍暗、纯度较低的特性,而红色 R 数值 118 构成了该色的主要成份,其他G72,B61 数值接近,纯度和亮度相对绿色较高,因此 2 色在构成色彩空间差距上拉大。HSB 中 2 色的 S 数值也显示出,它们的饱和度相差较大。结论:补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用,对比并突出了前景纯度明度较高的面积较小红色的图形,形成了视觉中心重点突出,达到主次分明的主题效果。红绿、橙蓝、黄紫这三组补色中,前两种使用得最频繁。这三组补色搭配出的最终效果和目的

10、,可以用两个字来概括强烈! 邻近色:是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系,只是范围缩小了一点。例如红色和黄色,绿邻近色 色和蓝色,互为邻近色。 邻近色网页例图:http:/邻近色分析:上图选用了红色、黄色为邻近色示例,主要在色相上做区别丰富了页面色彩上的变化。RGB 数值上看,以上 5 色 R 的数值都很高,仅是微妙的不同。其中浅黄色的 B 为 138,因此在HSB 数值中纯度 S 显示最低,为 46%;5 色 RGB 中 G 的数值都不同,色相、明度也产生相应的不同。从数值上分析整体看来,5 色都有在同一频率的变化。结论:由于是相邻色系,视觉反差不大,统一、调和,形成协调的视

11、觉韵律美,相较显得安定、稳重的同时不失活力,是一种恰到好处的配色类型。 同类色:比邻近色更加接近的颜色,它主要指在同一色相中不同的颜色变化。例如,红颜色中有紫红、深红、玫瑰同类色 红、大红、朱红、桔红等等种类,黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一,又有微妙变化的作用。 同类色网页例图:http:/同类色分析:选用红色系 4 种同类色示例,主要在明度上做区别变化。由于是红色系,4 色 RGB 数值中的 R,数值都很高,且相当。从 HSB 数值看出,明度越高的颜色饱和度越低。这 4 种同类色相来看,明度在强中弱的节奏中的缓和的进行变化。结论:第一眼看上去给人

12、温柔、雅致、安宁的心理感受,便可知该组同类色系非常调和统一。只运用同类色系配色,是十分谨慎稳妥的做法,但是有时会有单调感。添加少许相邻或对比色系,可以体现出页面的活跃感和强度。暖色 暖色:指的是红、橙、黄、这类颜色。暖色系的饱和度越高,其温暖特性越明显。可以刺激人的兴奋性,使体温有所升高。 暖色网页例图:http:/www.mrwong.de暖色分析:由于是暖色系,以上 3 种颜色 RGB 数值中 R 的含量为主导,B 都为 0,暖度强度倾向在 G 的添加黄色成份变化中可以看到,较规律的数值变化、较有视觉节奏感。HSB 中纯度 S 和明度 B 都达到最高值,是鲜艳夺目的搭配色组合。结论:高明度

13、高纯度的色彩搭配,把页面表达得鲜艳炫目,有非常强烈刺激的视觉表现力。充分体现了暖色系的饱和度越高,其温暖特性越明显的性格。冷色 冷色:指的是绿、青、蓝、紫等颜色,冷色系亮度越高,其特性越明显。能够使人的心情平静,清爽,恬雅。 冷色网页例图:http:/www.portaldemoda.pt冷色分析:该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中 3 种蓝色系的 RGB 数值从二位数到三位数,随着明度的递增的同时,由低到高在有规律有节奏的变化。HSB 的数值 SB 也相对随着同比变化,纯度 S 的含量都不大,因此这几组色彩相对含蓄柔和。绿色系 RGB 数值 G 的色相明显,相应添加

14、了高亮度的黄色 R,使色彩较鲜艳明快。HSB 数值SB 也显示出其高纯度高亮度的特性。结论:冷色系的亮度越高,其特性越明显。单纯冷色系搭配视觉感比暖色系舒适,不易造成视觉疲劳。蓝色、绿色是冷色系的主要系,是设计中较常用的颜色,也是大自然之色,带来一股清新、祥和安宁的空气。本部分小结: 从以上例子可看出三原色视觉冲击力最强,也最是刺目的,容易制造冲突、烦燥、不舒适的心情,所以是较难掌握的配色,大面积大范围使用要慎重。间色是由三原色中的两色调配二次,间于原色和复色之间,属于中性色,视觉冲击力次之,颜色的刺激缓和不少,给人舒适、愉悦的心情,是较容易掌握的配色,也是在设计中使用得比较多的颜色。复色是由

15、两种间色或原色与间色相混合而产生的颜色,呈灰色阶,视觉冲击力更弱,柔和但是使人沉闷压抑。复色调配好了,能体现出高层次高素养的成熟特性魅力,也称为高级灰,是很经看的颜色。由上可知,颜色相互混合的越多,饱和度越低,视觉冲击力越弱。 色彩运用到一定程度后,应该逐渐认识到在一个环境、区域范围里,色彩的属性、性能特性是相对的。例如黄色在蓝色、绿色这两个区域环境下,黄色可以说这个时候是呈暖色,而出现在桔红、朱红、深红这几个区域环境下,黄色可以说在这个时候是呈冷色。同样的,蓝色相对绿色是冷色,紫色相对蓝色是暖色等等。可根据网页设计主题的目的要求,环境协调度的需要等等做相应的搭配调整。 RGB 三者的数值越接近,色阶较趋于直线平稳,呈灰阶,网页对视觉的刺激性越缓慢、柔和;RGB 三者的数值相互间差距越大,色阶曲线波动就大,网页对视觉的刺激性越迅速、强烈。HSB 数值中 SB 相应数值越高,视觉刺激度越强烈。抓住以上这些规律及色彩特性,在以后的网页设计配色中,根据不同的需要配置不同的颜色,来达到某些不同的目的和效果。通过 RGB 数值和 HSB 数值的计算,能帮助更科学理性的分析判断,为的是更准确的研究分析网页设计配色的协调性、合理性、掌握其规律性。有经验的设计师通常仅仅凭目测、直觉,就能随心所欲的掌控色彩的配置了。但如遇到困惑,不防也使用一下模式计算法。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 企业管理 > 管理学资料

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报