网页设计配色应用教程之色彩的调和

【 tulaoshi.com - Web开发 】

　　网页页面中总是由具有某种内在联系的各种色彩，组成一个完整统一的整体，形成画面色彩总的趋向，称为色调。也可以理解为色彩状态。色彩给人的感觉与氛围，是影响配色视觉效果的决定因素。

　　为了使网页的整体画面呈现稳定协调的感觉，以便充分的掌握其规律来更好的分析学习，我们前面介绍了色调的视觉角色主次位置的几个概念，也介绍了色彩的对比。今天我们介绍色彩的调和。

　　两种或两种以上的色彩合理搭配，产生统一谐调的效果，称为色彩调和。色彩调和是求得视觉统一，达到人们心理平衡的重要手段。

　　调和就是统一，下面介绍的四种方法能够达到调和页面色彩的目的。

　　■ 同种色的调和

　　相同色相、不同明度和纯度的色彩调和。使之产生秩序的渐进，在明度、纯度的变化上，弥补同种色相的单调感。

　　→ 同种色的调和网页例图：http://www.solar1.org

　　同种色的调和网页例图

　　同种色的调和分析：

　　同种色给人的感觉是相当协调的。它们通常在同一个色相里，通过明度的黑白灰或者纯度的不同来稍微加以区别的，产生了及其微妙的韵律美。为了不至于让整个页面呈现过于单调平淡，有些页面则是加入极其小的其他颜色做点缀。该页面使用了同种色的黄色系，淡黄、柠檬黄、中黄、通过明度、纯度的微妙变化产生缓和的节奏美感。

　　结论：

　　同种色被称为最稳妥的色彩搭配方法。

　　■ 类似色的调和

　　在色环中,色相越靠近越调和。主要靠类似色之间的共同色来产生作用。

　　→ 类似色的调和网页例图：http://www.solar1.org

　　类似色的调和网页例图

　　类似色的调和分析：

　　类似色相较于同类色色彩之间的可搭配度要大些，颜色丰富、富于变化。

　　以上页面主要取的是色环中的黄色、绿色、蓝色通过明度、纯度、面积上的不同实现变化和统一的。虽然主色调的米黄色在页面中使用面积最大，但是我们看到由于它的明度非常高，饱和度就降低了，因此在页面中处在不明显的角色。而绿色的纯度最高，且使用面积次之，页面显示较显眼，因此用于次级导航位置上。整个页面主次的视觉引导分明。

　　结论：

　　不是每种主色调都是极其显眼的位置，通常多扮演着用于突出主体的辅助性配角。而重要角色往往在页面中用的份量极少，却又起到突出主体的作用。

　　■ 对比色的调和

　　调和方法有：

　　1、提高或降低对比色的纯度；

　　2、在对比色之间插入分割色（金、银、黑、白、灰等）；

　　3、采用双方面积大小不同的处理方法；

　　4、对比色之间加入相近的类似色。

　　→ 对比色的调和网页例图：http://www.snapple.com

　　对比色的调和网页例图

　　对比色的调和分析：

　　基本上可以说是黄色和紫色的对比色做页面的主要色调。黄色紫色组合在网页中使用率较低，原因是这组颜色适用范围相对其他两组对比色要小很多，配色难度也较两组大。

　　这里黄色加入了红色呈中黄色，紫色加入了红色，偏玫瑰色，所以这组颜色不是严格意义上的对比色，也因此使这组颜色看起来协调、舒服。这个页面都调低了亮度使整体降低了纯度，缓和视觉刺激。白色是这组对比色里加入的协调色。

　　结论：

　　从上面的分析我们可以知道，通过上面的这些色值调配--当需要使用这组对比色配色时候该如何达到协调的目的。

　　不是对比色为主色调的页面就一定会有不舒服的感觉的，主要可以通过调低亮度、降低饱和度、加入少许白色来调和。

　　■ 渐变色的调和

　　渐变色实际是一种调和方法的运用。是颜色按层次逐渐变化的现象。色彩渐变就像两种颜色间的混色，可以有规律地在多种颜色中进行。暗色和亮色之间的渐变会产生远近感和三维的视觉效果。

　　→ 渐变色的调和网页例图：http://www.macromedia.com

　　渐变色的调和网页例图

　　渐变色的调和分析：

　　该页面背景使用了渐变的效果，增加了视觉空间感。在导航栏、广告区域、产品技术的大标题块，都使用了渐变的技术手法来表达，产生三维的视觉效果，统一了整个页面的设计语言，也是区别于其他网站页面的个性体现，达到让人印象深刻的目的。

　　结论：

　　渐变色能够柔和视觉，增强空间感，体现节奏和韵律美感，统一整个页面的目的。

　　除了统一当然也可以起到变化页面视觉形式的作用。该设计语言可做需要的时候适当的使用。

　　本部分小结：

　　本节主要对色彩的对比与调和做了实例分析。例如当页面平淡单调，需要用对比手法做些变化来丰富页面的色彩设计；当页面变化过多，显得刺眼、凌乱，可以通过以上介绍的调和方法进行调整，使得页面看起来更统一协调。

　　● 主要是通过面积大小、冷暖对比来表达体现页面的主次关系、中心思想。

　　● 颜色平淡可加入适当类似色对比色来使页面产生变化。颜色凌乱可以适当加入同类色或者类似色、白色、黑色、灰色做到统一调配的目的。

　　● 对比色的搭配并不是就是说是绝对值的红或者绿，蓝或橙、黄或紫。对比色的第一视觉倾向越明显配色难度就越大，也就是说越难调和；反之，倾向越不明显的对比色越容易调和。请参照刚才对比色调和页面分析例子方法。

　　● 不是一种色彩面积用得越多或者越少、纯度、明度越高就是能突出主体的主角色，主要是根据色彩相互之间的搭配关系来体现的。

　　● 一个页面中单纯绝对的使用某种颜色或是使用绝对非常多种颜色搭配，容易产生个性效果，那叫玩色彩了，限于色彩运用得非常熟练的朋友，但不推荐初学者使用。