网页设计配色颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。

但是对于刚开始学习制作网页的人来说，往往不容易驾驭好网页的颜色搭配。

除了学习各种色彩理论和方法之外，笔者认为多学习一些著名网站的用色方法，对于我们制作美丽的网页可以起到事半功倍的作用。

所以，笔者总结了一些著名网站的颜色搭配方法，这些方法可以让我们的学习少走弯路，快速提高我们的网页制作水平。

一、网页颜色原理和象征意义我们所有网页上颜色，在HTML下看到的是以颜色英文单词或者十六进制的表示方法（如#000000表示为黑色）。

不同的颜色有着不同的含义，给人各种丰富的感觉和联想。

红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着白色：纯洁、简单、洁净蓝色：天空、清爽、科技绿色：植物、生命、生机灰色：庄重、沉稳紫色：浪漫、富贵棕色：大地、厚朴二、网页颜色的使用风格不同的网站有着自己不同的风格，也有着自己不同的颜色。

网站使用颜色大概分为几种类型：1、公司色在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要有标准的颜色。

比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同时形象宣传、海报、广告使用的颜色都和网站的颜色一致。

再比如国富投资公司的主色调是C：100%，M：60%，Y：0%，K：0%。

这样的颜色使用到网站上显得色调自然、底蕴深厚。

2、风格色许多网站使用颜色秉承的是公司的风格。

比如海尔使用的颜色是一种中性的绿色，即充满朝气有不失自己的创新精神。

女性网站使用粉红色的较多，大公司使用蓝色的较多……这些都是在突出自己的风格。

3、习惯色这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜色。

每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。

三、设计用色十例以下我将分别介绍十个配色较好的网站，大家可以学习和借鉴一下，培养对色彩的敏感以及独到的审美能力。

1）这是个大型的NBA网站。

通常我们经常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB为（203，201，153/#CCCC99），菜单使用的RGB为（112，119，112/#707770）。

这样的配色可以显示独特的个性，又不失大型网站的风采。

如图1图12）下面是一个娱乐类的综合性网站UGO，他的配色方案是背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单为RGB（77,114,159）。

这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。

如图2。

图23）下面的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做的好，连网页制作也是世界一流。

他的每一个网页都是制作的样板。

从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。

背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0），如图3。

图34)现在介绍的网站相对简单，但是她的用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），辅助色为RGB（79，88，95），菜单色为RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）。

虽然简单，但颜色搭配非常的科学合理。

如图4图45）下面的网站采用黄色调为主，很体现公司的个性，现在我们就来看一看她的颜色搭配。

主色调为黄色RGB为（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0），中间再配以抽象的图片，显得个性十足但又不单调。

如图5图56）橘红色如果运用得当的话是一种非常使用于网页上的颜色。

下面的这个网站就是一个非常著名的例子。

他的主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB为（252，200，0）。

字体使用黑色RGB为（0，0，0）。

此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。

如图6图67）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。

下面的这个网站就是使用红色比较好的网站。

我们来看看他的颜色搭配。

他使用的主色调是RGB（200，9，0），配以抽象的图形，文字使用的是RGB（213，229，167）显得美观而不失独特，大气而不逼人。

如图7图78）下面介绍的这种色调是我们制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。

他的主色调为RGB（144，151，97）辅助色调为RGB （173，168，112）边饰为黑色RGB（0，0，0）字体为黑色RGB（0，0，0）。

这样的搭配显得风格独特，颜色和谐而庄重。

如图8图89）下面的设计更加的简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的生活和家庭气氛，使人置身于美丽和爱中。

他的主体是由两种颜色构成，分别是RGB （239，200，161）和RGB（201，254，200）。

如此简单，但是却栩栩如生，跃然网上。

如图9图910）下面举出这个例子是想证明一个道理——只要你有足够的想象力，你就能够设计出漂亮的网页。

目前在网上非常流行一句话就是网页的搭配不要超过四种主要颜色，否则就有杂乱之感。

下面的这个网站远远的超过了三种颜色，但是她并不失美丽。

因此重要的还是色彩的驾驭能力。

下面这个例子的菜单就使用了7种颜色，但是我们看到的网页并不杂乱，相反感觉作者很有创意。

如图10图10网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速的提高我们的制作水平。

可以说。

网页颜色搭配得当，成功也就走了一半。

如果大家有什么好的方法，别忘了和别人交流，让我们共同进步！红色系红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。

红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的颜色。

在众多颜色里，红色是最鲜明生动的、最热烈的颜色。

因此红色也是代表热情的情感之色。

鲜明红色极容易吸引人们的目光。

红色在不同的明度、纯度的状态（粉红、鲜红、深红）里，给人表达的情感是不一样的。

在网页颜色的应用机率中，根据网页主题内容的需求，纯粹使用红色为主色调的网站相对较少，多用于辅助色、点睛色，达到陪衬、醒目的效果。

通常都配以其他颜色调和。

红色相对于其他颜色，视觉传递速度最快。

由于以上的这些红色传达出的特性，因此人们喜欢用红色作为警示符号的颜色，例如：消防、惊叹号、错误提示等等。

为了让大家对红色的理解做更好的区别，下面我们分别对红色系根据邻近色、同类色、对比色的搭配做不同的举例分析。

朱红色→ 朱红色网页例图：http://www.muchvibe.ca朱红色在红色系里倾向黄色方向，是大红色加入黄色而得。

在色环表中，纯红色在HSB 里为0度，往360度方向呈现的是冷红色系，0度方向为黄色系。

整个页面里，主色调朱红色面积非常大、确定明显，辅助色主要由黑色、深红构成，（数值上选取的是深红色做标示）。

主色调的R呈现出255最高数值，S中100%，充分标明了红色最高特性。

辅助色的深红R为222，B87%，显示其充当辅助角色的这一特性。

结论：背景色朱红由于红色特性明显，饱和度、明度都非常的高，这里运用了辅助色深红、黑色压住并牵制朱红色抢眼的个性，也同样能达到突出前景主要图片内容的目的。

点睛色主要用于标志的突出上，其他导航文字、图片的部分运用等，调和并达到了不至于使得整个页面刺激中又透出的沉闷感。

这类颜色的组合比较容易使人提升兴奋度，红色特性明显，这一醒目的特殊属性，比较被广泛的应用于食品、时尚休闲等等类型的网站。

深红色→ 深红色网页例图：http:// 深红色在原有的红色基础上降低了明度而得，是红色系中的明度变化。

通过上图的数值显示看出明度较低。

这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。

传达的是稳重、成熟、高贵、消极的心理感受。

这个页面背景色运用了纹样，是以目前选取的主色调颜色和明度较暗的深红色结合而的，使得明度稍暗。

数值上看，主色调也就是背景色的饱和度较高，但是由于降低了明度，颜色变得较沉稳。

辅助色RGB添加了适量的其他颜色，G和B数值区别不大，因此饱和度降低，颜色趋于柔和稳定。

点睛色的加入提亮，页面视觉效果强化。

结论：前景色通常要较明显的区别于背景色，达到台前的宣传目的。

当饱和度较低的前景色与背景色变化不明显时形成的是另外一种柔和统一的效果。

玫瑰红色→ 玫瑰红色网页例图：http://www.gentverwent.be玫瑰红色在色环上实际已经接近冷色，是红色系中的色相的微妙变化，是红色系里的冷色系。

我们在HSB中H数值可看出，0度为红色的最高值，越接近0度数值红色特性越明显，否则逐渐冷色倾斜，而该数值偏离0度稍远。

这个页面主要由两种不同明度、纯度的玫瑰色调组成。

两色数值显示，我们看到RGB 数值中R呈现的数值最高，红色特性较明显。

辅助色调的玫瑰色，加入少许G，色调向冷色稍微偏移，也由于加入了G，在HSB数值里，饱和度轻微减弱，但随着明度增加，色彩趋于艳丽，符合突出前景的目的。

主色调虽然纯度达到最高饱和，但由于明度降低，相对于辅色调较沉稳，适合做背景色。

数值上看，由于背景色和前景色的明度较为接近，加入白色边框，强烈了前景色于背景色的区分，加强视觉强化效果。

结论：背景色和前景色的明度较接近，颜色给人的视觉表象较闷，加入少量白色划分使得色彩引导的主次块面更分明，页面明快许多。

这类颜色的组合多用于女性主题，例如：化妆品、服装等，容易营造出娇媚、诱惑、艳丽等气氛。

明度粉红色→ 明度粉红色网页例图：http:// .au粉红色主要是红色系中的明度的高亮度的变化。

是红色系里的冷色系。

RGB数值显示明度较高，因此HSB中S纯度下降，几乎呈最低值。

主色调和辅助色调数值对比可知：主色调混合的G的份量较多且明度较高，因此纯度较低，色调柔和，在框架区域内较适合做类似背景色的辅助性岗位。

辅助色R 数值比主色调的R数值稍高，红色性稍明显，加入的G相对少，B明度稍低，因此相对纯度要高，辅色位置应用在框架区域的导航位置，起到突出导航作用。

点睛色突出标志及购物主体的作用。

背景白色除了突出前面粉红色主体的作用，在前景也有出现，背景色与前景色的相互牵制，减少空间距离的效果。

结论：RGB数值中，数值同时呈现相近的高数值时，色彩越柔和协调，纯度相对降低，页面呈高明度灰色段，视觉刺激缓慢。