2.1 善用色彩设计网页

学习时间：20分钟

网站留给用户的第一印象既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩，不同的颜色运用会给人以不同的感受，高明的设计师会运用颜色来表现网站的理念和内在的品质。为了能更好地应用色彩来设计网页，下面先来了解一下色彩的基础知识。

2.1.1 认识色彩

自然界中的色彩五颜六色、千变万化，比如百合是白色的，天空是蓝色的，橘子是橙色的、草是绿色的平时所看到的白色光。经过分析，在色带上可以看到，它包括红、橙、黄、绿、青、蓝、紫7种颜色，各颜色间自然过渡，其中，红、绿、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色，如图所示。

色彩有冷色、暖色之分，冷色给人的感觉是安静、冰冷；而暖色给人的感觉是热烈、火热，冷色、暖色的巧妙运用可以使网站产生意想不到的效果。

现实生活中的色彩可以分为彩色和非彩色，其中黑、白、灰属于非彩色系列，其他的色彩都属于彩色系列。任何一种彩色都具备3个特征：色相、纯度和明度，而非彩色只有明度属性。

1.色相

色相是指色彩的名称，这是色彩最基本的特征，反映颜色的基本面貌，是一种色彩区别于另一种色彩最主要的因素。如紫色、绿色和黄色等代表不同的色相。观察色相要善于比较，色相近似的颜色也有区别，比较它们之间的微妙差别。这种相近色中求对比的方法在写生时经常使用，如果掌握得当，能形成一种色调的雅致、和谐、柔和耐看的视觉效果。将色彩按红→黄→绿→蓝→红依次过渡渐变，即可得到一个色环。

从光学意义上讲，色相差别是由光波波长的长短产生的。即便是同一类颜色，也能分为几种色相，如黄色可以分为中黄、土黄、柠檬黄等，灰色则可以分为红灰、蓝灰、紫灰等。

最初的基本色相为：红、橙、黄、绿、蓝、紫。在各色中间加插一两个中间色，其头尾色相，按光谱顺序为：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫，紫、红紫、红和紫中再加个中间色，可制出12基本色相。

这12色相的彩调变化，在光谱色感上是均匀的。如果进一步再找出其中间色，便可以得到24个色相。如果再把光谱的红、橙黄、绿、蓝、紫诸色带圈起来，在红和紫之间插入半幅，构成环形的色相关系，便称为色相环。基本色相间取中间色，即得12色相环，如图所示。

再进一步便是24色相环。在色相环的圆圈中，各彩调按不同角度排列，则12色相环每一色相间距为30°。24色相环每一色相间距为15°，如图所示。

一般色相环有5种或6种甚至8种色相为主要色相，若在各主要色相的中间色相，就可做成10色相、12色相或24色相等色相环。

色相环分10色相环、12色相环与24色相环等。

（1）10色相环

在色相&色调体系中，10色相分别指：红色、橙色、黄色、黄绿色、绿色、青绿色、蓝色、蓝紫色、紫色、紫红色。

（2）色相环

色相环是由原色、二次色和三次色组合而成。色相环中的三原色是红、黄、蓝，彼此势均力敌，在环中形成一个等边三角形。

二次色是橙、紫、绿，处在三原色之间，形成另一个等边三角形。红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色。三次色是由原色和二次色混合而成的。

井然有序的色相环让使用的人能清楚地看出色彩平衡、调和后的结果。

（3）色色相环

CCS16色相环由如下两部分构成。

CCS基础色相环：CCS将红（R）、橙（O）、黄（Y）、黄绿（YG）、绿（G）、蓝（B）、群青（U）、紫罗兰（V）8个具有代表性的颜色按秩序排列，构成基础色相环。这8个颜色又能构成4组完全对应的补色组合，红和绿、橙和蓝、黄和群青、黄绿和紫罗兰。

CCS16色色相环：在这8个色相中，等间距各增加一个颜色，橙红（OR）、橙黄（OY）、青黄（GY）、叶绿（LG）、蓝绿（BG）、群青蓝（UB）、青紫（UV）、紫红（VR），就形成了16色色相环，如图所示。

（4）24色相环

奥斯特瓦尔德颜色系统的基本色相为黄、橙、红、紫、蓝、蓝绿、绿、黄绿8个主要色相，每个基本色相又分为3个部分，组成24个分割的色相环，从1号排列到24号。在24色色相色环中彼此相隔12个数位或者相距180°的两个色相，均是互补色关系。互补色结合的色组，是对比最强的色组。使人的视觉产生刺激性、不安定性。相隔15°的两个色相，均是同种色对比，色相感单沌，柔和，统一，趋于调和。

色彩像音乐一样，是一种感觉。音乐需要依赖音阶来保持秩序，而形成一个体系。同样，色彩的三属性就如同音乐中的音阶一般，可以利用它们来维持繁多色彩之间的秩序，形成一个容易理解又方便使用的色彩体系。这种色相的环状配列，称为色相环，在进行配色时可以说是非常方便的图形，可以了解两色彩间有多少间隔。

为了在色相环上得到等间隔的色相差，首先定出几种基本的代表色相；即主要色相。

绘制12色相的色环，是色彩设计的基础。首先以第一次的黄、红、蓝三色为基础，由此三原色配置组合成12色相环，如图所示。

2.纯度

纯度也叫饱和度，是指色彩的鲜艳程度。纯度高则色彩鲜亮；纯度低则色彩黯淡，含灰色。颜色中以三原色红、绿、蓝为最高纯度色，而接近黑、白、灰的颜色为低纯度色。凡是靠视觉能够辨认出来的，具有一定色相倾向的颜色都有一定的鲜灰度，而其纯度的高低取决于它含中性色黑、白、灰总量的多少。

3.明度

明度是指色彩的明暗程度。明度越高，色彩越亮；明度越低，颜色越暗。色彩的明度有两种情况：一是同一色相不同明度，二是各种颜色的不同明度。

2.1.2 网页色彩的定义

在网页中，常以RGB模式来表示颜色的值，RGB表示红（Red）、绿（Green）、蓝（Blue）三原色。在通常情况下，RGB各有256级亮度，用0～255表示，如图所示的”颜色”对话框。

对于单独的R、G、B而言，当数值为0时，代表这种颜色不发光；如果为255，则代表该颜色为最高亮度。当RGB这3种色光都达到最强的亮度（即RGB值为255、255、255）时，表示纯白色，用十六进制数表示为”#FFFFFF”。相反，纯黑色的RGB值是0、0、0，用十六进制数表示为”#000000”。纯红色的RGB值是255、0、0，意味着只有红色R存在且亮度最强，G和B都不发光。同理，纯绿色的RGB是0、255、0；纯蓝色的RGB是0、0、255，如图所示为设置纯蓝色的”颜色”对话框。

按照计算，256级的RGB色彩共能组合出约1678万种色彩，即256×256×256=16777216，通常简称为1600万色或千万色，也称为24位色（2的24次方）。既然理论上可以得出16777216种颜色，那么为什么又出现了网页安全颜色范畴为216种的颜色呢？这是因为浏览器的缘故，网页被浏览器识别以后，只有216种颜色能在浏览器中正常显示，当多于这个范围时有的浏览器显示时就可能发生偏差，不能正常显示，因此将能被所有的浏览器正常显示的216种颜色称为网页安全颜色范畴。

现在的浏览器的性能越来越高，网页的安全颜色范畴也越来越广，但最安全的还是216种颜色。在Dreamweaver中，提供具有网页安全颜色范畴的调色板，可将网页的颜色选取控制在安全范围之内。