本節書摘來自異步社群《dreamweaver cs6完美網頁制作——基礎、執行個體與技巧從入門到精通》一書中的第2章，第2.3節，作者：何新起 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
色彩搭配既是一項技術性工作，同時也是一項藝術性很強的工作，是以在設計網頁時除了考慮網站本身的特點外，還要遵循一定的藝術規律，進而設計出色彩鮮明、性格獨特的網站。
2.3.1 網頁色彩搭配的技巧
到底用什麼色彩搭配好看呢？下面是網頁色彩搭配的一些常見技巧。
運用相同色系色彩。所謂相同色系，是指幾種色彩在360°色相環上位置十分相近，大約在45°或同一色彩不同明度的幾種色彩。這種搭配的優點是易于使網頁色彩趨于一緻，對于網頁設計新手有很好的借鑒作用，這種用色方式容易塑造網頁和諧統一的氛圍；缺點是容易造成頁面的單調，是以往往利用在局部加入對比色來增加變化，如加入局部對比色彩的圖檔等。圖2.15所示為運用相同色系色彩的網頁。
使用鄰近色。所謂鄰近色，就是在色帶上相鄰近的顔色，如綠色和藍色、紅色和黃色等就互為鄰近色。采用鄰近色設計網頁可以使網頁避免色彩雜亂，易于達到頁面的和諧統一。鄰近色能夠神奇地将幾種不協調的色彩統一起來，在網頁中合理地使用鄰近色能夠使色彩搭配技術更上一層樓。
使用對比色。對比色可以突出重點，産生強烈的視覺效果，通過合理使用對比色能夠使網站特色鮮明、重點突出。在設計時一般以一種顔色為主色調，對比色作為點綴，可以起到畫龍點睛的作用，圖2.16所示為運用對比色的網頁。
黑色的使用。黑色是一種特殊的顔色，如果使用恰當、設計合理，往往會産生很強烈的藝術效果，黑色一般用做背景色，與其他純度色彩搭配使用。
背景色的使用。背景色一般采用素淡清雅的色彩，避免采用花紋複雜的圖檔和純度很高的色彩作為背景色，同時背景要與文字的色彩對比強烈一些。圖2.17所示為使用背景色的網頁。
色彩的數量。一般初學者在設計網頁時往往使用多種顔色，使網頁變得很“花”，缺乏統一和協調，表面上看起來很花哨，但缺乏内在的美感。事實上，網站用色并不是越多越好，一般控制在3種色彩以内，通過調整色彩的各種屬性來産生變化。
2.3.2 網頁要素色彩的搭配
1．确定網站的主題色
一個網站不可能單一的運用一種顔色，讓人感覺單調、乏味，但是也不可能将所有的顔色都運用到網站中，讓人感覺輕浮、花哨。一個網站必須有一種或兩種主題色，不至于讓客戶迷失方向，也不至于單調、乏味。是以确定網站的主題色也是設計者必須考慮的問題之一。
一個頁面盡量不要超過3種色彩，用太多的色彩讓人沒有方向，沒有側重。當主題色确定好以後，考慮其他配色時，一定要考慮其他配色與主題色的關系，要展現什麼樣的效果。另外要考慮哪種因素占主要地位，是明度、純度還是色相。
2．定義網頁導航色彩
網頁導航是網站的指路燈，浏覽者要在網頁間跳轉，要了解網站的結構、網站的内容，都必須通過導航或頁面中的一些小标題。是以可以使用稍微具有跳躍性的色彩，吸引浏覽者的視線，讓他們感覺網站的清晰、明了、層次分明，想往哪裡走都不會迷失方向。圖2.18所示為色彩鮮明的網頁導航色彩。
3．定義網頁連結色彩
一個網站不可能隻是單一的一頁，是以文字與圖檔的連結是網站中不可缺少的一部分。需要強調的是，如果是文字連結，連結的顔色不能跟其他文字的顔色一樣。現代人的生活節奏相當快，不可能在尋找網站的連結上浪費太多的時間。設定了獨特的連結顔色，讓人感覺它的獨特性，自然而然，好奇心會驅使使用者移動滑鼠單擊連結。
4．定義網頁文字色彩
如果一個網站使用了背景顔色，必須要考慮到背景顔色的用色與前景文字的搭配等問題。一般的網站側重的是文字，是以背景可以選擇純度或明度較低的色彩，文字用較為突出的亮色，讓人一目了然。當然，有些網站為了讓浏覽者對網站留有深刻的印象，在背景上作了特别設計。例如，一個空白頁的某一個部分用了很亮的一個大色塊，給人以豁然開朗的感覺。此時設計者為了吸引浏覽者的視線，突出的是背景，是以文字就要顯得暗一些，這樣文字才能跟背景分離開來，便于浏覽者閱讀文字。
5．定義網頁标志和banner的顔色
網頁标志是宣傳網站最重要的部分之一，可以将logo和banner做得鮮亮一些，也就是色彩方面要跟網頁的主體色分離開來。有時候為了更突出，也可以使用與主題色相反的顔色。
2.3.3 色彩的對比搭配
網頁中總是由具有某種内在聯系的各種色彩，組成一個完整統一的整體，形成畫面色彩的總體趨向，稱為色調，也可以了解為色彩狀态。色彩給人的感覺與氛圍，是影響配色視覺效果的決定因素。
在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環境下，多色彩給人一種印象，色彩單一給人另一種印象。
各種純色的對比會産生鮮明的色彩效果，很容易給人帶來視覺與心理的滿足。紅、黃、藍3種顔色是最極端的色彩，它們之間對比，哪一種顔色也無法影響對方。色彩對比範疇不局限于紅、黃、藍這3種顔色，而是指各種色彩的界面構成中的面積、形狀、位置以及色相、明度、純度之間的差别，使網頁色彩配合增添了許多變化、頁面更加豐富多彩。
1．色相對比
色相對比是指因色相之間的差别形成的對比。當主色相确定後，必須考慮其他色彩與主色相是什麼關系，要表現什麼内容及效果等，這樣才能增強其表現力。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和，越接近補色，對比效果越強烈。
2．明度對比
明度對比是指因色彩之間明暗程度的差别而形成的對比，是頁面形成恰當的黑、白、灰效果的主要手段。明度對比在視覺上對色彩層次和空間關系影響較大，如檸檬黃的明度高，藍紫色的明度低，橙色和綠色屬中明度，紅色與藍色屬中低明度。
3．純度對比
純度對比是指因不同色彩之間純度的差别而形成的對比。色彩純度可大緻分為高純度、中純度、低純度這3種。未經調和的原色純度是最高的，而中間色多屬中純度的色彩，複色其本身純度偏低而屬于低純度的色彩範圍。純度的對比會使色彩的效果更明确和肯定。
4．補色對比
将紅與綠、黃與紫、藍與橙等具有補色關系的色彩彼此并置，使色彩感覺更為鮮明，純度增加，稱為補色對比。
5．冷暖對比
冷暖對比是指因不同色彩之間的冷暖差别形成的對比。色彩分為冷、暖兩大色系，以紅、橙、黃為暖色系，藍、綠、紫則代表着冷色系，兩者基本上互為補色關系。另外，色彩的冷暖對比還受明度與純度的影響，白色反射高而感覺冷，黑色吸收率高而感覺暖。
6．面積對比
同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重，這種現象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、大與小的差别，影響到頁面主次關系。