在实用美术中,常有"远看色彩近看花,先看颜色后看花,七分颜色三分花"的说法。
这也就说明,在任何设计中,色彩对视觉的刺激起到第一信息传达的作用。因此,对色彩的基础知识的良好掌控,在网页设计中才能做到游刃有余。 前面我们介绍了常用的电脑色彩模式RGB、HSB,以及色彩的三大属性,今天我们介绍常用配色的基本概念和相关实例剖析。
黄色分析:
选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值255时,HSB数值中的SB也呈现最高值100%,页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。 结论: HSB中SB呈现的数值越高,饱和度明度越高,页面色彩强烈艳丽,由于黄色是亮度最高的颜色这一特性,也给人视觉产生强烈刺激的状态,对视觉刺激是迅速的、警戒、醒目的效果,但不易于长时间观看。
红色分析:
我们看到RGB中R的数值是227,混合了G30、B40,因此红色的纯度轻微降低,颜色稍偏深红。HSB数值中S显示的饱和度为87%,B为89%,因此颜色还是较为饱和明亮。 结论: 主色R227数值较高的时候,由于混合了G30、B40少许颜色,饱和度明度稍微降低,视觉刺激减弱,红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性,该网页整体看来仍然厚重而热烈的表达了主题。
蓝色分析:
RGB数值中B蓝色的数值是131与 R2、G83相混合,蓝色的纯度降低。结合HSB中数值H色相目前显示的是203°,而三原色的纯蓝为240°来看,蓝色的色相偏离较大,加上B为51%的明度,颜色偏暗,因此视觉冲击力较弱。页面沉稳、凝重。 结论: 当蓝色色相偏离于三原色的纯蓝时,视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性,适合用于表达成熟、稳重、安静的网页设计主题。 蓝色在网页设计里也是使用得较频繁的颜色。
从RGB数值显示上看,绿色含量较高达到208,混合了R189的黄色光,因此颜色偏黄绿色,由于添加了B18,饱和度相对降低。玫瑰色中R的含量最高,与B109混合为主要组成色,添加了少量的G27黄,纯度偏高。橙色中R的含量很高为255,混合了G145黄为主要组成色,添加了第三色B34,饱和度稍降低。紫色是由蓝色和红色调配而成,B为170,R为148,混色份量相当也就成为了组合紫色这一间色的主要成份,但是由于添加了G87,也是4组颜色中的间色混合第三色数值最高的,HSB中S数值相对其他三色,降低很多,因此颜色相对于其它3种较沉稳,缓和。 以上4组颜色RGB数值的共同点是以两色混合为主,都是三位数值,另外一色份量较少,为两为数值,因此饱和度较高,色相倾向明显。HSB数值的共同点是,除了紫色,其他三色的S饱和度相当,属较高数值,因此视觉刺激也强。 结论: 间色是由三原色中的两原色调配而成的,因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。 间色尽管是二次色,但仍有很强的视觉冲击力,容易带来轻松、明快、愉悦的气氛。
以上4种颜色中深绿色和赭石色为复色,之所以还选择其它2颜色,为的是更好的配合说明复色的特性,如果没有另外两种非复色搭配,页面配色就可能出现肮等不舒服的感觉。 我们看到深绿及赭石这两种复色的数值都以一个份量最多的三位数,另外两者成份相当,都为两位数组合而得。RGB之间的数值差距较接近、不明显,色阶较趋于直线平稳,呈灰阶。HSB中SB显示的数值也非常接近,成为符合复色特性的必须条件。 结论: 复色是由两种间色或原色与间色混合而成,因此色相倾向较微妙、不明显,视觉刺激度缓和,如果搭配不当,页面便呈现易脏或易灰朦朦的效果,沉闷、压抑之感,属于不好
选用了一组红绿对比色,极赋视觉冲击力、所表现出的性格异常鲜明。 我们看到RGB中绿色的数值显示情况符合复色的条件,因此注定了该颜色明度稍暗、纯度较低的特性,而红色R数值118构成了该色的主要成份,其他G72,B61数值接近,纯度和亮度相对绿色较高,因此2色在构成色彩空间差距上拉大。HSB中2色的S数值也显示出,它们的饱和度相差较大。 结论: 补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用,对比并突出了前景纯度明度较高的面积较小红色的图形,形成了视觉中心重点突出,达到主次分明的主题效果。 红绿、橙蓝、黄紫这三组补色中,前两种使用得最频繁。这三组补色搭配出的最终效果和目的,可以用两个字来概括——强烈!
上图选用了红色、黄色为邻近色示例,主要在色相上做区别丰富了页面色彩上的变化。 RGB数值上看,以上5色R的数值都很高,仅是微妙的不同。其中浅黄色的B为138,因此在HSB数值中纯度S显示最低,为46%;5色RGB中G的数值都不同,色相、明度也产生相应的不同。从数值上分析整体看来,5色都有在同一频率的变化。 结论: 由于是相邻色系,视觉反差不大,统一、调和,形成协调的视觉韵律美,相较显得安定、稳重的同时不失活力,是一种恰到好处的配色类型。
选用红色系4种同类色示例,主要在明度上做区别变化。 由于是红色系,4色RGB数值中的R,数值都很高,且相当。从HSB数值看出,明度越高的颜色饱和度越低。 这4种同类色相来看,明度在强中弱的节奏中的缓和的进行变化。 结论: 第一眼看上去给人温柔、雅致、安宁的心理感受,便可知该组同类色系非常调和统一。只运用同类色系配色,是十分谨慎稳妥的做法,但是有时会有单调感。添加少许相邻或对比色系,可以体现出页面的活跃感和强度。
结论: 高明度高纯度的色彩搭配,把页面表达得鲜艳炫目,有非常强烈刺激的视觉表现力。 充分体现了暖色系的饱和度越高,其温暖特性越明显的性格。
冷色分析: 该网页示例主要选用了邻近色系蓝色绿色和同类色的明度变化。其中3种蓝色系的RGB数值从二位数到三位数,随着明度的递增的同时,由低到高在有规律有节奏的变化。HSB的数值SB也相对随着同比变化,纯度S的含量都不大,因此这几组色彩相对含蓄柔和。 绿色系RGB数值G的色相明显,相应添加了高亮度的黄色R,使色彩较鲜艳明快。HSB数值SB也显示出其高纯度高亮度的特性。 结论: 冷色系的亮度越高,其特性越明显。单纯冷色系搭配视觉感比暖色系舒适,不易造成视觉疲劳。蓝色、绿色是冷色系的主要系,是设计中较常用的颜色,也是大自然之色,带来一股清新、祥和安宁的空气。 本部分小结:
|
|