2.1 如何选择网页的基本色

选定网页的色彩，可以通过确定网页的基本色，然后在选定的基本色的基础上，采用更改基本色的色相、明度或纯度来实现。选定了基本色，差不多也就选定了网页的配色。因此选择网页的基本色很重要，下面具体介绍选择网页基本色的方法。

1. 颜色种类控制在3~5种

选择网页基本色，三种左右，最多不超五种，是最合适的。假如选择颜色的种类过多，在颜色的搭配以及融合效果上，可能不会很理想。

例如，选择下图所示同一色系的颜色，完成网页的配色。通过调整明暗关系，实现颜色的统一，以及可搭配颜色的获取。

也可以选择下图所示对比色系的颜色，实现网页的配色。可采用调整饱和度的方法，获取有对比效果的颜色。

除此之外，用相近色系进行网页配色，也是有效的搭配。如下图所示，该效果主要通过微调色相柱的操作，实现颜色的获取。

2. 通过相关因素选取基本色

选取网页基本色的种类，往往需要突出网站的行业特点等内容。例如，食品类网站会将“健康”、“绿色”的形象通过颜色传递给浏览者。但是，仅凭这一相关内容还不够，另外需要将用户青睐什么样的颜色、产品的季节性因素等内容也考虑进去。总结网页基本色的选择，可以参考如下内容。

⑴ 考虑行业特点

在网页基本色的选择上，将网站的行业特点作为颜色选择的因素，将这部分色彩“感情”融入其中，是一个办法。例如，与海洋相关的网站，为将其与蓝色的海联系起来，采用蓝色作为网站基本色。以下图所示页面为例，作为一个以蓝色为主色调的网站，用来体现海上运动类的网站页面，这样将蓝色与海洋的颜色联系在了一起，进而也无形中将蓝色所代表的健康的行业特点展现出来了。

⑵ 考虑性别因素

如果网站的目标用户群有着明显的男、女数量的区别，例如以女性居多，就需要在色彩的选择上将该因素考虑进去。又如网站是以男性为主要访问者，就需要考虑男性用户的颜色喜好，将此类颜色作为网页的基本色。以下图所示页面为例，作为卡宾Cabbeen休闲服装网站，因为用户以男性居多，在页面的色彩选择上就需要考虑这样的性别因素，所以该网站页面使用了比较深的颜色，从而将男性沉稳的性格用这样的深色系来诠释。

⑶ 考虑季节因素

一年四季如果用颜色表达，可以分别用不同的颜色代替每一个季节。例如，冬天容易让人联想到雪，将雪的白色与冬季联系起来，就可以作为一种网页基本色的选择。例如，下图所示为新春相关的促销页面，为了体现季节因素，页面中添加了白色雪花状的点缀。这样的季节因素的体现，在网站的配色中是常常需要被考虑的因素之一。

⑷ 体现氛围

例如在婚庆类的网站颜色选择上，为了达到体现喜庆氛围的效果，可以采用红色。通过红色将其与喜庆这一氛围联系在一起，这是选择基本色的方法。例如，下图所示网站内容为团800的圣诞节的相关页面。为了凸显节日氛围，网站选择了在喜庆节日氛围中常用的红色作为页面的主色调。

⑸ 表现形象

网站往往是为了宣传自己企业的形象或者自身产品的品牌而建立的，所以在页面的内容与颜色上都需要将企业健康、积极、向上的这一种代表“正能量”的形象，通过颜色传递给网站的用户。例如，下图所示网站是一个机械类金属制品的网站。为了体现网站产品的质感，页面中使用的主色调是金属色，这样就可以更好地从色彩的角度将形象表现出来。

3. 选择网页基本色

下面介绍几种网页常用的基本色。通过不止一种的颜色，在同一页同中的搭配使用，从而实现网站基本色的确立。

⑴ 选择暖色系作为网页基本色的方法

色彩有暖色和冷色之分，在确定使用暖色系作为网页的基本色后，可通过不同色系搭配，实现网站页面基本色的选定。下面介绍操作方法。

以暖色系中的红色为例，通过选择与其相似的颜色（例如粉色）可实现网页基本色的选择。具体操作如下。

如下图所示，确定页面基本色为红色，该页面适合以女性用户为主的行业，暖色调页面颜色搭配。页面的中心区域，同时也是面积最大的，选择红色为其主要颜色。在页面的两侧，分别采用与红色比较相近的粉色，实现页面的整体配色。

此页面效果的主要颜色选择，选定一种颜色之后，将与其相似的颜色作为选择对象，从而实现颜色搭配上的统一。按照左中右的顺序，颜色的RGB值如下。

左侧：RGB（241，158，194）

中间：RGB（235，104，119）

右侧：RGB（242，156，159）

⑵ 选择冷色系作为网页基本色的方法

有一部分网站，因为自身行业的关系，适合选择冷色系作为网页基本色。如果选择冷色系作为网页基本色，可通过下面的方法实现其基本色的配色。

下图所示是以蓝色、绿色冷色系为主的页面整体搭配。通过调整，页面左中右RGB的值如下。

左侧：RGB（0，255，255）

中间：RGB（0，160，255）

右侧：RGB（126，255，255）

总结网页基本色的选择，要将行业特点、性别因素、季节因素、体现氛围、表现形象等这些考虑进去，并通过色彩予以体现。只有这样选择网页基本色，才能使得最终的页面色彩受到用户的喜欢。同时，这也是比较合理的基本色选择方法。另外，在选择基本色的过程中，对于基本色的种数也需要有所限制，不能有太多种颜色，否则容易给页面浏览者眼花缭乱的感觉。

2.2 与行业特点相匹配的色彩选择

不同的颜色，可以体现不同行业的特点。在网页色彩选择过程中，采用符合网站自身行业特点的颜色，是常用的配色手法。通过颜色能够让用户在还没有浏览网站内容之前，大概了解网站是做什么的。以下通过具体实例，介绍选择与行业特点相匹配的色彩的方法。

1. 蓝色代表的行业

蓝色多被用于IT行业以及科技行业，作为网站的基本色。下面通过一个实例，介绍具体的色彩选择。

下图所示是IT行业中的著名企业微软的首页。分析其页面的颜色选择，蓝色为页面中的基本色，从中反映出与行业特点相匹配的色彩选择。该网站首页的具体色彩选择如下。

⑴ 网站文字颜色：网站中文字的颜色，虽然有别的颜色进行陪衬，但是主要以蓝色为主，其RGB值为（21，112，166）。

⑵ 网站Banner颜色：与网站中主要的文字颜色相同，在网站和Banner中使用了同样的RGB值为（21，112，166）的该种颜色作为网站Banner的主要颜色。

⑶ 网站Logo颜色：为了实现颜色上的统一，网站的Logo同样使用蓝色。

⑷ 图标的颜色：Windows、Skype应用图标均采用蓝色作为其图标的主要颜色。

⑸ 图片的颜色：网站中图片的主要颜色，以RGB值为（0，24，143）该种蓝色偏深的颜色为主。

另外，因为IT行业的从业人员男性人数要多于女性人数，所以这也反映出男性用户群对于网站页面配色的喜好。不同颜色的RGB值是不一样的，在颜色选择过程中，可通过调整其中的值，获得不同的蓝色效果，从而实现网站的配色。

2. 绿色代表的行业

绿色有着健康、环保的意思，医院的网站、环保行业多采用绿色为其网站的基本色。下面介绍色彩的选择。

以北京协和医院的网站为例，如下图所示，网站的主要颜色选择了绿色。然后通过调整RGB值，选择相近的颜色，实现网站的整体配色。具体的绿色应用在页面的比例占得比较多，下面进行具体分析。

⑴ 导航条：分析、观察网站的导航条，组成了色彩选择“绿色”的一部分。导航条具体的RGB值为（25，73，61）。

⑵ 网站Logo：网站的Logo由图和文字两部分组成。图采用RGB值为（0，80，36）的颜色，文字采用RGB值为（61，98，85）的颜色。这两种RGB值，都是绿色系的。

⑶ 文字颜色：分析网站的颜色选择，在字体颜色的应用上，网站同样选择了网站基本色统一的绿色。查看网站的文字，通过工具获知该网站字体颜色的RGB值为（16，91，73）。在颜色的选择上，通过调整其RGB值，来实现色彩在整体页面中的搭配效果。

⑷ 网站Banner：观察整体的颜色，在网站Banner中以绿色居多。这样的颜色选择，起到了在页面中颜色搭配统一的作用。

⑸ 图片的颜色：网站的首页，有使用图片。图片的选择，在颜色这一部分，同样采用了绿色系为图片中的主要色彩。同时，通过同一色系相关颜色的搭配，使网站的图片颜色变得美观。

另外，绿色属于冷色系，使用冷色系作为网页的色彩时，可以借鉴上述搭配效果。

3.土黄色代表的行业

土黄色有着泥土的象征，所以经常被用于建筑行业。另外，陶瓷多用土黄或者纯白作为基本色。因此，涉及这些行业类别的网站，建议采用土黄色作为基本色，较为贴切。通过下面的实例介绍具体颜色的选择，页面效果如下图所示。

分析上图页面的颜色选择，整个页面比较接近建筑行业的泥土、水泥颜色。这是此类网站颜色选择的一个特点。关于具体的不同区域的颜色选择分析如下。

⑴ 网站Logo：观察网站的Logo颜色，采用与黄色相匹配的黄色系，通过变动RGB的值，实现网站的Logo配色。下图（左）和下图（右）分别是Logo中不同的RGB值，整个Logo的黄色系没有采用固定的颜色值，而是在选择黄色系的基础上，对颜色进行了调整。

⑵ 导航 ：网站导航同样是在黄色系的基础上，通过不断变换RGB的值，来实现整个导航条的配色。这样让整个画面的颜色变得有光泽，而且页面颜色显得更鲜亮。

⑶ 文字：网站用于标题栏的黄色系配色文字的RGB值是（76，39，3），正文的字体颜色选择了比标题颜色相对浅一些的黄色系。

⑷ 图片效果：网站在图片的效果处理上，为了实现与整个页面的颜色搭配，以及色彩选择上的协调，色调同样是以黄色系为主。

除了已经介绍的这种颜色，下述颜色也代表着不同的行业。

金色代表的行业：钢铁、汽车这些公司的网站，多用金色作为基本色。金色让人联想到钢铁、汽车，所以这样的颜色选择才比较合理。例如，下图所示是一金色的汽车网站的页面。

粉色代表的行业：粉色多被用于以女性为主的购物类网站，或者是以女性用品为主的企业。例如，下图所示是一粉色的购物网站的页面。

水蓝色代表的行业：水蓝色多用于酒类行业、水产品、海产品相关的网站。例如，下图所示是一水蓝色相应行业网站的页面。

2.3 增强食欲的餐饮类网站色彩选择

餐饮类网站，为了吸引用户、突出网站自身的行业特点，会选择与此紧密联系的色彩。这些网站选择的色彩，除了体现行业特点，往往还能够有增强食欲的效果。什么样的色彩有增强食欲的效果呢？在这一部分进行具体介绍。

能够在一定程度上起到增强食欲效果的颜色，主要有橙色、红色。在这方面，肯德基、麦当劳的网站就比较典型。下图所示是肯德基的网站首页。

分析餐饮类网站 —“肯德基”，有着如下特点，以及增强食欲的色彩选择。

⑴ 导航颜色：在导航的颜色选择上，使用红色为主要的色彩构成。

⑵ 文字颜色：网站页面中的栏目标题，也都采用了红色。同时，在主导航中采用了黄色突出的字体颜色搭配方式。无论是红色还是黄色，都是能增加食欲的颜色。

⑶ 整体页面中的颜色比例：分析整个页面的色彩比例，占最大比例的分别是红色与黄色。

⑷ 颜色的种类：丰富的色彩能够达到吸引用户注意，增强食欲的效果，网站的颜色种类比较丰富。这样的色彩选择除了有增强食欲的特点，也使得页面中的颜色更具吸引力。

总结餐饮类网站颜色的使用，在颜色的选择过程中，使用了能够增强食欲的红色、黄色为页面中的主要颜色。同时，网站在颜色种类的选择上，采用了多样性的颜色搭配方式，这样也有利于增强食欲。

2.4 男性青睐的色彩选择

在进行网站设计规划时，如果网站的目标用户群以男性为主，在色彩的选择上就需要考虑使用男性青睐的颜色。例如，选择低明度、低纯度色调作为男性群体的色彩搭配，从而将男性潇洒的一面予以展示。

1. 男性青睐的色彩

分析颜色，男性青睐的色彩主要有如下几种（如下图所示），是配色过程中用于男性群体比较集中的网页基本颜色。根据年龄的不同，颜色的明度还是有着不同程度的变化。比如年纪稍微大点的男性选择衣服相比于年纪稍小的，在颜色明度的选择上要暗沉一些。图中的这些颜色，越往后的几种，年纪轻的男性相对来说会更喜欢。总之，无论是哪一种颜色，男性青睐的色彩都偏向于冷色系。

2. 在网站中的应用

了解到颜色的具体种类，下面结合网站中的颜色搭配，作进一步的探讨。针对男性用户群体居多的如网游、科技类等网站，在进行颜色的选择过程中，会以男性所喜欢的颜色为优先考虑对象。这些网站是如何进行颜色选择的呢？

以男性时尚网为例，如下图所示。网站的首页配色中，主要采用蓝、黑、灰这三种颜色，进而将男性的内敛、沉稳等个性特点，通过颜色予以诠释。

分析网站的色彩，总结其中受男性青睐的色彩的应用，主要有如下图所示4种。

2.5 女性青睐的色彩选择

假如网站的目标用户群主要是女性，需要将女性青睐的颜色作为网站的基本色。这样的色彩选择，更容易吸引网站用户。女性所青睐的色彩，与男性有着较大区别。一般来讲，女性更喜欢红色、粉色这样的色彩。色彩的色系主要为暖色系，具体的色彩选择下面将进行介绍。

1. 女性青睐的色彩

女性有着柔美、温柔的性格特点，进行针对女性群体的配色，需要做到过渡不能太大，颜色的反差也不能太大。针对这些特点，结合女性喜欢的红色、粉色为主的色彩，得到如下图所示一些女性青睐的常用色彩。

2. 在网站中的应用

在了解了相关的可供选择的颜色之后，通过具体的网站来进一步了解色彩的选择。以下图所示的新浪网女性频道页面为例，页面在颜色的搭配上选择了女性青睐的红色系。页面整体以女性青睐的颜色为主，同时配上零星的对比色（例如浅蓝的广告条），实现了全部颜色的搭配。

分析新浪女性频道页面中色彩的构成，使用的女性青睐的色彩，主要有如下图所示的4种。以红色、粉色、紫色这几种偏暖色调的颜色，通过选择深色调的处理方式，将女性的柔美进行了很好的诠释。

2.6 与季节对应的色彩选择

一年四季，春、夏、秋、冬有着非常鲜明的季节特点。例如，春天万物复苏，夏天有着强烈的光照，秋天是丰收的好时节，冬天那皑皑白雪是最好的见证。如下图所示，通过颜色的搭配，能够展现出四个季节不同的自然现象。为了将这些情感通过色彩传递给浏览者，在网页配色过程中可选择代表这些季节的颜色。

分别用一种颜色来代表春、夏、秋、冬这四个季节，下图所示的四种颜色，就比较有代表性，而且比较常用。

1. 不同的季节，分别可以有不同的代表颜色

⑴ 春天：一般用粉色系或者绿色调来代表春天，并将这些颜色作为该季节的色彩。春天可以见到一山的草绿，一树的嫩绿，一地的浅绿，一湖的翠绿这样别的季节所没有的景象。如下图所示，是一些比较适合代表春天的颜色。

⑵ 夏天：一般用黄色来代表夏天，抓住了夏天光照强烈的这一特点。另外，夏天因为天气热，需要有降暑行动，例如游泳、吃冷饮等。通过蓝色可以透出一份清凉的感觉，就又是一种颜色的选择。总结颜色季节特性，如下图所示，是常用于夏天的颜色。

⑶ 秋天：秋天枫叶红了，可以选择与枫叶颜色相近的红色。另外，秋天收获果实，可以选择用黄色或者菊色来搭配。如果为了表示植物的枯黄，例如树叶黄了、绿草黄了，用灰色也是不错的选择。总结秋天的特性，归纳颜色蕴含的不同感觉，如下图所示的颜色常用于秋天。

⑷ 冬天：冬天的植物都枯萎了，可以用黑色、灰色作为代表。如果用白色作为冬天的色彩，也是比较合适的，因为可以与冬天下雪联系起来。或者选择蓝色，代表雪的凉意，也是一种选择。同样，总结了一些适用于冬天的颜色，如下图所示。

对于四个不同季节色彩的选择，可以将某种颜色在某个季节的出现频率作为参考因素。例如，春天小草发芽了，大自然的颜色中会出现较多的绿色，或者是在春天开花的桃花的颜色（粉色系）等。因为不同的季节，有这些植物变化而来的不同色彩，有着明显的特征，也就是季节最好的代表色。

2. 体现季节色彩的网站

了解了不同季节所适用的色彩之后，这里通过与季节对应的色彩在网页中的应用，进而认识此类色彩的选择。例如，下图所示网页是通过春天播种时的绿色，以及秋天收获季节代表颜色的搭配来实现的。

2.7 体现都市氛围的色彩选择

都市氛围是怎样的呢？都市中有高楼大厦，高楼大厦中有白领，白领的生活节奏很快，从而让人感觉到都市快节奏的生活。以上这些心理感觉，将其反映在色彩上，包括都市其他的氛围，就可以着手选择体现都市氛围的色彩。

1. 体现都市氛围的色彩选择

体现都市氛围建议采用暗淡的色彩作为基本色。另外，也可以采用完全不同于基本色的透明感色彩进行搭配。如下图所示，除了低纯度的冷色系，以奶黄色为代表，对都市的透明感和丝丝凉意进行了展露。

除了上述的色彩选择，体现都市氛围的色彩选择，色调明度不宜过低，否则会减弱都市人干练、精英这样的职业印象。如果没有亮丽的颜色可以搭配，一般采用朴素的如灰色、黑色同冷色系的色彩进行搭配，从而展现都市给人的感觉。在基本色的选择上，建议采用朴素、暗淡的这一类色彩。

2. 体现都市氛围的网站

为了体现都市氛围，网站中可以使用上述配色方案，从而将页面的整体氛围与都市给人的感觉融为一体。例如，下图所示就是一个体现都市氛围的网站。页面中都市化的装修设计图片的应用，既能充分体现都市氛围，同时对于页面色彩效果的搭配体现也更有利。

2.8 体现自然氛围的色彩选择

自然氛围是怎样的呢？大自然可以让人在工作之余，得到身心上的放松。因此，贴近自然环境的色彩，更适合体现自然氛围。哪些色彩可以用于体现自然氛围，下面将进行介绍。如下图所示，是比较简单的页面中的颜色搭配。分析颜色的搭配，在页面的左右两侧分别采用了较浅的颜色，将比较深的颜色运用在相对较小的区域（中间），同时中间的服装颜色与页面左侧的颜色相近，这样的选择使页面间的颜色搭配更加合理。

页面中关于自然氛围的体现，主要通过选择接近大自然比较常见的黄色和绿色来实现。左右两侧的黄色和绿色的RGB值分别为：左侧RGB（239，200，161），右侧RGB（201，254，200）。

下图是常见的体现自然氛围的色彩搭配，下面分析页面中选择的颜色。观察图片可将其分成三个区域，每个区域由背景色、文字颜色和图形颜色组成。区域中的颜色经过搭配，体现自然氛围，每个区域自成一体。

根据上图的颜色搭配，分析归纳如下图所示的三组颜色搭配。其中前两组的颜色搭配分别采用绿色逐步加深颜色，以及紫色逐步加深颜色的方法。第三组的颜色搭配则选择了不同的颜色类别，使得搭配出来的效果同样贴近自然氛围。

1. 体现自然氛围的色彩选择

能够体现自然氛围的色彩，与自然景观也有着一定的联系。例如竹叶青、中国红、琉璃黄、长城灰、玉脂白、国槐绿等这些颜色，在名称中就将色彩的自然氛围得以突出。如果选择使用这些颜色来体现自然氛围，就变得非常可行了。

⑴ 中国红：基础色彩的RGB（230，0，0），可参与搭配的辅助色彩有RGB（137，0，24）、RGB（254， 40，14）、RGB（242，85，0），颜色效果如下图所示。

⑵ 琉璃黄：基础色彩的RGB（255，179，15），可参与搭配的辅助色彩有RGB（225，127，0）、RGB（217，162，19）、RGB（255，217，60），颜色效果如下图所示。

⑶ 长城灰：基础色彩的RGB（150，160，154），可参与搭配的辅助色彩有RGB（204，204， 184），颜色效果如下图所示。

⑷ 国槐绿：基础色彩的RGB（0，104，52），可参与搭配的辅助色彩有RGB（51，132， 33）、RGB（170，208，16），颜色效果如下图所示。

除了上述颜色可供选择，将浅木色和果绿色搭配（颜色如下图所示）作为体现自然氛围的色彩，也是一种方法。这样的搭配可以更好地体现自然，以及富有生命力的感觉。

2. 体现自然氛围的网站

将以上内容中所提到的体现自然氛围的色彩应用于网页制作中，搭配实现有着浓郁自然氛围的网页也就比较简单了。下图所示是有着自然氛围这一效果的网站的页面。页面中主要通过选择有着与自然界色彩一样的不同的色彩内容，从而完成整个页面的配色。

2.9 表现健康形象的色彩选择

健康是企业形象的重要组成部分，绿色可以表现健康。除此之外，通过灰色实现的搭配，可以给人一种稳重的感觉，足以达到提升形象、树立健康形象的效果。表现健康形象的颜色，通过以下内容给出答案。

1. 表现健康形象的色彩

下图所示的颜色搭配，达到了低调、不失个性的效果。通过这几种颜色，可以有效地将男性的健康形象进行比较好的展示。

除了上述颜色，下面几种颜色也可作为表现健康形象的色彩选择。如下图所示，这9种颜色主要用于展示男性整齐、稳定的形象，从而将这种健康的形象深入人心，进而给人留下较好的印象。

2. 体现健康形象的食品类网站

简单了解了健康形象的色彩，下面通过具体的网站来进一步认识体现健康形象色彩的选择。以下图所示的食品类网站为例，需要通过配色传递给用户健康的这样一种信息。该企业产品的主色调，选择了绿色。在这个产品的基础上，公司网站在页面颜色的选择上同样使用绿色为主色调。通过绿色可以告诉用户健康、纯净、亲近自然的产品理念。

除了主色调是绿色，在整体页面的搭配上选择了淡黄色作为强调色。通过这样的颜色搭配，使得整体页面变得生动、有趣味。页面在色彩上的灵动性，是色彩选择的参考因素。