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 色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调感，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。只要控制在不超出3种色相的范围即可，设计用色越少越好，少而精。如图3-30所示。

3.4.4 使用配色软件

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

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

3.4.5 使用辅助色

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