网页设计配色基础：色彩三属性与实例剖析

[size=x-small][color=green]许多初学者对色彩的属性和原色概念模糊，容易混淆，下面我们就先从几个概念入手。今天介绍色彩的三个属性。

　　颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。[/color][/size]

[img]http://image.tianjimedia.com/imagelist/06/34/fed94nminkfw.jpg[/img]
[size=small][color=black]基本色相环[/color][/size]

[size=small][color=red]■ 色相（Hue）：[/color][/size]
　　[size=x-small][color=green]也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。[/color][/size]

[size=small][color=red]■ 明度（Value）： [/color][/size]
　　[size=x-small][color=green]也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。[/color][/size]

[img]http://image.tianjimedia.com/imagelist/06/34/800i85gvrz8q.jpg[/img]
[size=small][color=black]明度的递增[/color][/size]

[size=small][color=orange]→ 明度网页例图：http://www.once-upon-a-forest.com[/color][/size]
[img]http://image.tianjimedia.com/imagelist/06/34/lragh8vjgexc.jpg[/img]

[size=small][color=red]明度分析：[/color][/size]
　　[size=x-small][color=green]从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。
结论：
　　RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。[/color][/size]

[size=small][color=red]■ 纯度(Chroma）： [/color][/size]
　　[size=x-small][color=green]也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。[/color][/size]
[img]http://image.tianjimedia.com/imagelist/06/34/g59ei74v2s03.jpg[/img]
[size=small][color=black]加入黑色的纯度变化和加入白色的纯度变化[/color][/size]

[img]http://image.tianjimedia.com/imagelist/06/34/dm9dxzg8gq10.jpg[/img]

[size=small][color=red]纯度分析：[/color][/size]
　　[size=x-small][color=green]上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。
　　我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79%，玫瑰色S饱和度数值为85%，B明度为97％。当饱和度和明度同时呈最高值时，色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更强烈。

　　结论：
　　HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。[/color][/size]