1.1 色彩基础知识

色彩是一种非常微妙的东西，是我们平常很常见的、熟悉的事物，从生活中的衣食住行，乃至大自然中的山川河流，都少不了色彩的“身影”。下面将介绍一些色彩的基础知识，以帮助我们认识色彩。

1. 色彩的形成

我们看到的色彩，并不是物体本身固有的，而是物体本身吸收和反射光波的结果。分析色彩的形成，主要是通过以下几方面实现的。

⑴ 通过物体本身的反射，所形成的一定的色彩。

例如下图所示，在灯光的照射下，房子本身所形成的色彩效果。这里我们可以看到灯光，但是折射的光线会比灯光来得暗。因而，物体也就有着明暗不同的光线照射下的效果。

⑵ 通过光源的照射，所形成的一定的色彩。

以下图所示建筑为例，在页面下半部分，可以清楚地看到不同于建筑，又有着建筑轮廓的色彩及形状。这就是通过光源的照射所形成的色彩。

⑶ 由于物体色彩受环境的影响，所形成的一定的色彩。

以下图为例，页面中下半部分较亮部分的区域，有着灯光的反射，但因为受到湖面环境的影响，其中的色彩明显要暗于实际灯光的颜色；同时因为环境的影响，也有着光线反射不充分等现象。

⑷ 由于物体色彩受空间的影响，所形成的一定的色彩。

下图所示是一室内屋顶的吊灯，因为受空间的影响，屋顶是封闭的，所以该光线的整体效果其顶端除了灯光自身以外其他部分要明显暗于底下有灯光照射的部分。这是一个常见的受空间影响的色彩效果。

2. 色彩的类型

色彩一般被划分为三个类型，如下图所示，即光源色、固有色和环境色。下面一起来认识一下这三种类型。

⑴ 光源色

光源色是指由各种光源发出的光。因为太阳光、灯光等不同光源发出光的光波长短、强弱、比例性质不一样，所以表现成各种各样的色彩。

相比之下，太阳光比灯光的光线要充足。因为不同光线的这一性质，加之在光线吸引的多少上又有不同，也就使得光源色相互之间有着不同的色彩。

⑵ 固有色

固有色是指物体自己本身的颜色。因为物体固有的属性，在常态光源下也是会有色彩呈现的，所以就形成了物体的固有色相。

例如，下图所示页面中草莓、橙子、水与水杯，以及布帘的颜色是固有色。因为这些颜色在当时是固有的，也是所有该类物品所固有的。虽然会受到光线等的影响，但物体自身的颜色是固有的。

⑶ 环境色

环境色是指物体周围环境的颜色反射到物体上的颜色。因为物体表面受到光照后，在一定程度上吸收了一些光，但还有一部分是反射到周围物体上的。例如有些物体的反射效果特别强烈，所以我们需要在网站设计时考虑环境色的影响。

因为环境色会根据所处环境的不同而在颜色上发生一定的变化。例如，同样是反射到物体上的颜色，在户外由于所处环境不同，光源更加充足，该物体的环境色和光源色也就不一样了。

3. 色彩的三个属性

色相、明度和纯度是色彩的三个属性。不同的颜色会给浏览者不同的心理感受，所以我们需要非常清楚地认识色彩的属性。关于色彩属性的详细内容，在1.4节中将进行介绍。

例如，下图所示上、中、下三排，分别可以进行色相、明度、纯度的区别。

上排：左边的色相是蓝色，右边的色相是红色。

中排：同一种颜色蓝色，亮一些的明度高，暗一些的明度低，形成了对比效果。

下排：同一种颜色青色，左边的杂质多、纯度低，右边的纯度比左边的要高得多。

5

4. 色彩性质的分类

因为三原色（所谓的红、绿、蓝就是三原色）中，红色属于暖色，其他两种都不是，所以设计时可以通过红色所占比例的多少来进行作品颜色冷暖的判断。不同的色调(如下图所示)所反映的色彩性质是有区别的，下面进行具体分析。

⑴ 暖色调

以红色、橙色、黄色为代表的暖色调，蕴含着太阳、火焰般的视觉热情，给人心里温暖的感觉。如果想在暖色调中带上偏冷的感觉，可通过亮度的调整。亮度越高，越偏冷。例如下图所示网页，是属于暖色调的色彩搭配。

⑵ 冷色调

以绿色、蓝色、黑色为代表的冷色调，蕴含着蓝天、大海、森林般的视觉效果，给人心里宽广、深沉的感觉。同样，可以通过调整亮度，让冷色调变得暖起来。例如下图所示网页，是属于冷色调的色彩搭配。

⑶ 中性色调

以灰色、紫色、白色为代表的中间色，给人一种轻快的感觉。需使用中间色的时候，一般会将之作为一个过渡色调来应用。然后搭配暖色或者冷色，让视觉冲击变得更加明显。例如下图所示网页，是中性色调在页面中的应用实现。

7

1.2 认识网页色彩

用户浏览网站，第一印象或许并不是合理的版式布局，而是应用于网页中的色彩。一个网站是否优秀，在一定程度上同设计师的色彩运用和搭配有着密不可分的关系。这就要求我们对于网页色彩有着深刻的认识。这节以下几方面的内容，将帮助我们认识网页色彩。

1. Web 216安全色

Web 216安全色，即指216种网页安全色，可以在网页中安全显示，不会因为操作系统不同、浏览器不同而使得色彩产生偏差。通过在Windows操作系统中进行显示模式切换来认识。该操作系统下的效果与Mac OS、Linux等操作系统的颜色效果是一样的。下面的切换操作，主要是为了帮助我们认识并记住这216种网页安全色。因为现在电脑的显示要求越来越高，所以一般配置的电脑对该颜色模式不是默认的，需要进行切换操作。具体操作如下。

1 鼠标右击桌面图标“我的电脑”，在弹出的快捷菜单中，选择“属性”命令，打开如下图所示的对话框。

2 在弹出的“显示 属性”对话框中，选择“设置”选项卡，如下图所示。在其中的“颜色质量”下拉列表框中，选择“中（16位）”选项，就切换到了256色模式。

计算机在256色的显示环境下可以正确显示216色网页安全色。这216种颜色具体是哪些，将在1.3节进行介绍。因为256色环境下，其中就包含了216色网页安全色。更高的色彩环境，当然也包含了网页安全色，只是色彩种类越多，要想分辨其中的网页安全色也就越难。所以在256色中，所包含的各种色彩，由于只差几十种，也就表示基本就是网页安全色了。这样偏差也就小多了，因为要记住216种颜色毕竟不是一项能够马上完成的任务，需要我们花时间记忆。既然有这样快捷的方法，何不轻松借用？

2. 网页色彩模式

色彩的模式可以分成Lab、RGB、CMYK、Indexed等，其中CMYK常被用于出版印刷，设计网页时是用不上的。Lab模式，其颜色设计与设备是没有关系的。在进行网页设计的过程中，因为CMYK用于印刷行业，Lab受到使用颜色文件的设置影响，所以主要使用RGB色彩和Indexed色彩这两类。

⑴ RGB色彩

RGB模式中，显示器的每一个像素点都赋予了0~255的三个值，分别用R、G、B来表示。R是红色（Red）的缩写，G是绿色（Green）的缩写，B是蓝色（Blue）的缩写，通过RGB的值混合得到最终显示在屏幕上的色彩。因为这个模式适合所有显示器所能显示的图形，所以网页图像都会在RGB模式下进行开发。

下图是图形图像类软件Photoshop中的“拾色器”对话框，在进行网页图像开发的过程中，通过调整其中R、G、B右侧文本框中的值，可以改变色彩。

⑵ Indexed色彩

Indexed色彩模式，在进行滤镜处理时，效果不太理想。因为该模式有着存储空间小的优势，所以才会被多媒体制作和互联网频繁应用。例如，保存GIF格式等网络图像，不妨采用这种模式。其在有效缩减图像文件的大小、适度保持图像文件的色彩品质方面，优势非常突出，很适合制作放置于Web页面上的图像文件。

Indexed模式就是索引颜色模式，也叫做映射颜色。在这种模式下，只能存储一个8bit色彩深度的文件，即最多256种颜色，而且颜色都是预先定义好的。一幅图像所有的颜色都在它的图像文件里定义，也就是将所有色彩映射到一个色彩盘里，这就叫色彩对照表。因此，当打开图像文件时，色彩对照表也一同被读入了Photoshop中，Photoshop由色彩对照表找到最终的色彩值。

⑶ Lab色彩

Lab模式既不依赖光线，也不依赖颜料，它是CIE组织确定的一个理论上包括了人眼可以看见的9所有色彩的色彩模式。Lab模式弥补了RGB和CMYK两种色彩模式的不足。

Lab模式由三个通道组成，但不是R、G、B通道。它的一个通道是亮度，即L。另外两个是色彩通道，用A和B来表示。A通道包括的颜色是从深绿色（底亮度值）到灰色（中亮度值），再到亮粉红色（高亮度值）；B通道则是从亮蓝色（底亮度值）到灰色（中亮度值），再到黄色（高亮度值）。因此，这种色彩混合后将产生明亮的色彩。

例如，下图所示的Photoshop中的颜色模板中，Lab模式的色彩值是比较常见的。但是，由于受设备的影响，在表达色彩范围上，处于第一位的是Lab模式，第二位的是RGB模式，第三位是CMYK模式。

⑷ CMYK色彩

例如，下图所示是Photoshop中常见的CMYK色彩模式。这一部分让我们来认识该色彩模式。当阳光照射到一个物体上时，这个物体将吸收一部分光线，并将剩下的光线进行反射，反射的光线就是我们所看见的物体颜色。这是一种减色色彩模式，同时也是与RGB模式的根本不同之处。不但我们看物体的颜色时用到了这种减色模式，而且在纸上印刷时应用的也是这种减色模式。

按照这种减色模式，就演变出了适合印刷的CMYK色彩模式。CMYK代表印刷上用的四种颜色：C代表青色，M代表洋红色，Y代表黄色，K代表黑色。因为在实际引用中，青色、洋红色和黄色很难叠加形成真正的黑色，最多不过是褐色而已。因此才引入了K——黑色。黑色的作用是强化暗调，加深暗部色彩。CMYK模式是最佳的打印模式，RGB模式尽管色彩多，但不能完全打印出来。

1.3 Web 216安全色

因为不同浏览器有着不同的调色板，所以在浏览器中打开的网页的色彩可能会有误差。浏览器通过选取本身所用调色板中最接近的颜色，或者通过抖动以及混合自身颜色的方式，将浏览器中没有的颜色重新产生。为了解决变动让颜色不产生变样的安全色问题，在网页设计过程中将Web 216安全色（即网络上的安全色）用作网页的色彩。

Web 216安全色是一种颜色模型，采用十六进制方式表达。具体以三原色红、绿、蓝为主色调，然后将每一种三原色接近的6种颜色作为组成部分，从而形成216种特定的颜色。这些颜色可以安全地应用于所有的Web中。下图所示是全部的216种颜色。

1.4 色彩的三要素与色立体

每一种色彩（除了无彩色）按照属性分类，都具有色相、明度、纯度这三种基本属性，又称色彩的三要素。无彩色有黑、白、灰三色。无彩色只有明度变化，而没有色相和纯度。色立体是一种科学的色彩表示方法，为人们提供了一个抽象的色彩世界。目前采用最多的色立体有：美国的孟赛尔色立体（如下图（左）所示）、德国的奥斯特瓦德色立体（如下图（右）所示）和日本色彩研究所。这一节内容，将详细介绍色彩的三要素。

1.4.1 色彩的色相

什么是色彩的色相？指颜色、色彩的显著特征，可以将其看作色彩的相貌，通过为色彩命名的方式，用不同的名称来区别色彩种类。红、橙、黄、绿、蓝、紫等都代表一类具体的色相，它们之间的差别就属于色相差别。在各色中间插入一两个中间色，就可形成色相环。色相环可以是十二色相组成的，如下图（左）所示；也可以是二十四色相组成的，如下图（右）所示。

通过这一部分，对上述色相类别下页两图移此的了解，可以帮助我们进一步认识色彩。因为如果给出一个颜色，最常用描述它的方法就是用色相名来进行的。例如，红色的色相就属于红。具体的色彩远不止色相环中的这些，我们对色彩进行分析、划分的过程中，往往是用色相环中的这些色相（即12种或者24种色相）来将色彩进行归纳的。

总之，色相是表明不同波长的光刺激所引起的不同颜色的心理反应。色相与色调有着不可分的紧密关系。在设计中，一般都会将颜色根据波长的不同分成三部分，分别是长波长光、中波长光、短波长光。其中，长波长光属于暖色调；中波长光属于中性色；短波长光属于冷色调。

1.4.2 色彩的明度

色彩的明暗情况和深浅程度，称为色彩的明度。大家要注意，明度不等于亮度。只有当颜色的亮度反映在人们视觉上，从感觉上说明的颜色性质，才属于明度。因为受到物体所处环境色的影响，观察物体颜色的明暗程度会发现是有区别的。

分析色彩的明度，最亮的白色，最暗的黑色，具有从亮到暗的明度表现。这里分别选择了三种不同的颜色，进行色彩的明度变化后，效果如下图所示。

图中的紫、黄、蓝三种颜色，从左到右，每种颜色的左边都是比较深的，到了最右边也就是最浅的。通过这样的颜色变化，我们可以清楚地看到明度、亮度的变化效果，从而进一步了解到色彩自身的明度与亮度。相对于同一种颜色来说，它们之间明度、亮度不同，所产生的变化及作用也不同。

1.4.3 色彩的纯度

色彩的纯度，是指颜色、色彩的鲜艳程度和饱和程度，同时代表着色彩的纯净程度，所以又称作饱和度。物体表面选择性反射光谱辐射能力的不同，决定了物体色纯度的不同。一般情况下，物体对光谱某一较窄波段的反射率高，而对其他波长的反射率很低或没有反射。因此，具有很高的选择性反射能力的颜色，色彩的纯度就比较高。

分析色彩的纯度，其物体色还会受到物体表面状况的影响。例如，表面光滑的物体，光线呈镜面反射，能够避开反射的白光；而表面粗糙的物体，光线呈漫反射，很难避开反射的白光。因此，物体表面光滑的颜色要比物体表面粗糙的颜色鲜艳，纯度要大一些。下图所示是色彩纯度的变化效果。

1.5 网站的色彩应用

不同类型的网站，为了突出其特点，设计中在进行色彩搭配时，会采用不同的方案。网站中色彩的应用，根据购物、社交、企业门户、休闲旅游、时政新闻、微博/博客、影音视频、电子商务这几种类型网站常用的色彩搭配方案来进行介绍。

1.5.1 购物网站色彩应用

购物网站，其建立目的是吸引用户购买网站中的物品。因为是通过直接在网站中浏览物品，完成物品的选择，所以尤其要注重色彩的搭配及其应用，从而吸引用户购买产品。分析目前比较受欢迎的此类网站有：凡客诚品、聚美优品等。下面对此类网站的色彩应用进行观察分析。关于购物网站色彩应用，在第12章将详细介绍。

购物网站色彩的应用，以凡客诚品为例。下图所示是该网站的首页。您是否还记得？图片中的“抢购价”，位于页面底部衣服中的该红色圆形大圈在其边缘添加了白色的边线，这样使得圈中的价格文字更为突出，从而实现想要用价格吸引用户的目的。该种形式的效果被许许多多的网站制作人员争相模仿、借鉴。分析其主要设计模式，是以红色为背景画圈，在圈的内边缘添加白色的虚线构成的线圈。

进一步分析网站的色彩应用，为了突出网络购物的这一特点，在色彩使用上采用了如下图所示，主色调为黑色、辅色调为灰色、点睛色为红色、背景色为白色的方法。

通过这一部分内容，先简单认识此类网站的色彩，在第12章将有详细的配色及色彩应用内容的介绍。

1.5.2 社交网站色彩应用

社交网站，其建立目的是帮助用户实现日常的社交（例如交友等）。因为有着通过网站进行友情维系的作用，所以在网站的色彩搭配与应用上，注重给用户视觉上一种放松的感觉是首要的。分析目前比较受欢迎的此类网站有：人人网、开心网等。以下内容是对于此类网站色彩应用的观察和分析。关于社交网站色彩应用，在本书的后面章节中将详细介绍。

社交网站色彩的应用，以开心网为例。如下图所示，是该网站的登录界面。进一步分析网站的色彩应用，为了突出网站属于社交类这一特点，在色彩使用上采用主色调为灰色、辅色调为黑色、点睛色为粉色、背景色为白色的方法。

通过这一部分内容，先简单认识此类网站的色彩，在第13章将有详细的配色及色彩应用内容的介绍。

1.5.3 企业门户网站色彩应用

企业门户网站，其建立目的在于将企业的信息通过网站进行发布，同时宣传企业自身的产品。因为网站代表着企业形象和品牌形象，所以这一类网站有着信息量大、给用户一种气势、网站规模大的特点。分析目前比较受欢迎的此类网站有：苹果官网、三星官网、微软官网等。

观察此类网站的色彩应用，以苹果官网为代表，如下图所示。属于乔布斯的苹果帝国，吸引着非常多的“果粉”，苹果产品受到了用户的热烈欢迎。分析其网站，在色彩使用上采用了主色调为灰色、辅色调为黑色、点睛色为蓝色、背景色为白色的方法。

通过这一部分内容，先简单认识此类网站的色彩，在第14章将有详细的配色及色彩应用内容的介绍。

1.5.4 休闲旅游网站色彩应用

休闲旅游这一类网站，其特点是向用户分享旅游资讯及其相关业务。因为地域性非常广，可能遍及世界各地，所以会要求网站在进行配色选择时，考虑能够搭配各种风格图片等内容在网站的发布。分析目前比较受欢迎的这一类网站，去哪儿网、携程网等都是为用户所熟知的网站。在进行这一类网站的色彩应用时，参考同样网站是一个比较有效的方法。

休闲旅游网站色彩的应用，以去哪儿网为例。如下图所示，是该网站的首页。进一步分析网站的色彩应用，为了突出网站属于休闲旅游类的这一特点，在色彩使用上采用了主色调为灰色、辅色调为蓝色、点睛色为红色、背景色为白色的方法。通过这样的颜色搭配，以淡色系为主，在网站的视觉效果上给人一种轻松、悠闲的感觉，从而突出了这类网站用户视觉感受的需要。

通过这一部分内容，先简单认识此类网站的色彩，在第15章将有详细的配色及色彩应用内容的介绍。

1.5.5 时政新闻网站色彩应用

时政新闻这些网站，其主要特点有代表着政府机关发布行政命令的作用。因为网站涉及时事、政治色彩的文本与图片，所以在进行这一类网站的色彩应用上普遍会显得比较沉闷。但是，真需要这样的颜色搭配来突出网站的类别吗？参照凤凰网的色彩应用，答案也就有了。

下图所示是凤凰网的首页。进一步分析该网站的色彩应用，为了突出时政新闻这一特点，在色彩使用上采用了主色调为蓝色、辅色调为灰色、点睛色为红色、背景色为白色的方法。通过采用蓝色的文本标题，解决了网站中资讯多、易让用户视觉疲劳的弊端。

通过这一部分内容，先简单认识此类网站的色彩，在第16章将有详细的配色及色彩应用内容的介绍。

1.5.6 微博/博客色彩应用

微博/博客是现在用户使用比较多的，相对的人气也是比较高的。例如新浪的微博和博客，很多名人都有开通的。分析网站在色彩上的应用，主要是这样操作的。

下图所示是新浪微博的页面。进一步分析该网站的色彩应用，在色彩使用上采用了主色调为黑色、辅色调为灰色、点睛色为紫色、背景色为白色的方法。因为微博多用于网上信息的发布，以及个人书写内容的发布，所以在个性化方面突出了颜色可根据不同的模板进行更改。用户可以通过选择不同模板，从而实现页面中色彩的不同搭配。

通过这一部分内容，先简单认识此类网站的色彩，在第17章将有详细的配色及色彩应用内容的介绍。

1.5.7 影音视频网站色彩应用

在网上看视频、听音乐，是用户使用网络时最为常用的功能。因为想要播放音乐和视频文件，需要在网站中有相应插件，所以这一类网站常常是被划分成模块进行单独制作处理的，进行网站配色过程中就需要设计人员考虑如何将这些内容巧妙地融合为一体。作为影音视频网站的代表，优酷网有着非常庞大的用户群。分析其在网站色彩应用上的内容，主要有以下内容的色彩应用。

下图所示是优酷网的首页。进一步分析该网站的色彩应用，为了突出影音视频网站的这一特点，在色彩使用上采用了主色调为黑色、辅色调为灰色、点睛色为蓝色、背景色为白色的方法。另外，该网站在配色上比较炫彩，这样的搭配有利于避免视频内容中色彩的多样化，让整个页面的颜色变得纷乱繁杂的现象。

通过这一部分内容，先简单认识此类网站的色彩，在第18章将有详细的配色及色彩应用内容的介绍。

1.5.8 电子商务网站色彩应用

互联网的发展，为电子商务注入了活力。作为电子商务网站的代表，淘宝网和京东网可以算是网上买家超级多的网站了。下面具体分析电子商务网站在配色上的应用特点，从而为以后在电子商务网站配色上的操作积累经验。

以京东网为例，下图所示是其主页。因为当时适逢过年的好时节，所以红色自然是少不了的。总结页面的配色，采用了主色调为黑色、辅色调为灰色、点睛色为红色、背景色为白色的搭配。另外，页面中也使用了少量的蓝色进行搭配。

通过这一部分内容，先简单认识此类网站的色彩，在第19章将有详细的配色及色彩应用内容的介绍。