1、色彩入門首先讓我們熟悉一下色彩的一些基本概念。三原色一切顏色都來自三原色：紅、黃、藍。在這個圓環中，相鄰的兩個原色相混合可以得到另外三個比較重要的顏色（下文將其稱為二級原色）：紅+黃=橙，紅+藍=紫，藍+黃=綠讓我們再深入一步，三原色和三種二級原色可以進一步混合得到更多的顏色，分別是橙紅色、紫紅色、藍紫色、藍綠色、橘黃色和黃綠色。這六種顏色可以稱為三級原色。按照同樣的方式不斷進行下去，這個圓環中顏色之間的分隔線就會消失，得到下圖所示的“色彩圓環”，在一些繪圖程序的調色板中我們可以看到這樣的色彩圓環。但是這個圓環仍然沒有涵蓋所有的顏色，對于圓環中的每一種顏色還有飽和度、亮度和灰度等的變化。也就是

2、說，將上述圓環中的任意一種顏色和黑色、白色、灰色按照不同比例混合就可以得到更多的顏色，下面將詳細介紹。常用的色彩術語飽和度某種顏色的飽和度是指這種顏色所包含的基本顏色的多少。例如RGB值為（0，0，255）的藍色是純藍色，他的飽和度是100%。隨著飽和度的降低，顏色會越來越接近灰色。灰度基本色彩和黑色進行不同程度的混合可以得到不同的灰度，例如亮度基本顏色和白色進行不同程度的混合可以得到不同的亮度，例如：:色調基本顏色和灰色進行不同程度的混合可以得到不同的色調，例如：色彩方案的種類不同網站應當使用不同的色彩方案，與站點的主題相吻合的色彩方案決不僅僅可以讓網站“更加好看”，更重要的是在訪問者心目中

3、建立對這個網站的感性認識。所以，色彩方案的選擇決不能草率，而且色彩方案絕對是網站建設的第一個步驟。如果選擇色彩方案時過于草率，甚至根本不對網站進行色彩方案的整體規劃，你將不可能制作出一個真正優秀的網站。例如，一個銷售嬰兒用品的網站應當使用比較活潑的色彩方案，而一個藝術網站則應當使用比較執重的方案。按照色彩方案中色彩使用方式的不同，我們可以將色彩方案劃分成多種類型，單色方案、相似色方案、補色方案和三合一色方案。單色方案單色方案是指在網站設計中終止使用一種基本顏色，為避免單調，我們可以通過調整這種基本顏色的灰度和亮度來得到更多的顏色，由于整個顏色方案中事實上只有一種基色，因此這種方案稱為單色方案。

4、例如：在Photoshop的色彩選擇窗口中，我們可以這樣進行建立單色方案。首先調整H（也就是Hue的縮寫）后面的值來調整色調。注意，H的單位是度，也就是基本顏色在顏色環上所處位置的角度。設置好H的值之后，再調整B后面的數字調整亮度以及S后面的數字調整飽和度。注意，其中B和S的單位是百分比，也就是向基本顏色中添加白色和黑色的百分比。這樣就可以得到一個單色方案了。下面來看兩個使用單色方案的成功實例。單色方案實例之一：這是一個女性網站，因此其基本顏色為粉紅色，并通過調整粉紅色的飽和度得到了其余幾種顏色。總體顏色趨于淡雅，訪問者的注意力會很自然地被吸引到幾幅展示其產品的圖片上。tyslcs15.jpg

5、 (3.52 KB) 2009-9-7 20:49單色方案實例之二：這個色彩方案使用的基色顏色較深，并通過修改其亮度獲得其他兩種顏色，并用最淺的顏色作為主體部分的背景，使其突出出來。總的來說，單色方案是一種比較穩重的方案，或者說比較保守的方案。單色方案給人整潔、經典的感覺，最適合于內容比較嚴肅的網站，比如政府網站，學術網站，企業網站，高雅藝術網站。特別值得一提的是，商業網站也比較適合使用此種顏色方案，因為這種方案可以給人一種穩定感，使訪問者容易建立對網站的信任感。當然，這種方案也有其靈活的一面，當使用較淺的基色時，這種顏色方案也可以用于時尚類網站，傳達簡約清雅的觀念。相似色方案在色彩圓環上選擇

6、彼此相鄰的幾種顏色構成的配色方案就是相似色方案。例如橙色、橙紅色以及橙黃色就可以組成一個相似色方案。由于相似色方案中包含了多種基色，如果再加上亮度和飽和度的變化，可以構成的顏色就非常多。0031.jpg (8.5 KB) 2009-9-7 21:080032.jpg (4.87 KB) 2009-9-7 21:080033.jpg (4.75 KB) 2009-9-7 21:080034.jpg (4.98 KB) 2009-9-7 21:08下面是相似色方案的實例。0035.jpg (31.44 KB) 2009-9-7 21:080036.jpg (3.67 KB) 2009-9-7 21

7、:08相似色方案實例一：這個網站使用了由橙黃色、橙紅色和橙色組成的配色方案。Bullseye是一家ISP服務商，面向普通客戶。選用這種方案和行業內慣用的藍色系形成鮮明對照，個性凸現。0037.jpg (47.11 KB) 2009-9-7 21:080038.jpg (3.54 KB) 2009-9-7 21:08相似色方案實例之二：這個網站使用了綠色和黃色這兩種相似色構成配色方案。頁面上很多綠色植物，因此文字使用了綠色，整個頁面看上去自然清新，和網站的內容相得益彰。通常，相似色配色方案可以給人非常協調的感覺，因此在網站設計中非常常用。典型的運用方法就是，用一種顏色作為頁面背景，而另外一種在顏

8、色環中與其相鄰的顏色作為前景色。除了上面介紹的綠色和黃色之外，藍色和綠色以及紅色和褐色也是比較常用的相似色配色方案。補充色補充色方案在色彩圓環上沿直徑相對應的兩種顏色構成一對互補色，下圖中小箭頭所指的黃色和藍色就互為互補色。下圖是三組互補色，每組中含有兩對互補色。在了解了互補色是怎么回事之后，我們再來看雙重互補色。在色彩圓環上選擇一組互補色，然后分別在這兩個互補色的旁邊選擇兩個相似色就可以得到一個由四種顏色組成的雙重互補色。例如在下圖中，綠色和紅色為互補色，綠色旁邊的深綠色和藍綠色以及紅色旁邊的橙紅色以及深紅色就構成了一組雙重互補色。與雙重互補色相類似的還有分割互補色，也就取是一組互補色中的某

9、一種顏色的相似色得到三種顏色構成一組分割互補色。例如下圖中的藍色和橙黃色是一組互補色，加上橙黃色旁邊的橙紅色就構成了一個分割互補色方案。互補色方案的配置雖然略顯繁瑣，但是在現在的網站設計中非常流行，因為互補色適合于制作活潑時尚的效果，讓你的網站魅力四射。 來看一個使用互補色的實例。互補色配方案實例：這個網站使用了藍色（導航欄）和橙黃色（內容背景）這樣一對互補色作為配色方案。由于互補色所具有天生的動感，因此定位在時尚、青春、活力、動感、新科技、新見解或者類似主題的網站可以采用這種配色方案。 互補色配方案還有一個妙用。前面介紹單色方案時曾提到，單色方案比較適合比較嚴肅、莊重或者清新淡雅的網站。但是

10、如果你覺得這樣的配色方案顯得“穩重有余，活力不足”，那么你不妨在網頁的適當地方（比如標題欄、導航欄）中使用互補色，這樣可以在不破壞整體穩重清新的效果的同時，為頁面添加幾分動感。三色三色方案三色方案是指在色彩圓環中選擇一個等邊三角形三個頂點上的顏色構成的配色方案。在Photoshop中，要想構造一個三色方案是非常容易。首先選中一種顏色，記下他的H（Hue）值，然后為這個值加120（記住，H的單位是“度”，也就是沿色彩圓環旋轉120度），以此類推得到第三種顏色，構成一個三色方案。 來看三色方案的實例。三色方案實例：這個網站使用藍色為底色，黃色和紅色為前景色，紅黃藍恰恰就是三原色，因此這是一個非常典

11、型的三色方案。三色方案中使用了三種彼此之間差別明顯的顏色，因此頁面顯得相當不穩定，是一種可以帶來比較另類的感覺的配色方案，如果你要設計的網站是這種類型的，不妨使用這種配色方案。方案選擇配色方案的選擇色彩方案在網站設計中必須慎重選擇，尤其對于企業網站而言，絕大多數企業網站都會不斷改版，但是在改版的過程中，色彩方案通常會保持穩定。典型的例子是IBM公司的網站，作為聲名遐邇的“藍色巨人”，用藍色作為配色方案的主色是理所當然事情，多年保持不變，為了使頁面不過于呆板。頁面中還使用了少量的黃色（藍色的補色）合綠色，來增加頁面的活力，更加符合IBM業界巨頭的身份。事實上，以藍色為主色的網站可以使用上面介紹的四種配色方案中的任何一種，如下圖。顯然IBM使用了第三種，也就是互補色方案。如果你設計的網站也打算使用藍色作為主色，那么你可以根據網站的內容和定位在這四種配色方案中進行選擇。如果主色多于一種，構造配色方案時也很容易。假設有兩種主色，并且這兩種顏色在色彩圓環上是相鄰的，那么可以選