3.2 网页配色规范
配色，简单来说就是将合适的颜色摆在适当的位置。但要想搭配好色彩却并不容易。大多数人对色彩的敏感度往往大于文字，因此在网页设计中，网页配色就显得尤为重要，通过配色能调节页面视觉的舒适度，是吸引浏览者目光的重要手段。
通常网页的配色基础为三原色（RGB），下面从三原色开始讲解网页配色的原则及方法。如图3-4所示的色环显示了最基础的颜色种类。
图3-4 色环
黄色：给人以青春、乐观、豁达的感觉，常被用作点睛之色。
红色：给人以活力、速度、紧迫的感觉，常用于打折促销等。
蓝色：给人以信任、安全、有底蕴的感觉，常用于银行、安全中心等机构。
绿色：给人以生命力、轻松、天然的感觉，常用于保健品等行业。
橙色：给人以积极、进取、有活力的感觉，常用于唤起行动，如按钮的颜色常用橙色。
粉色：给人以浪漫、女性化的感觉，常用于女性消费行业、女性产品等。
黑色：给人以沉重、有影响力、严肃的感觉，常用于奢侈品营销等。
紫色：给人以冷静、神秘的感觉，常用于美妆等女性产品。
3.2.1 网页配色的原则
关于网页配色，首先要区分一下网页设计与平面设计的区别。网页是显示在显示器上的，设计时受显示器屏幕空间和互联网传输带宽的约束。其次，网页配色要以Web颜色为基础，色彩种类有限；而平面设计的颜色种类却不受制约。因此网页配色有自己独特的搭配原则和技巧。
1．配色要围绕主题来选择
不同的网页主题要选择不同的色彩进行表达。例如，科技类网站多以蓝色调为主，能够传达深远、沉静、睿智的理念。再如，过年时网站多以红色调为主，能够传达热闹、温暖、吉祥的年味。
2．配色要保持风格统一
色彩的风格很多，如古典风格、动漫风格、时尚风格等，在同一页面中切忌将不同风格混杂，那样会使页面失去信息传递的方向，给人以混乱的感觉。
3．配色要突出艺术感
单纯用文字和图片堆砌的页面会让浏览者产生厌烦的情绪，通过艺术处理，让文字和图片以优美的方式展现出来，能让浏览者身心愉悦，更好地接受网页传递的信息。
3.2.2 网页配色的常用方法
1．规划页面整体色调
在网页设计中，主题是灵魂，布局和配色是表达手段。规划页面整体色调是网页设计的开始，需要从颜色选择和各自所占面积等因素入手。一般来说，网页设计主张色彩搭配选择不超过3种颜色（主色、辅助色、点缀色），在配色中主色占大面积，以主色为中心选择其他颜色，形成网页整体色调。不同的主色调表现不同的气氛，如采用红色系作为主色，页面呈现热闹、温暖的感觉。
2．合理搭配背景色与前景色
在页面设计中，背景主要是衬托作用，在构造前景主体时，往往会推远、虚化背景，这就需要前景色和背景色要有一定的对比，突出前景色，避免喧宾夺主。
3．基础配色方法
1）单色搭配。
这是由一种色相的不同明度组成的搭配。这种搭配能很好地体现颜色的明暗变化。单色搭配可通过调整色彩的饱和度和透明度等产生层次变化，如图3-5所示。
图3-5 单色搭配
2）近似色搭配。
所谓近似色，就是在色环上相邻近的颜色，如图3-6所示的橙色、褐色、黄色搭配，这种搭配具有低对比度，较和谐，让人赏心悦目。
图3-6 近似色搭配
3）对比色搭配。
这是由色环中相对的两个色相组成的搭配。对比色可以突出重点，产生了强烈的视觉效果。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用，如图3-7所示。
图3-7 对比色搭配
4）分裂补色搭配。
同时用补色及类比色的搭配确定颜色关系，称为分裂补色搭配。这种颜色搭配既有类比色的低对比度，又有补色的力量感，形成一种既和谐又有重点的颜色关系，如图3-8所示。
图3-8 分裂补色搭配
4．恰当运用配色的平衡
配色的平衡就是颜色的强弱、轻重、浓淡这些关系的平衡，运用恰当会使整个画面变得美观、自然和舒适。
1）保持冷暖色调平衡。
暖色调给人以阳光的感觉，冷色调给人以清凉的感觉，要合理搭配冷暖色调，平衡视觉心理，过冷或过暖都会导致情感失衡。如图3-9所示为同一导航区域中的两个图片超链接。通过Photoshop拾色器可以发现，红色是偏冷的红，蓝色是偏冷的蓝，这样就保证了图片在一个调子上。
图3-9 冷暖色互补平衡
2）利用互补色保持色调平衡。
利用互补色也能够实现色调的平衡，能补充色彩情感表达的缺失感。调节互补色的明度、饱和度能改变情感的走向。例如，在图3-10中都采用暖色，关注的重点不是很明显；在图3-11中利用冷色来突出重点，实现了色调的平衡。在设计中，一般用暖色作为前景色，冷色作为背景色。
图3-10 都采用暖色
图3-11 暖色与冷色互补平衡
3）通过添加黑、白、灰保持色调平衡。
在色彩搭配中，往往会出现色彩辣眼睛的情况，最明显的就是互补色搭配时。平衡这种色调时，可通过添加中性色黑、白、灰来实现。
将RGB色盘调成灰度模式后，可以检测画面的黑白灰层级关系和比重。图3-12中的渐变是按照黑白灰平衡的原理，渐变出来的颜色不会乱，很有韵律，所以黑白灰平衡能有效把控色彩的稳定，控制互补色的平衡。想要让色彩更突出或更协调，可单独使用黑、白、灰，也可综合使用黑、白、灰。
图3-12 黑白灰平衡
网页色彩搭配是一个高难度的技术活，要让色彩在视觉上达到平衡，布局完美，需要设计师们不断地尝试、琢磨、积累、创新。