![网页设计与网站建设全攻略](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=1738981853-knmpFDcPwAWm19gHXambW2S9B95aZwac-0-c8399c28909b05b3c9a7c24b6d0deb60)
图2-15 色彩的明度对比
明度对比较强时光感强,形象的清晰程度高、锐利,不容易出现误差,如图2-16所示就是明度对比强的网页。明度对比弱时,则显得柔和静寂、柔软、单薄、晦暗、形象不易看清,如图2-17所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0031.jpg?sign=1738981853-8VbQ50B5ZpYAOJATBR5Md8tRLHZMy4Qs-0-96c26581c1be7b24e33ab2448698f911)
图2-16 明度对比强的网页
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0032.jpg?sign=1738981853-kvqbCakPMDYGYDO2BLFdlcV4H0QVudMM-0-61f291ef188d71d5c8b7d6f0dc73d8dc)
图2-17 明度对比弱的网页
对色彩应用来说,明度对比的正确与否,是决定配色的光感、明快感、清晰感以及心理作用的关键。历来的色彩搭配都重视黑、白、灰的训练。因此在配色中,要重视无彩色的明度对比的研究,更要重视有彩色之间的明度对比的研究,注意检查色彩的明度对比及其效果。
2.3.2 色相对比
色相对比是指因色相之间的差别形成的对比。如图2-18所示就是色相对比。当主色相确定后,必须考虑其他色彩与主色相是什么关系,要表现什么内容或效果等,这样才能增强其表现力。不同色相对比取得的效果有所不同,两色越接近,对比效果越柔和;越接近补色,对比效果越强烈。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0033.jpg?sign=1738981853-NAysNCCvDHOiZA0KK1um3xwPRudIKAz8-0-26a92ca03c5405de1f923b649ce85d1b)
图2-18 色相对比
黄色在从儿童网站甚至企业网站等都能找到自己的发挥空间,通过结合紫色、蓝色等补色可以得到温暖愉快的效果,如图2-19所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0034.jpg?sign=1738981853-gr3RND1RZEbSPpS9HhgV0ik3XLN6aYYE-0-1bafe571dc3f0d20bffee7edf5b1aa14)
图2-19 黄色、紫色补色对比
在色相环上,红、黄、蓝是不能由其他颜色混合出来的原色,而三原色之间如按一定的比例混合即可得到色相环上其他全部色。红、黄、蓝表现出最强烈的色相特征,是色相对比的极端。蓝色与橙色明暗对比居中,冷暖对比最强,活跃而生动,如图2-20所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0035.jpg?sign=1738981853-ZpVNDVGEeijam6Jw5cix5NBvD3TQ9cLW-0-ff13799939fe8b60a1c4b5efd50f80d1)
图2-20 蓝色、橙色补色对比
2.3.3 纯度对比
纯度对比是指因不同色彩之间纯度的差别而形成的对比,如图2-21所示。色彩纯度可大致分为高纯度、中纯度、低纯度3种。未经调和过的原色纯度是最高的,而中间色多属于中纯度的色彩,复色其本身纯度偏低而属于低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0036.jpg?sign=1738981853-jpoBFkYtCVSphdC5Xrb8Desh5R1nMSxr-0-fb44007ecd7cacd30433c1160c962ac7)
图2-21 纯度对比
例如,一个鲜艳的红色与一个含灰的红色并置在一起,能比较出它们在鲜浊上的差异,如图2-22所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0037.jpg?sign=1738981853-otiW3S7fuULewbaITQuz514ZSzgcuR8v-0-d39ad34d7be35a8d3a12637f7cc40f32)
图2-22 纯度对比的网页
2.3.4 色彩的面积对比
面积对比是指页面中各种色彩在面积上多与少、大与小的差别,影响到页面主次关系。同一种色彩,面积越大,明度、纯度越强;面积越小,明度、纯度越低。面积大的时候,亮的色显得更轻,暗的色显得更重,这种现象称为色彩的面积效果。
如图2-23所示色彩的面积对比,不同的面积对比使色彩显示出不同的强度,产生不同的色彩对比效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0038.jpg?sign=1738981853-KS8bXchNO4VZ0631J4aZdaLPhu6cBhQf-0-628e1516e50f74b24e01a97621275672)
图2-23 色彩的面积对比
2.3.5 色彩的冷暖对比
冷暖对比是指因不同色彩之间的冷暖差别形成的对比。色彩分为冷、暖两大色系,以红、橙、黄为暖色系,蓝、绿、紫则代表着冷色系,两者基本上互为补色关系。另外,色彩的冷暖对比还受明度与纯度的影响,白色反射高而感觉冷,黑色吸收率高而感觉暖。
•暖色:如图2-24中的黄色、橙色、红色、紫色等属于暖色系列。暖色与黑色调和可以达到很好的效果。暖色一般应用于购物类网站、儿童类网站等,用以体现商品的琳琅满目,儿童类网站的活泼、温馨等效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0039.jpg?sign=1738981853-W8J5l4a2pz0crFYjmqgp6al4JR2HgEoG-0-99401c79f9e8c9267fd0bdf25f6dea9b)
图2-24 暖色
•冷色:如图2-25中的绿色、蓝色、蓝紫色等属于冷色系列。冷色与白色调和可以达到一种很好的效果。冷色一般应用于一些高科技网站,主要表达严肃、稳重等效果。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0040.jpg?sign=1738981853-79OzZvwkrHOk1iGk7XkUVXq6i49Jqbhi-0-3ab1507caed613bbfd07cf7348ff4725)
图2-25 冷色
运用冷暖色的对比可以较好地处理色彩的主从关系,即页面主要表现部分可加强色彩的冷暖对比,次要部分和衬托部分的色彩对比可适度减弱,如图2-26所示。
![](https://epubservercos.yuewen.com/7A7F1D/15477640305576406/epubprivate/OEBPS/Images/f0041.jpg?sign=1738981853-aglH9w9Yjo4gl6XQXrB8UCwthAe47wNF-0-87cd20be91609437fbc7f2012fc75bb0)
图2-26 主要部分加强色彩的冷暖对比