网站配色方案实例.docx

网站配色方案实例.docx

《网站配色方案实例.docx》由会员分享，可在线阅读，更多相关《网站配色方案实例.docx（14页珍藏版）》请在冰点文库上搜索。

网站配色方案实例

网站配色方案实例

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

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

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

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

一、网页颜色原理和象征意义

我们所有网页上颜色，在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

图1

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

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

如图2。

图2

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

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

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

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

图3

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

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

如图4

图4

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

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

如图5

图5

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

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

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

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

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

如图6

图6

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

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

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

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

如图7

图7

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

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

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

如图8

图8

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

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

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

如图9

图9

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

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

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

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

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

如图10

图10

网站设计中配色方案的使用

不论你做什么样的设计，色彩都是一个不容忽视的问题。

色彩以一种“隐蔽”的方式传达的各种信息，这些信息会影响观看者的心理和感受，左右他们的判断和选择，色彩对于设计而言实在太重要。

这篇文章就要比较系统地介绍一些在网页设计中如何使用色彩的入门知识。

　　色彩是设计者的得力助手，前提是应用得当。

对于网站设计而言，色彩的重要性尤其突出，不过经常被粗心的站长忽视。

我们经常说“第一映像最重要”，于是设计网站时，设计者经常会花很多精力制作一个“富于冲击力”的LOGO或者BANNER，当然，它们很重要。

但是，访问者访问网站时的第一映像实际上并不来自这些LOGO或者BANNER，而是——色彩！

　　好了，在了解了色彩对于网站设计的重要性之后，我们开始探寻色彩的奥秘。

　　色彩入门

　　首先让我们熟悉一下色彩的一些基本概念。

　　三原色

　　一切颜色都来自三原色：

红、黄、蓝。

　　在这个圆环中，相邻的两个原色相混合可以得到另外三个比较重要的颜色（下文将其称为二级原色）：

红+黄=橙，红+蓝=紫，蓝+黄=绿

　　让我们再深入一步，三原色和三种二级原色可以进一步混合得到更多的颜色，分别是橙红色、紫红色、蓝紫色、蓝绿色、橘黄色和黄绿色。

这六种颜色可以称为三级原色。

　　按照同样的方式不断进行下去，这个圆环中颜色之间的分隔线就会消失，得到下图所示的“色彩圆环”，在一些绘图程序的调色板中我们可以看到这样的色彩圆环。

　　但是这个圆环仍然没有涵盖所有的颜色，对于圆环中的每一种颜色还有饱和度、亮度和灰度等的变化。

也就是说，将上述圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色，下面将详细介绍。

常用的色彩术语

　　饱和度

　　某种颜色的饱和度是指这种颜色所包含的基本颜色的多少。

例如RGB值为（0，0，255）的蓝色是纯蓝色，他的饱和度是100%。

随着饱和度的降低，颜色会越来越接近灰色。

　　灰度

　　基本色彩和黑色进行不同程度的混合可以得到不同的灰度，例如

　　亮度

　　基本颜色和白色进行不同程度的混合可以得到不同的亮度，例如：

:

　　色调

　　基本颜色和灰色进行不同程度的混合可以得到不同的色调，例如：

　　 色彩方案的种类

　　不同网站应当使用不同的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站“更加好看”，更重要的是在访问者心目中建立对这个网站的感性认识。

所以，色彩方案的选择决不能草率，而且色彩方案绝对是网站建设的第一个步骤。

如果选择色彩方案时过于草率，甚至根本不对网站进行色彩方案的整体规划，你将不可能制作出一个真正优秀的网站。

　　例如，一个销售婴儿用品的网站应当使用比较活泼的色彩方案，而一个艺术网站则应当使用比较执重的方案。

　　按照色彩方案中色彩使用方式的不同，我们可以将色彩方案划分成多种类型，单色方案、相似色方案、补色方案和三合一色方案。

单色方案

　　单色方案是指在网站设计中终止使用一种基本颜色，为避免单调，我们可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。

例如：

　　在Photoshop的色彩选择窗口中，我们可以这样进行建立单色方案。

首先调整H（也就是Hue的缩写）后面的值来调整色调。

注意，H的单位是度，也就是基本颜色在颜色环上所处位置的角度。

　　设置好H的值之后，再调整B后面的数字调整亮度以及S后面的数字调整饱和度。

注意，其中B和S的单位是百分比，也就是向基本颜色中添加白色和黑色的百分比。

这样就可以得到一个单色方案了。

　　下面来看两个使用单色方案的成功实例。

　　单色方案实例之一：

　　这是一个女性网站，因此其基本颜色为粉红色，并通过调整粉红色的饱和度得到了其余几种颜色。

总体颜色趋于淡雅，访问者的注意力会很自然地被吸引到几幅展示其产品的图片上。

　　单色方案实例之二：

　　这个色彩方案使用的基色颜色较深，并通过修改其亮度获得其他两种颜色，并用最浅的颜色作为主体部分的背景，使其突出出来。

　　总的来说，单色方案是一种比较稳重的方案，或者说比较保守的方案。

单色方案给人整洁、经典的感觉，最适合于内容比较严肃的网站，比如政府网站，学术网站，企业网站，高雅艺术网站。

　　特别值得一提的是，商业网站也比较适合使用此种颜色方案，因为这种方案可以给人一种稳定感，使访问者容易建立对网站的信任感。

当然，这种方案也有其灵活的一面，当使用较浅的基色时，这种颜色方案也可以用于时尚类网站，传达简约清雅的观念。

相似色方案

　　在色彩圆环上选择彼此相邻的几种颜色构成的配色方案就是相似色方案。

例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。

由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多。

　　下面是相似色方案的实例。

　　相似色方案实例一：

　　这个网站使用了由橙黄色、橙红色和橙色组成的配色方案。

Bullseye是一家ISP服务商，面向普通客户。

选用这种方案和行业内惯用的蓝色系形成鲜明对照，个性凸现。

　　相似色方案实例之二：

　　这个网站使用了绿色和黄色这两种相似色构成配色方案。

页面上很多绿色植物，因此文字使用了绿色，整个页面看上去自然清新，和网站的内容相得益彰。

　　通常，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常常用。

典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。

除了上面介绍的绿色和黄色之外，蓝色和绿色以及红色和褐色也是比较常用的相似色配色方案。