- 网页设计与网站建设全攻略
- 何立
- 1492字
- 2025-02-21 21:00:13
2.3 色彩对比
在一定条件下,不同色彩之间的对比会有不同的效果。在不同的环境下,多色彩给人一种印象,单一色彩给人另一种印象。各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。
2.3.1 明度对比
明度对比是指因色彩之间明暗程度的差别而形成的对比。明度对比在视觉上对色彩层次和空间关系影响较大,如柠檬黄的明度高,蓝紫色的明度低,橙色和绿色属中明度,红色与蓝色属中低明度,如图2-15所示就是色彩的明度对比。

图2-15 色彩的明度对比
明度对比较强时光感强,形象的清晰程度高、锐利,不容易出现误差,如图2-16所示就是明度对比强的网页。明度对比弱时,则显得柔和静寂、柔软、单薄、晦暗、形象不易看清,如图2-17所示。

图2-16 明度对比强的网页

图2-17 明度对比弱的网页
对色彩应用来说,明度对比的正确与否,是决定配色的光感、明快感、清晰感以及心理作用的关键。历来的色彩搭配都重视黑、白、灰的训练。因此在配色中,要重视无彩色的明度对比的研究,更要重视有彩色之间的明度对比的研究,注意检查色彩的明度对比及其效果。
2.3.2 色相对比
色相对比是指因色相之间的差别形成的对比。如图2-18所示就是色相对比。当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容或效果等,这样才能增强其表现力。不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和;越接近补色,对比效果越强烈。

图2-18 色相对比
黄色在从儿童网站甚至企业网站等都能找到自己的发挥空间,通过结合紫色、蓝色等补色可以得到温暖愉快的效果,如图2-19所示。

图2-19 黄色、紫色补色对比
在色相环上,红、黄、蓝是不能由其他颜色混合出来的原色,而三原色之间如按一定的比例混合即可得到色相环上其他全部色。红、黄、蓝表现出最强烈的色相特征,是色相对比的极端。蓝色与橙色明暗对比居中,冷暖对比最强,活跃而生动,如图2-20所示。

图2-20 蓝色、橙色补色对比
2.3.3 纯度对比
纯度对比是指因不同色彩之间纯度的差别而形成的对比,如图2-21所示。色彩纯度可大致分为高纯度、中纯度、低纯度3种。未经调和过的原色纯度是最高的,而中间色多属于中纯度的色彩,复色其本身纯度偏低而属于低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。

图2-21 纯度对比
例如,一个鲜艳的红色与一个含灰的红色并置在一起,能比较出它们在鲜浊上的差异,如图2-22所示。

图2-22 纯度对比的网页
2.3.4 色彩的面积对比
面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。同一种色彩,面积越大,明度、纯度越强;面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重,这种现象称为色彩的面积效果。
如图2-23所示色彩的面积对比,不同的面积对比使色彩显示出不同的强度,产生不同的色彩对比效果。

图2-23 色彩的面积对比
2.3.5 色彩的冷暖对比
冷暖对比是指因不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系,以红、橙、黄为暖色系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。另外,色彩的冷暖对比还受明度与纯度的影响,白色反射高而感觉冷,黑色吸收率高而感觉暖。
•暖色:如图2-24中的黄色、橙色、红色、紫色等属于暖色系列。暖色与黑色调和可以达到很好的效果。暖色一般应用于购物类网站、儿童类网站等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。

图2-24 暖色
•冷色:如图2-25中的绿色、蓝色、蓝紫色等属于冷色系列。冷色与白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站,主要表达严肃、稳重等效果。

图2-25 冷色
运用冷暖色的对比可以较好地处理色彩的主从关系,即页面主要表现部分可加强色彩的冷暖对比,次要部分和衬托部分的色彩对比可适度减弱,如图2-26所示。

图2-26 主要部分加强色彩的冷暖对比