3.4　页面色彩搭配

网页的色彩是树立网站形象的关键因素之一，但色彩搭配却是网页设计初学者最感到头疼的问题。网页色彩搭配有哪些原理和技巧呢？本节将具体说明。

3.4.1　网页色彩搭配原理

在选择网页色彩时，除了考虑网站本身的特点，还要遵循一定的艺术规律，从而设计出精美的网页。

·　色彩的鲜明性。网页的色彩要鲜艳，这样容易引人注目，如图3-19所示。

·　色彩的独特性。要有与众不同的色彩，使浏览者对你的设计印象强烈，如图3-20所示为色彩独特的网页设计。

·　色彩的适合性。即色彩和要表达的内容气氛相适合。如图3-21所示为用橙黄色体现食品丰富性的网页。

·　色彩的联想性。不同的色彩会让人产生不同的联想，蓝色会使人联想到天空，黑色会使人联想到黑夜，红色会使人联想到喜事等，选择色彩要与网页的内涵相关联。

3.4.2　网页设计中色彩搭配的技巧

1．用一种色彩

用一种色彩是指，先选定一种色彩，然后调整其透明度或者饱和度（也就是将色彩变淡或者加深），产生新的色彩再用于网页。这样的网页看起来色彩统一，且有层次感，如图3-22所示为使用了同一种色彩搭配的网页。

2．原色对比

色相的差别虽然是因可见光的波长导致的，但不能完全根据波长的差别来确定色相及色相的对比程度。因此，在度量色相差时，不能只依靠测光器和可见光谱，而应借助色环，也称“色相环”，如图3-23所示。

一般来说，色彩的三原色（红、黄、蓝）最能体现色彩之间的差异。色彩的对比强，看起来就具有诱惑力，能够起到集中视线的作用，对比色可以突出重点，产生强烈的视觉效果，如图3-24所示。通过合理地使用对比色，能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。

3．补色对比

在色环中，色相距离为180°的颜色对比为补色对比，即位于色环直径两端的颜色为补色。一对补色在一起，可以使对方的色彩显得更鲜明，如图3-25所示的橙色与蓝色、红色与绿色等的对比。如图3-26所示为应用补色对比的网页设计。

4．间色对比

间色又称“二次色”，它是由三原色调配出来的颜色，如红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色。在调配时，由于原色在分量上有所不同，所以能产生丰富的间色变化，间色对比略显柔和，如图3-27所示。

在网页色彩搭配中，间色对比的应用案例很多，如图3-28所示的绿与橙对比就是活泼、鲜明具有天然美的配色。间色是由三原色中的两原色调配而成的，因此对视觉刺激的强度相对三原色来说缓和不少，属于较易搭配之色。但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。

5．色彩的面积对比

色彩的面积对比是指，页面中各种色彩在面积的多与少、大与小的对比，影响页面的主次关系。在同一视觉范围内，色彩面积的不同，会产生不同的对比效果，如图3-29所示。

当两种颜色以相等的面积出现时，这两种颜色就会产生强烈的冲突，色彩对比自然强烈。

如果将比例变换为3:1，一种颜色被削弱，整体的色彩对比也减弱了。当一种颜色在整个页面中占据主要位置时，则另一种颜色只能成为陪衬，此时色彩对比效果最弱。

同一种色彩，面积越大，明度、纯度感越强，面积越小，明度、纯度感越低。当面积大时，亮的颜色显得更轻，暗的颜色显得更重。

根据设计主题的需要，在页面的面积上以一种颜色为主色，其他颜色为次色，使页面的主次关系更突出，在统一的同时又富有变化。

3.4.3　使用配色软件

配色是网页设计的关键之一，精心挑选的颜色组合可以使设计更有吸引力；相反，糟糕的配色会伤害眼睛，妨碍浏览者对网页内容和图片的理解。然而，很多时候设计师不知道如何搭配颜色，可以借助配色软件挑选颜色。

ColorJack是一款在线配色工具，从球形的取色器中选择一种颜色，ColorJack会显示一个色表，将鼠标指针放在某个颜色上，会显示基于该颜色的配色主题，如图3-30所示。可以将生成的配色方案输出到Illustrator、Photoshop或ColorJack Studio中。

3.4.4　使用辅助色

辅助色的功能在于，帮助主色建立更完整的形象，如果一种颜色和形式完美结合，辅助色就不是必须存在的。判断辅助色使用情况的标准是：去掉辅助色页面不完整；有了它主色更突出。在如图3-31所示的页面中，红色是主色，粉红色是辅助色，这样的搭配更加突出了生日喜庆的气氛。