![网页设计与网站建设全攻略](https://wfqqreader-1252317822.image.myqcloud.com/cover/587/27110587/b_27110587.jpg)
2.3 色彩对比
在一定条件下,不同色彩之间的对比会有不同的效果。在不同的环境下,多色彩给人一种印象,单一色彩给人另一种印象。各种纯色的对比会产生鲜明的色彩效果,很容易给人带来视觉与心理的满足。
2.3.1 明度对比
明度对比是指因色彩之间明暗程度的差别而形成的对比。明度对比在视觉上对色彩层次和空间关系影响较大,如柠檬黄的明度高,蓝紫色的明度低,橙色和绿色属中明度,红色与蓝色属中低明度,如图2-15所示就是色彩的明度对比。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0030.jpg?sign=1738948057-4cBL3HDXcw3tCeshYzH48p49T4a6K7IS-0-5c04f6500475ae6bca27878e715b93c2)
图2-15 色彩的明度对比
明度对比较强时光感强,形象的清晰程度高、锐利,不容易出现误差,如图2-16所示就是明度对比强的网页。明度对比弱时,则显得柔和静寂、柔软、单薄、晦暗、形象不易看清,如图2-17所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0031.jpg?sign=1738948057-gsCwTkc2my060YBhxMY7dM8X1FYXuwMf-0-949b8243862e45221ef52043c0631000)
图2-16 明度对比强的网页
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0032.jpg?sign=1738948057-xOIKdXFd1fxA1DMNcmKyc952bzMxnHQS-0-709c4c23e2716b04e4d19fc58a668516)
图2-17 明度对比弱的网页
对色彩应用来说,明度对比的正确与否,是决定配色的光感、明快感、清晰感以及心理作用的关键。历来的色彩搭配都重视黑、白、灰的训练。因此在配色中,要重视无彩色的明度对比的研究,更要重视有彩色之间的明度对比的研究,注意检查色彩的明度对比及其效果。
2.3.2 色相对比
色相对比是指因色相之间的差别形成的对比。如图2-18所示就是色相对比。当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容或效果等,这样才能增强其表现力。不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和;越接近补色,对比效果越强烈。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0033.jpg?sign=1738948057-NzkuEW2F3PBrv5raie8qgnD9FrQ6XrOh-0-5aef802cd8795a0f8153c0b2d6eb55b1)
图2-18 色相对比
黄色在从儿童网站甚至企业网站等都能找到自己的发挥空间,通过结合紫色、蓝色等补色可以得到温暖愉快的效果,如图2-19所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0034.jpg?sign=1738948057-qSK77RV4W1kuuGkEj9jQs6PrO6Ogun67-0-30a72d49c50e5beaf44b399f1bad12d7)
图2-19 黄色、紫色补色对比
在色相环上,红、黄、蓝是不能由其他颜色混合出来的原色,而三原色之间如按一定的比例混合即可得到色相环上其他全部色。红、黄、蓝表现出最强烈的色相特征,是色相对比的极端。蓝色与橙色明暗对比居中,冷暖对比最强,活跃而生动,如图2-20所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0035.jpg?sign=1738948057-xmbZ9z7Ou6TF3q8DFGfnUj9XP52hq1E3-0-ead737ef43129be7824d1342ea5b22d1)
图2-20 蓝色、橙色补色对比
2.3.3 纯度对比
纯度对比是指因不同色彩之间纯度的差别而形成的对比,如图2-21所示。色彩纯度可大致分为高纯度、中纯度、低纯度3种。未经调和过的原色纯度是最高的,而中间色多属于中纯度的色彩,复色其本身纯度偏低而属于低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0036.jpg?sign=1738948057-Y0JI0iUo4WoUu1ik35lhOWf4JRQw6j90-0-93210979f5f8cc17155314e4927e49ba)
图2-21 纯度对比
例如,一个鲜艳的红色与一个含灰的红色并置在一起,能比较出它们在鲜浊上的差异,如图2-22所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0037.jpg?sign=1738948057-ANSWx0MFByCXFHPfmT8T6CG68gLLAkIZ-0-745f067cd08694da9c40c9a7981b4cdb)
图2-22 纯度对比的网页
2.3.4 色彩的面积对比
面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。同一种色彩,面积越大,明度、纯度越强;面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重,这种现象称为色彩的面积效果。
如图2-23所示色彩的面积对比,不同的面积对比使色彩显示出不同的强度,产生不同的色彩对比效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0038.jpg?sign=1738948057-SrDZPPmOQoy3Z1ByZoOMd0zlZgfp2wZm-0-f0ed2470acb3132967afca94c1d30837)
图2-23 色彩的面积对比
2.3.5 色彩的冷暖对比
冷暖对比是指因不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系,以红、橙、黄为暖色系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。另外,色彩的冷暖对比还受明度与纯度的影响,白色反射高而感觉冷,黑色吸收率高而感觉暖。
•暖色:如图2-24中的黄色、橙色、红色、紫色等属于暖色系列。暖色与黑色调和可以达到很好的效果。暖色一般应用于购物类网站、儿童类网站等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0039.jpg?sign=1738948057-3o4qtIWA77hQLgnKKrtdAIM8qJjZ1G7O-0-e82474d29578853ebb272290df7c37d6)
图2-24 暖色
•冷色:如图2-25中的绿色、蓝色、蓝紫色等属于冷色系列。冷色与白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站,主要表达严肃、稳重等效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0040.jpg?sign=1738948057-6VFhxXSHV5tyVOQiwgjy28O4VptLMJ4U-0-63dc0a019ecc75c459aa809d002c60ed)
图2-25 冷色
运用冷暖色的对比可以较好地处理色彩的主从关系,即页面主要表现部分可加强色彩的冷暖对比,次要部分和衬托部分的色彩对比可适度减弱,如图2-26所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0041.jpg?sign=1738948057-Unw5Cw1NcN6uJ5IOH0xJCTUjopR7rqMH-0-9d438c9f136e8219137ffb692a5d413a)
图2-26 主要部分加强色彩的冷暖对比