网页设计配色应用——色彩的对比(4)_网页配色教程
■ 冷暖对比
是指不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系,以红、橙、黄为暖色体系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。另外,色彩的冷暖对比还受明度与纯度的影响,白光反射高而感觉冷,黑色吸收率高而感觉暖。
→ 冷暖对比网页例图:http:// disney.go.com
冷暖对比分析:
以上这几组颜色乍一看感觉鲜艳程度都差不多,但是通过观察它们的数值发现饱和度都有相差,然而明度相近,因此它们给人造成的视觉感受几乎是相同的。该页面冷暖颜色较为丰富,橙和蓝是对比最强烈的补色,其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡作用。主色调的浅蓝色亮度较高,让页面不易给人沉闷的感觉。
结论:
冷暖对比的应用,通常在休闲娱乐网站、食品网站出现比较多。
将这两个色系的色彩安排在同一画面时,其对比效果极为强烈。通常初学者较轻易使两色相互排斥,导致画面色调不谐调。一般我们采用两种调和的方法。
纯度调整
降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配,或者加入补色的谐调,也都能很好的起到协调的效果。
→ 纯度调整网页例图:http:// www.darkelephant.com
纯度调整分析:
主色调的橙色,添入了少许黑色做渐变背景色,降低了纯度。辅助色的蓝色是橙色的补色,主要起的是使得整个页面过多的暖色降低协调于整体的效果,及背景色的棕色都分别提暗降低纯度。而左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑,纯度亮度很高的点睛色红色就起到了这个作用。
结论:
纯度的调整主要是通过明度黑、白、灰变化来调整画面的层次,适当的加入补色也是其中的一个办法。
面积调整
主次的面积区分。根据设计主题的需要,在画面的面积上以一方为主色,于是就掌控画面的色调作用,其他的颜色在使用面积上拉开距离,使画面的主次关系更突出,在统一的同时富有变化。
→ 面积调整网页例图:http:// www.upstairz.com
面积调整分析:
作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。
结论:
大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面
■ 面积对比
同一种色彩,面积越大,明度、纯度越强,面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重。这种现象称为色彩的面积效果。面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。
面积的对比,可以是中高低明度差的面积变化及中高低纯度差的面积变化。
→ 面积对比网页例图:http:// www.parkpack.ru
面积对比分析:
作为大面积使用的主色调--饱和度和亮度为最高值的橙色,通过适当面积的白色加入协调和平衡了视觉的作用外,主体物的深红纹样的图片点缀着纯度、亮度较高的红色有醒目作用,缩小面积而却又能突出于视觉中心点,疏密构图的对比效果。
结论:
大面积的颜色和小面积使用的颜色可以拉开主次关系,位置的正确安排也是一个方面。
下一节我们介绍色彩的调和
- 相关链接:
- 教程说明:
网页配色教程-网页设计配色应用——色彩的对比(4)。