上QQ阅读APP看书，第一时间看更新

第2篇进阶篇

本篇主要介绍网站配色的进阶知识，包括网站配色要领、网页设计中的色彩应用技巧、配色工具的使用、网站文字与色彩、根据网站色调配色、根据网站风格配色、根据网站类别配色以及根据网站区域配色等内容。通过本篇的学习，读者能掌握网站配色的方法。

▲第4章网站配色要领

▲第5章网页设计中的色彩应用技巧

▲第6章配色工具的使用

▲第7章网站文字与色彩

▲第8章根据网站色调配色

▲第9章根据网站风格配色

▲第10章根据网站类别配色

▲第11章根据网站区域配色

第4章网站配色要领

本章教学录像：9分钟

很多成功的网站都具备较为成熟的色彩搭配能力，并且以其独特的色彩搭配吸引着用户的眼球，从而使得用户过目不忘。进行网站配色，需要掌握组成网站的导航、主页面等配色常识。同时，也离不开配色技巧的合理运用。本章将详细介绍网站配色要领。

涉及对比色、邻近色的配色技术，以及色彩中叠加、柔光、透明度的应用，都是网站配色要领。在实施网站配色过程中，它们起着非常重要的作用。本章通过如下要点内容的介绍进行全面阐述，从而使大家对网站配色的技能有一个全面提升。

本章要点（已掌握的在方框中打钩）

□ 认识网页的版式结构

□ 熟悉 logo的配色常识

□ 熟悉导航、Banner 的配色常识

□ 熟悉页面的配色常识

□ 掌握网页的配色技巧

4.1 网页的版式结构

用户在浏览网页时，首先接触的是页面。因为心理学上有着“先入为主”的观念，所以最先反馈给用户的内容，往往也是用户印象最深刻的部分。一个网站版式布局结构的好坏，往往起着较大的作用。版式结构是网站引导用户阅读的重要方式，也是吸引用户阅读的重要手段，同时也是一个网站个性化的重要组成部分。网页布局结构主要包含以下几种形式：“国”字型网站结构、“吕”字型网站结构、“川”字型网站结构、“回”字型网站结构，这部分内容本节将进行详细介绍。

4.1.1 “国”字型网站结构

因为网站布局结构的样子同汉字“国”非常接近，由此得名“国”字型网站结构。这是目前最为常用的网站布局模式之一，较多地应用于大型门户网站。下面，将详细介绍“国”字型网站结构。

1. 认识结构

2. 色彩搭配

对“国”字型网站结构有了简单了解之后，下面通过这一结构网站的色彩选择，来进一步了解不同结构的网站在颜色上的具体应用。下图是一“国”字型结构的网站，分析该网站色彩的选择，采用几种不同颜色搭配而成。

分析上图的“国”字型网站，主要采用了白色、蓝色、黑色等颜色。其主要的色彩搭配及选择如下图所示。

4.1.2 “吕”字型网站结构

什么是“吕”字型网站结构呢？把网站页面分成上下两部分，每一部分分别有单独的网站结构可以编排，这种网站结构形式为“吕”字型网站结构。下面通过详细分析，帮助大家进一步认识此结构的内容。

1. 认识结构

不同于“国”字型网站结构，该结构将页面分成上下两部分，上半部分可以放置导航、LOGO、网站广告条等内容，下半部分可以放置网站的主要内容，以及其他没有放在上半部分又需要在该页面中进行放置的内容。归纳“吕”字型网站结构的特点，一般的形式如下图所示。通过调整分隔的区域间的距离，可以实现网站的不同布局。该结构因为无形中减化了结构，从而可以有效提升下载速度，这是“吕”字型网站的突出特点。

2. 色彩搭配

下面，同样用一个案例网站，如下图所示，来进一步了解这一类网站是如何进行色彩搭配的。网站主要选择了比较相近的几种颜色来进行页面框架部分的搭配，然后选择了黑色、白色以及红色作为网站的文字颜色。

分析上图“吕”字型网站的颜色选择及其具体搭配，结果如下图所示。

4.1.3 “川”字型网站结构

网站的版式结构中，将页面大致分成三列，将页面内容分别置于每一列中，这样的布局方式称作“川”字型网站结构。因结构的样子比较像汉字“川”而得名。关于“川”字型网站结构，请通过以下内容了解。

1. 认识结构

简单将“川”字型网站结构进行划分，可得如下图所示的左、中、右三部分。通过分别在每一部分中添加内容，实现网站的创建。有了内容，一个网页也就完整了。一般情况下，左侧或者右侧可以放置导航内容，以及其他引导用户去点击的内容。

此类结构的优点是：可以极大地增强首页内容的显示程度，信息量大。

此类结构的缺点是：访问时要滚动得很长，并且色彩不易协调。

2. 色彩搭配

认识了结构，同样通过一个网页来了解其色彩搭配的相关内容。下图所示是一个“川”字型结构的网站页面。页面结构被分成了三部分，以及若干个网站模块。下面详细介绍该页面的色彩搭配。

上图是“川”字型网站，分析该网站使用的颜色有红色、蓝色、白色、黑色等。具体的色彩搭配如下图所示。

4.1.4 “回”字型网站结构

关于“回”字型网站结构可以这样理解，网站的布局样式比较像汉字“回”，所以将该种类型的网站结构命名为“回”字型网站结构。该结构的主要特点在于，整个页面就像回字有两个边框围绕，形成了封闭区间，具体介绍如下。

1. 认识结构

“回”字型网站结构，与“同”或“匡”字型结构有着联系，不同之处在于“回”字型结构边框是封闭的。页面的底部或右部添加链接或者广告，就可将“同”或“匡”字型结构转化成“回”字型结构。例如下图是一个“回”字型网站框架，在底部蓝色背景部分可以添加相应的链接或广告。这是该结构区别于其他结构的地方。

2. 色彩搭配

在了解了“回”字型网站结构大概是什么样子之后，借用已经实现的“回”字型版式结构的网站，如下图所示，来简单了解此类网站在色彩选择以及搭配上的手法。

上图所示是一个“回”字型网站页面，分析其具体的色彩选择与搭配，采用了如下图所示白色、灰色、黑色等颜色。

4.2 网站配色常识

这一节介绍网站配色常识，分别从网站Logo、网站Banner、网站导航、网站主页面、网站子页面这几部分来阐述。这样可以帮助大家提升网站配色技能，从而更好地实施网站配色。

4.2.1 网站Logo的配色常识

Logo的配色，除了考虑网页中使用，还需要考虑在其他媒介中的应用。鉴于上述原因，选择颜色搭配时，除了注重RGB的颜色效果，还需要注重CMYK的颜色效果。关于网站Logo的配色常识，下面进行介绍。

1. 适用于Logo配色的色调

下图所示是一些适用于Logo配色的色调，主要有纯色系、灰色系、暗色系三类，这三类又分别被分成若干色调。

2. 渐变的应用

因为Logo的色彩种类一般不适宜太多，配色过程中往往借助渐变使得色彩间搭配的过渡没有间隙。所以，将基本色渐变处理使用于Logo的配色中，是一种方法。下图所示是色彩的渐变实现，根据不同的饱和度渐变以及明度渐变，最终完成色彩的渐变处理。

3. Logo配色的实现

这一部分通过看几个Logo的色彩选择，来进一步了解Logo的色彩选择，以及一个Logo不同颜色之间的配色。

方案一：本方案Logo的颜色，采用白色与红色的搭配。文字与图形使用白色，背景色用红色实现，如下图（左）所示。

该方案采用的具体颜色及其颜色值如下图（右）所示。

方案二：本方案通过不止一种的颜色来实现Logo的颜色搭配，进而提升美观度以及可欣赏性。以下分别是几组搭配处理的实例Logo，根据具体内容进行分析。

⑴ 橙色系：下图（左）所示是橙色系的Logo配色。将橙色以及与橙色相近的颜色，同白色进行搭配之后，可以得到一个和谐的效果，这样的色彩搭配显得比较合理。中纯调的颜色搭配，采用的颜色可通过下图（右）中的参数值获取。

⑵ 黄色系：下图（左）同样采用了两种相近的颜色以及白色进行搭配，实现了黄色系Logo的设计。分析颜色的使用，采用的颜色可由下图（右）所示CMYK值获取。

⑶ 绿色系：这一款绿色系的Logo同样采用相近颜色以及白色与绿色进行搭配，效果如下图（左）所示。换了一种色系，使得Logo又变成另一种风格、情感了。在颜色选择上使用了下图（右）所示的类别。

⑷ 蓝色系：同样比较常用的颜色搭配，有如下图（左）所示的蓝色系效果。通过蓝色与白色的搭配实现设计效果。该Logo的配色请参照下图（右）所示的具体参数值。

方案三：一般Logo在选择颜色时，会采用两种或者两种以上相似的色彩进行搭配，从而实现整个配色效果。这一部分，不同于常规手法，分别采用三种不同的颜色进行搭配，来实现Logo的整体配色。通过下面的几个实例，介绍另一种关于Logo的配色方法。

⑴ 绿色+橙色+白色：在Logo中因为体积小，如果颜色种类多，在颜色的选择上就需要考虑对比色或者相近色系来搭配。下图（左）所示Logo以绿色为背景，选择对比色白色与橙色作为图形、文字的颜色，使得搭配比较和谐。

下图（左）采用的颜色的CMYK值分别为白色（0，0，0，0）、绿色（75，10，88，0）、橙色（3， 29，74，0），具体如下图（右）所示。

⑵ 蓝色+橙色+白色：有着对比效果的颜色搭配，蓝色、橙色、白色的组合，也是一种方法。下图（左）采用的就是这样的配色。关于具体的颜色CMYK值，可参照下图（右）所示的内容。

⑶ 橙色+黄色+白色：黄色与橙色是一组比较接近的颜色，通过选择不同亮度的黄色与橙色，从而实现Logo中的对比效果。具体的色彩搭配及其应用，可参照下图（左）所示的Logo颜色。

这一款Logo采用的橙色、黄色、白色的具体CMYK值，通过下图（右）所示的内容可以获得。

⑷ 黄色+蓝色+白色：黄色、蓝色、白色的搭配，也有着明显的对比效果。下图（左）所示的Logo就将其实现了。通过在背景以及图形中选择不同的对比颜色，从而实现了Logo的整体配色。颜色使用的CMYK值，请参照下图（右）所示对应的颜色。

4.2.2 网站Banner的配色常识

Banner往往包含有图片，这时就需要考虑“动态色彩”如何实现统一、和谐的色彩搭配，从而使这些动态色彩与静态色彩实现很好的搭配、处理。上述内容都是网站Banner配色过程中需要考虑的因素，下面具体介绍配色常识。

1. Banner风格

不同风格的Banner，在进行颜色搭配时，有着不同的色彩选择以及色彩效果的实现。这一部分通过几种不同风格的Banner，帮助大家了解其具体特点。

⑴ 时尚的风格：下图所示分别是两款时尚风格的Banner。观察其界面有着不同的颜色搭配，分析其设计构成有着共同的特点。两款Banner分别采用大标题，添加模特图片，以及比较像时尚流行杂志的搭配，这是相同之处，也是时尚风格Banner常用的设计模式。

⑵ 复古的风格：通过传统手工艺，例如剪纸艺术，或者是书法字体配合有着水墨感觉的图案，都是进行复古风格Banner设计时可以使用的方法（如下图所示）。另外，在颜色的选择上以黑、蓝、中国红等比较适用。

⑶ 清新的风格：同样通过一个Banner来了解清新风格的配色是如何实现的。下图所示通过白色与绿色的搭配，对自然系中清爽、轻盈的感觉进行了很好的诠释。整体的清丽和透亮是在清新风格配色时需要着重注意的地方。

⑷ 炫酷的风格：如果想要Banner的风格显得炫酷，可以采用深色背景，再加上光影特效就会有比较好的效果。例如，下图所示是一个宣传Banner，在深蓝背景下，通过文字以及亮色图形的点缀，使得炫酷效果得以很好的体现。

⑸ 简约的风格：简约的风格无论是网页还是Logo都比较常用，也是Banner中使用比较多的一种风格。此风格往往体现空间比较大的理念，整个版面在内容上空白的地方比较多。同时，对图像、文字等元素的修饰以及相关处理比较少，崇尚原始的效果。例如，下图所示的Banner给人感觉没有扩张的内容。

2. Banner的配色实现

上述内容对于不同风格的Banner进行了简单介绍，从中可以初步了解到Banner颜色应用的相关知识。以下通过介绍具体的颜色使用，来了解Banner的配色实现。

无论是页面还是Banner的配色，处理上都是一样的，即通过调整构成色彩的色相、明度或纯度最终实现配色处理。因为这些因素，使得不同的色彩拥有了不同的情感，从而带给浏览者不同的心理感受。在进行Banner设计时，要体现想让用户知道的情感，并且符合页面的主题内容，以这样的宗旨为出发点就不会有问题了。以下四个方案，可以作为借鉴。

方案一：因为Banner中配图是夏装，所以整个颜色搭配需要传达给浏览者夏天的色彩。这里选择了浅色系来搭配整体颜色，主要采用的颜色有如下图所示粉红、浅蓝、淡黄、浅粉、浅绿这几种。在整体效果上，给人一种充满了热情的夏日情感。

方案二：在进行Banner色彩搭配过程中，选择纯度较低的进行搭配，更容易凸显整个页面搭配上的和谐，使色彩在同一页面中变得更加自然，从而传送给用户轻松、舒适的色彩情感。例如，下图所示这几种颜色搭配起来的Banner就有着这样的效果。

方案三：红色有着华丽的韵味，黑色是永恒不变的颜色，将这两种颜色与金色进行搭配，色彩中摩登、华丽的感觉就能够很好地展现了。例如，下图所示就是采用这种方式进行颜色搭配的。

方案四：绿色或者褐色都是在森林里比较常见的色彩。这样的颜色搭配，可以透露出自然的青春气息，同时也给浏览者一种安静的感觉。具体的搭配操作及颜色选择可参照下图实现。

4.2.3 网站导航的配色常识

网站的导航条有着引导用户浏览的作用。如何通过配色，将导航条的这一功能予以发挥，是在对导航条进行配色的过程中，需要着重考虑的。同时，因为导航的形式不同，需要选择的颜色也会有所不同。怎样让网站导航的配色能够更合理呢？通过下面介绍的关于导航的配色常识，就可以实现。

1. 导航配色离不开“技术”应用

导航就像网站的“眼睛”，引导用户通过导航去浏览整个网站。鉴于上述原因，在对导航进行设计制作的过程中，往往采用一些“技术”，例如色彩的“叠加”、“渐变”等，从而突出导航在页面中的位置。

⑴ 叠加实现：例如下图（左）是没有进行叠加处理的导航按钮效果，下图（右）是应用了色彩叠加后的效果。无须更多的修饰，这样足以让导航按钮在页面中备受观注。

提示

如果对色彩进行光效处理，“高期模糊”和“叠加”是最常用的方法。在制作过程中合理应用这些，可提升作品的色彩搭配效果。

⑵ 渐变实现：下图所示是苹果网站的导航条。苹果在设计上的一些理念，很受广大用户的喜欢。通过此导航条，通过灰色的运用，使该色彩的搭配及其处理手法得以完美的展示。除此之外，在导航条中使用的渐变处理，是将灰色这种本来给人沉闷的颜色变得活跃的重要原因。

2. 实现导航配色

除了上述介绍的网站导航会采用的“技术”之外，在颜色的选择上，通过使用具有跳跃性的色彩，可达到吸引浏览者视线的目的。同时，可将网站的结构及其层次，清晰、明了地展现给用户。下面通过一个实例，来了解网站导航的配色实现。

下图（左）所示是网站的导航内容。观察其颜色，采用了蓝色背景、白色文字的搭配。导航中使用的颜色值及其导航功能，可通过代码获取。

获取代码，通过查看该网页的源代码来实现。具体方法是：

以IE浏览器为例，单击菜单栏中的“页面”下拉列表菜单，如下图（右）所示，在其中选择“查看源文件”选项即可打开网页源代码的页面。

以上图（左）的导航为例，该网站源代码中，实现配色及导航功能的代码如下。

    01 <style type="text/css" >
    02 #button {
    03    width: 12em;
    04    border-right: 1px solid #000;
    05    padding: 0 0 1em 0;
    06    margin-bottom: 1em;
    07    font-family: 'Trebuchet MS', 'Lucida Grande',
    08     Verdana, Lucida, Geneva, Helvetica,
    09     Arial, sans-serif;
    10    background-color: #90bade;
    11    color: #333;
    12    }
    13 #button ul {
    14      list-style: none;
    15      margin: 0;
    16      padding: 0;
    17      border: none;
    18      }
    19    #button li {
    20      border-bottom: 1px solid #90bade;
    21      margin: 0;
    22      }
    23 #button li a {
    24      display: block;
    25      padding: 5px 5px 5px 0.5em;
    26      border-left: 10px solid #1958b7;
    27      border-right: 10px solid #5ba3e0;
    28      background-color: #2175bc;
    29      color: #fff;
    30      text-decoration: none;
    31      width: 100%;
    32      }
    33    html>body #button li a {
    34      width: auto;
    35      }
    36    #button li a:hover {
    37      border-left: 10px solid #1c64d1;
    38      border-right: 10px solid #5ba3e0;
    39      background-color: #2586d7;
    40      color: #fff;
    41      }
    42 </style>

暂且不去细分代码功能，总结该导航中使用的颜色，主要有以下几种颜色值：#000、#90bade、#333、#195876、#5ba3e0、#2175bc、#fff、#1c64d1、#2586d7。

4.2.4 网站主页面的配色常识

前面介绍的关于Logo、Banner、导航的配色，都直接关系到主页面的色彩选择。因为主页面的色彩需要将Logo、Banner以及导航进行协调统一的全局性考虑。主页面在色彩选择上，往往会与Logo、Banner以及导航这些已有的颜色相同、相似或者是对比明显。具体的配色常识，下面进行介绍。

1. 页面配色步骤

对页面进行配色，需要考虑到页面是一个整体，根据页面配色步骤，能够起到把握全局的作用。同时，可以保证页面色彩不至于产生杂乱无章的现象。具体步骤如下。

⑴ 根据页面风格以及产品本身的诉求确定主色：页面中有主要色彩、辅助色彩，以及其他色彩等。确定页面的基本色，是对页面进行配色的首要任务。根据产品的特点以及页面想要的风格，能够对应选择出一些色彩供参考，最终选择最符合条件的作为页面的主色。

⑵ 根据主色找配色：在页面的主色确定之后，参照色彩搭配的原则，查找适合与主色搭配的相关色彩。例如，白色可以是很多色彩的配色。如果将白色作为主色，其配色的选择范围就比较广。

⑶ 调整色彩在页面中的比例：色彩选择确定之后，在进行色彩添加的过程中，根据不同色彩在页面中的“色彩面积”不同，调整色彩在页面中的实际面积，从而使色彩在页面中变得协调、统一。

2. 实现主页面配色

下面通过几个配色方案，来了解主页面配色的实现。

方案一：红色+白色

可口可乐公司在2011年，将网站页面制作成如下图所示的效果。采用深红色、浅红色、白色这三种色彩，实现整个页面的配色。

其中：

① 文字采用白色，与红色有着鲜明的对比效果。

② 红色的应用，将气氛进行了很好的渲染，从而传递给用户的感觉是比较有活力的。

③ 除了主要的颜色搭配之外，页面中还采用了黄色、橙色作为点睛色。同时，一些文字中浮光效果的使用，使画面更活泼，对比更鲜明。

网页中使用的主要颜色深红、浅红、白色，其具体值如下图所示。

方案二：红色+白色+黑色

下图所示页面中，文字使用了灰色。灰色与其他颜色的搭配，不会有不融洽的感觉。该页面通过红色、白色、黑色与灰色的搭配，使灰色导航栏的过渡变得融洽。

其中：

① 红色作为图片、图标的颜色，能够在黑色背景色中凸显出来，达到了醒目的效果。

② 白色的文字，通过大小不同的字体进行搭配，使得页面不再沉闷，有活跃感。

③ 页面使用的灰色，使得过渡效果更好了。

网页中使用的主要颜色红色、白色、黑色，其具体值如下图所示。

4.2.5 网站子页面的配色常识

子页面是从属于主页面的，往往是主页面的下一级，这就需要在配色时考虑到这些内容，使得用户不会因为翻页而产生“陌生”感。具体的子页面配色常识，通过下面这部分内容来进行详细分析。

1. 页面配色步骤

前面已经介绍了网页主页面的配色步骤，子页面的配色步骤可以参照它实现。不同于主页面需要实现的配色在于，子页面需要将配色与主页面的头部和尾部有一个相同的处理。一般在子页面中，我们可以看到相同的导航、Logo等头部内容，以及尾部相同的网站信息等。

2. 实现子页面配色

子页面的配色，可以参照主页面。下图（上）所示是网站的主页面。将其与下图（下）所示的子页面进行对比，子页面的中间部分与主页面有所区别。页面中顶部和底部，无论在子页面，还是在主页面，都有着相同的Logo、导航、网页信息。所以，页面的顶部和底部，在配色时一定要做到主页面与子页面相同。

观察上图（下）所示子页面，导航中采用黑色、蓝色进行搭配，Logo选择了蓝色，文字使用黑色、灰色以及蓝色。如下图所示，是子页面的配色。

4.3 网页配色技巧

无论是网页的配色，还是其他部分的配色都是讲究技巧的。只有借助技巧，才能更好地发挥出配色带给页面的视觉体验。巧用不同效果的配色，可以提升页面的绚丽程度。以下主要介绍几种不同的配色方案和配色技巧。

4.3.1 巧用对比色配色

在对网页进行配色的过程中，巧用对比色进行色彩的搭配，往往会有意想不到的效果。下面对对比色配色，进行具体介绍。

1. 什么是对比色配色

在配色过程中，使用有对比效果的颜色，如橙与青、黄与紫、红与绿等色彩，组成页面的色彩，属于对比色配色。例如，下图所示就是对比色的效果，分别是红与绿、黄与紫的对比。

对比色可以是色环中相差不到180度的两种颜色，相互之间的角度如果越大，也就意味着对比度越大。

2. 配色实现

在重点内容部分采用主色调的对比色可以起到重点突出该内容的作用，有着“画龙点睛”的效果。下面通过网站对对比色的配色进行分析。

橙色的对比色—蓝色，实现在同一网站页面中的色彩搭配，同样可以达到很好的色彩效果。如下图所示网页，采用的就是这样的配色。

分析上图橙色与蓝色的配色实现，在HSB值中正红的H为0，正橙的H为30，橙色是往零移动进行调配的，所以该橙色是H值为26的橙红色。再看点睛色蓝色，RGB的G值为160，HSB的H值为192，不属于正蓝色。这样的目的在于降低蓝色的特性，从而使得已经在明度与饱和度达到最高值的橙红色能够实现与蓝色的调配。

在对比色配色的过程中，需要有辅色调作为过渡色来调和对比色。这里采用了白色，作用在于调和橙红色与蓝色。对比色非常能够突出个性，为了在画面中能够将配色协调处理好，除了上述方法之外，在页面处理上也可通过面积位置的不同，来处理页面的整体效果。

4.3.2 巧用邻近色配色

巧妙地将邻近色应用于网页的色彩搭配，也是一种配色的常用办法。下面具体介绍邻近色配色的选择及其相关内容。

1. 什么是邻近色配色

下图所示的色相环中，相互靠近的不同颜色属于邻近色。例如紫色与红色、黄色与绿色，以及橙色与黄色等。这样的颜色应用于网页设计中，在配色上容易取得多样、和谐的效果，是一种比较常用的配色手法。

在配色过程中，选择色相环中不同的邻近色进行搭配，实现页面的色彩处理，同样可以达到理想效果。例如，下图将邻近色黄色与绿色进行叠加，就能够营造出山林般的色彩感觉。

2. 配色实现

在邻近色配色实现的部分，同样通过实例网站进行介绍。分别用两个不同类型的邻近色配色效果的实现，来介绍具体的实现方法。

下图所示的网站，采用了橙色的邻近色配色。页面主要由黄色和橙色这两种颜色构成，它们本身就是邻近色。通过调整色彩的明度和纯度，获得使用于该网页中的浅黄和橙红。同样，在色彩的面积位置上进行了合理编排。色彩均属于暖色调，这样的搭配使得色彩在页面中能够趋于缓和，整体效果比较统一。

4.3.3 巧用冷暖互补配色

色彩有冷色、暖色之分，将不同的颜色通过搭配，实现冷暖互补的效果，从而达到色彩相互间的一种平衡，是配色的常用方法。下面主要介绍冷暖互补配色在网页中的实现。

1. 什么是冷暖互补配色

下图所示的网页，有着属于冷色的绿色，有着属于暖色的红色。这样的搭配，实现的就是冷暖互补效果。作为强调色的红色，同绿色的网站标识形成了鲜明的对比效果。然后，页面中其他颜色选择使用这两种颜色的亮色、灰色调和暗色，从而完成整个页面的颜色搭配。

观察网站，视觉效果上有着非常柔和的色彩融合，不会因为有着强烈对比的色彩使用，使页面变得过于耀眼。这就是冷暖互补能够起到的“平衡”作用。建议在网站的配色上，可参照网站中灰色调和暗色的使用。

什么是冷暖互补配色呢？暖色是指让人有着温暖、热情的心理感觉的颜色，例如下图所示色轮中的紫色到黄色范围内的各种色彩。反之，冷色是会给人冬天的寒冷、雪、冰等心理感觉的颜色，例如下图所示色轮中的黄绿色到紫色范围内的各种色彩。

在选定一种色彩之后，可以选择该色彩在冷暖色方面相反的颜色，即该选定颜色的互补色作为配色。例如，选择红色作为主色，该颜色属于暖色，那么冷色中的绿色是它的互补色；选择绿蓝色作为主色，该颜色属于冷色，那么暖色中的红橙色是它的互补色，其他互补色依此类推。将洋红色与绿色并列，会显示出洋红色的更红、绿色的更绿，这是因为在洋红色与绿色彼此交接的边缘分别引发其补色绿色和洋红色，所以加强了个别色彩的颜色，产生了洋红色更红、绿色更绿的现象。

2. 配色实现

色彩学上称间色与三原色之间的关系为互补关系。在色轮中互补色是颜色相对应的颜色，即色盘中的相反色调，并且也是对比最强烈的颜色。例如红色的互补色是绿色，黄色的互补色是紫色等。如果将互补色并列在一起，则互补的两种颜色对比最强烈、最醒目、最鲜明。红与绿、橙与蓝、黄与紫是三对最基本的互补色。例如，下图所示网站采用了橙色与蓝色的互补配色进行搭配，具体的颜色搭配参照图中给出的颜色值以及颜色图。