比较经典的色彩搭配网站

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

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

颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜

色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。

基本色相环

■ 色相（Hue ）：

也叫色调，指颜色的种类和名称，是指颜色的基本特征，是

一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没

有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、

紫等为不同的基本色相。

■ 明度（Value ）：

也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。

明度的递增

明度分析：

从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。

结论：

RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。

■纯度(Chroma）：

也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，

加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。

加入黑色的纯度变化和加入白色的纯度变化

纯度分析：

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

结论：

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

网页设计配色应用教程之各种色彩对比分析

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

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

对比与调和就是形式美的变化与统一规律

在一定条件下，不同色彩之间的对比会有不同的效果。在不同的环境下，多色彩给人一种印象，色彩单一给人另一种印象。

各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。

很多朋友都以为色彩对比主要是红绿、橙蓝、黄紫色的对比，实际色彩对比范畴不局限于这些。是指各种色彩的界面构成中的面积、形状、位置以及色相、明度、纯度之间的差别，使网页色彩配合增添了许多变化、页面更加丰富多彩。

色彩的对比规律大致有以下几点：

■色相对比

是指因色相之间的差别形成的对比。当主色相确定后，必须考虑其他色彩与主色相是什么关系，要表现什么内容及效果等，这样才能增强其表现力。不同色相对比取得的效果有所不同，两色越接近，对比效果越柔和。越接近补色，对比效果越强烈。

→色相对比网页例图：

色相对比网页例图

色相对比分析：

主要是以绿色与蓝色之间的色相对比。从HSB数值上可看出嫩绿色的S纯度高B亮度也很高，因此

艳丽的颜色作为背景与前景纯度稍低的墨绿和轱蓝色形成色相之间的对比。前景的墨绿虽然纯度达到最高值100％，比主色调高不少，但是因为亮度低，因此色彩显示没有主色调明艳。

结论：

该页面色相的对比，主要作用于前景与背景的对比、局部与整体的对比。

明度对比

明度对比可分为:彩色差的明度对比及非彩色差的明度对比

是指色彩之间明暗程度的差别而形成的对比。是页面形成恰当的黑、白、灰效果的主要手段。明度对比在视觉上对色彩层次和空间关系影响较大。例如柠檬黄明度高，蓝紫色的明度低，橙色和绿色属中明度，红色与蓝色属中低明度。

→ 明度对比网页例图：

明度对比网页例图

明度对比分析：（非彩色差）

严格来说，该页面应该是黑白灰色非色彩构成，摄影图片中的人物衣服为灰色，相对单纯的黑白对比柔和舒适于视觉。能使页面显得更单纯、统一，形成另一道独特的风景。

纯度对比

是指不同色彩之间纯度的差别而形成的对比。色彩纯度可大致分为高纯度、中纯度、低纯度三种。未经调和过的原色纯度是最高的，而间色多属中纯度的色彩，复色其本身纯度偏低而属低纯度的色彩范围。纯度的对比会使色彩的效果更明确肯定。

→纯度对比网页例图：

纯度对比网页例图

纯度对比分析：

整个页面看起来异常艳丽刺激然而又非常的协调。以上数值主要选取了几种较有代表性的颜色。

大家注意看，以上色彩除了粉红色，其他几组颜色都是高饱和度高亮度的颜色，因此充分的发挥出了色彩的艳丽程度。包括粉红色在内的几种灰色阶，在中间起到了和谐作用。白色能拉开相近色阶的空间及明快页面的作用，在这里可以说是功不可没。

结论：

页面实际上用了不少颜色，配色大胆。抓住颜色主次冷暖的安排，适度再加上和谐的过渡色灰色，