1、網頁設計與網站建設網頁設計與網站建設課程講義課程講義網頁的配色網頁的配色l網頁不只是傳遞信息的媒介，同時也是網絡上網頁不只是傳遞信息的媒介，同時也是網絡上的的藝術品藝術品。如何讓瀏覽者以輕松愜意的心態吸。如何讓瀏覽者以輕松愜意的心態吸收網頁傳遞的信息，是一個值得研究的課題。收網頁傳遞的信息，是一個值得研究的課題。 l任何網頁創意使用的視覺元素總的歸納起來不任何網頁創意使用的視覺元素總的歸納起來不外乎三種：外乎三種：文字文字、圖像圖像、色彩色彩。三者選用搭配。三者選用搭配的適當，編排組合的合理，將對網頁的美化起的適當，編排組合的合理，將對網頁的美化起到直接的效果。到直接的效果。色彩的基本知識色彩

2、的基本知識l色彩的RGB模式 ：lRGB是表示紅色、綠色、藍色又稱為三原色光，是表示紅色、綠色、藍色又稱為三原色光，英文為英文為R(Red)、G(Green)、B(Blue)，在電腦中，在電腦中，RGB的所謂的所謂“多少多少”就是指就是指亮度亮度，并使用，并使用整數整數來來表示。表示。通常情況下，通常情況下，RGB各有各有256級亮度，用數字表示為級亮度，用數字表示為從從0、1、2至至255。l紅、黃、藍是三原色紅、黃、藍是三原色，其它色彩都可以用這三種顏，其它色彩都可以用這三種顏色調和而成。網頁中色彩表達除了用顏色名稱表達色調和而成。網頁中色彩表達除了用顏色名稱表達外，就是用這三種顏色的數值

3、表示：紅色外，就是用這三種顏色的數值表示：紅色color(255,0,0)、十六進制表示為、十六進制表示為(ff0000) 如：如：“bgcolor=#ffffff”表示背景色為白色表示背景色為白色色彩的基本知識色彩的基本知識l色彩的色彩的HSB模式模式 ：lHSB是指顏色分為是指顏色分為色相色相、飽和度飽和度、明度明度三個三個要素。英文為要素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度飽和度高色彩較艷麗。飽和度低色彩就接低色彩就接 近灰色。亮度高色彩明亮，亮度近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純低色彩暗淡

4、，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低。色的飽和度高而亮度低。 色彩的三要素色彩的三要素l色相色相、明度明度和和飽和度飽和度構成色彩的三要素。自然界中構成色彩的三要素。自然界中的顏色可以分為非彩色和彩色兩大類。非彩色指黑的顏色可以分為非彩色和彩色兩大類。非彩色指黑色、白色和各種深淺不一的灰色，而其它所有的顏色、白色和各種深淺不一的灰色，而其它所有的顏色均屬于彩色，任何一種色彩都具有明度、純度、色均屬于彩色，任何一種色彩都具有明度、純度、飽和度三大屬性。飽和度三大屬性。(1). 色相色相色相指色彩的相貌。

5、如：色相指色彩的相貌。如：紅、黃、藍紅、黃、藍、綠等。、綠等。(2).明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。(3).飽和度（純度）飽和度（純度）純度指色彩的純凈程度，純度越高，色相感越強。純度指色彩的純凈程度，純度越高，色相感越強。 色相色相(Hue)（1）色相）色相(Hue) 基本色相為：基本色相為：紅、橙、黃、綠、藍、紫紅、橙、黃、綠、藍、紫六色。在各色中間六色。在各色中間加插一兩個中間色，按光譜順序為：紅、橙紅、黃橙、黃、黃綠、加插一兩個中間色，按光譜順序為：紅、橙紅、黃橙、黃、黃綠、綠、綠藍、藍綠、藍、藍紫、紫、紅紫綠、綠藍、藍綠、藍、藍紫、紫、紅紫,形成十二基本色相。

6、形成十二基本色相。 色相的計算機數值表示色相的計算機數值表示l以顏色在色相環上的度數值來表示以顏色在色相環上的度數值來表示l如紅色是如紅色是0度，橙色是度，橙色是60度，黃色是度，黃色是120度，度，那么用色相值那么用色相值0表示紅色，表示紅色，60表示橙色，因此表示橙色，因此色相的取值應該是色相的取值應該是0360，但計算機中是用，但計算機中是用八位八位2進制數表示色相的，所以取值只能是進制數表示色相的，所以取值只能是0240，這樣還要把原來的色相值乘以，這樣還要把原來的色相值乘以2/3明度明度(Brightness)l（2）明度）明度(Brightness) 明度是色彩的第二屬性。是指色彩

7、的明暗程度，也叫亮度，明度是色彩的第二屬性。是指色彩的明暗程度，也叫亮度，體現體現顏色的深淺。是全部色彩都具有的屬性，明度越大，色體現體現顏色的深淺。是全部色彩都具有的屬性，明度越大，色彩越亮。明度越低，顏色越暗彩越亮。明度越低，顏色越暗飽和度飽和度(Saturation)l（3）飽和度(Saturation) 也叫純度，指色彩的鮮艷程度。原色最純，顏色的混合越多則純度逐漸減低。如某一鮮亮的顏色，加入了白色或者黑色，使得它的純度低，顏色趨于柔和、沉穩。 純度網頁例圖純度網頁例圖 l（4）色彩的特質）色彩的特質 色彩的特質指的是色彩和色彩組合所能引發的特定情緒反映。色彩的特質指的是色彩和色彩組合

8、所能引發的特定情緒反映。我們依靠光來分辨顏色，再利用顏色和無數種色彩的組合來表達我們依靠光來分辨顏色，再利用顏色和無數種色彩的組合來表達思想和情緒。思想和情緒。熱冷暖涼亮暗艷淡原色原色l也叫也叫三原色三原色。即紅、黃、藍三種基本顏色。自然界。即紅、黃、藍三種基本顏色。自然界中的色彩種類繁多，變化豐富，但這三種顏色卻是最中的色彩種類繁多，變化豐富，但這三種顏色卻是最基本的原色，原色是其他顏色調配不出來的。除白色基本的原色，原色是其他顏色調配不出來的。除白色外，把三原色相互混合，可以調和出其他種顏色。外，把三原色相互混合，可以調和出其他種顏色。根據三原色的特性做出相應的色彩搭配，有根據三原色的特性

9、做出相應的色彩搭配，有最迅最迅速最有力最強烈速最有力最強烈的傳達視覺信息效果。的傳達視覺信息效果。 紅色網頁例圖紅色網頁例圖 藍色網頁例圖藍色網頁例圖間色間色l又叫又叫二次色二次色。它是由三原色調配出來的顏色，是由。它是由三原色調配出來的顏色，是由2種原色調配出來的。紅與黃調配出橙色；黃與藍調種原色調配出來的。紅與黃調配出橙色；黃與藍調配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色配出綠色；紅與藍調配出紫色，橙、綠、紫三種顏色又叫又叫三間色三間色。在調配時，由于原色在份量多少上有。在調配時，由于原色在份量多少上有所不同，所以能產生豐富的間色變化所不同，所以能產生豐富的間色變化 l 間色是由三原

10、色中的兩原色調配而成的，因此在視覺刺激的強度相對三原色來說緩和不少。屬于較易搭配之色。間色盡管是二次色，但仍有很強的視覺沖擊力，容易帶來輕松、明快、愉悅的氣氛。 間色配色網頁間色配色網頁復色復色l也叫也叫復合色復合色。復色是由原色與間色相調或由。復色是由原色與間色相調或由間色與間色相調而成的間色與間色相調而成的三次色三次色，復色是的，復色是的純純度最低，含灰色成份度最低，含灰色成份。復色包括了除原色和間。復色包括了除原色和間色以外的所有顏色。色以外的所有顏色。 復色網頁示例復色網頁示例復色網頁配色說明復色網頁配色說明l以上以上4種顏色中深綠色和赭石色為復色，之所種顏色中深綠色和赭石色為復色，之

11、所以還選擇其它以還選擇其它2顏色，為的是更好的配合說明復色顏色，為的是更好的配合說明復色的特性，如果沒有另外兩種非復色搭配，頁面配色的特性，如果沒有另外兩種非復色搭配，頁面配色就可能出現骯臟等不舒服的感覺。就可能出現骯臟等不舒服的感覺。 l 復色是由兩種間色或原色與間色混合而成，因復色是由兩種間色或原色與間色混合而成，因此色相傾向較微妙、不明顯，視覺刺激度緩和，如此色相傾向較微妙、不明顯，視覺刺激度緩和，如果搭配不當，頁面便呈現易臟或易灰朦朦的效果，果搭配不當，頁面便呈現易臟或易灰朦朦的效果，沉悶、壓抑之沉悶、壓抑之 感，屬于不好搭配之色。但有時復色感，屬于不好搭配之色。但有時復色加深色搭配能

12、很好的表達神秘感、縱深感空間感；加深色搭配能很好的表達神秘感、縱深感空間感；明度高的多復色（參看明度的網頁例圖）多用來表明度高的多復色（參看明度的網頁例圖）多用來表示寧靜柔和、細膩的情感，示寧靜柔和、細膩的情感， 易于長時間的瀏覽。易于長時間的瀏覽。 網頁選色的考慮網頁選色的考慮l 從從 以上例子可看出以上例子可看出三原色三原色視覺沖擊力最強，也最是刺視覺沖擊力最強，也最是刺目的，容易制造沖突、煩燥、不舒適的心情，所以是較目的，容易制造沖突、煩燥、不舒適的心情，所以是較難掌握的配色，大面積大范圍使用要慎重。難掌握的配色，大面積大范圍使用要慎重。l間色間色是由三原色是由三原色 中的兩色調配二次，

13、間于原色和復色中的兩色調配二次，間于原色和復色之間，屬于中性色，視覺沖擊力次之，顏色的刺激緩和之間，屬于中性色，視覺沖擊力次之，顏色的刺激緩和不少，給人舒適、愉悅的心情，是較容易掌握的配色，不少，給人舒適、愉悅的心情，是較容易掌握的配色，也是在設計中使用也是在設計中使用 得比較多的顏色。得比較多的顏色。l復色復色是由兩種間色或原色與間色相混合而產生的顏色，是由兩種間色或原色與間色相混合而產生的顏色，呈灰色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。呈灰色階，視覺沖擊力更弱，柔和但是使人沉悶壓抑。復色調配好了，能體現出高層次高素復色調配好了，能體現出高層次高素 養的成熟特性魅養的成熟特性魅力，也稱

14、為高級灰，是很經看的顏色。力，也稱為高級灰，是很經看的顏色。 色彩的色彩的4種角色種角色l 主色調主色調頁面色彩的主要色調、總趨勢，其他配色不能超過該頁面色彩的主要色調、總趨勢，其他配色不能超過該主要色調的視覺影響主要色調的視覺影響l 輔色調輔色調僅次與主色調的視覺面積的輔助色，是烘托主色調、僅次與主色調的視覺面積的輔助色，是烘托主色調、支持主色調、起到融合主色調效果的輔助色調。支持主色調、起到融合主色調效果的輔助色調。 l 點睛色點睛色 在小范圍內點上強烈的顏色來突出主題效果，使頁面在小范圍內點上強烈的顏色來突出主題效果，使頁面更加鮮明生動。更加鮮明生動。l 背景色背景色 襯托環抱整體的色調

15、，協調、支配整體的作用。襯托環抱整體的色調，協調、支配整體的作用。網頁中色彩的角色示例網頁中色彩的角色示例色彩搭配的方案色彩搭配的方案l同類色搭配l鄰近色搭配l互補色搭配l對比色搭配同類色同類色l比鄰近色更加接近的顏色，色環中距離為比鄰近色更加接近的顏色，色環中距離為060度的顏色。它主要指在同一色相中不同度的顏色。它主要指在同一色相中不同的顏色變化。例如，紅顏色中有紫紅、深紅、的顏色變化。例如，紅顏色中有紫紅、深紅、玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色玫瑰紅、大紅、朱紅、桔紅等等種類，黃顏色中又有深黃、土黃、中黃、桔黃、淡黃、檸檬中又有深黃、土黃、中黃、桔黃、淡黃、檸檬黃等等區別。它起到

16、色彩黃等等區別。它起到色彩調和統一調和統一，又有，又有微妙微妙變化變化的作用。的作用。 同類色搭配同類色搭配鄰近色鄰近色l是在色環上任一顏色同其毗鄰之色。鄰近是在色環上任一顏色同其毗鄰之色。鄰近色也是類似色關系，只是范圍擴大了一點。例色也是類似色關系，只是范圍擴大了一點。例如紅色和黃色，綠色和藍色，互為鄰近色。如紅色和黃色，綠色和藍色，互為鄰近色。 鄰近色搭配鄰近色搭配補色補色l補色補色(分離補色）：分離補色）：色輪上的任意顏色，以及它的補色的兩邊顏色，色輪上的任意顏色，以及它的補色的兩邊顏色，當使用在同個版面上的時候被稱為當使用在同個版面上的時候被稱為“分離補色分離補色”。分。分離補色的運用

17、可以造成離補色的運用可以造成很強烈很強烈的對比。的對比。 補色搭配補色搭配對比色對比色l對比色是指在色環中的直接位置相對的顏色，如果想對比色是指在色環中的直接位置相對的顏色，如果想要使網站中的色彩要使網站中的色彩強烈突出、富有沖擊力的話強烈突出、富有沖擊力的話，可以，可以選擇對比色搭配。選擇對比色搭配。對比色搭配對比色搭配對比色搭配對比色搭配對比色搭配對比色搭配色彩的對比色彩的對比l對比對比與與調和調和就是形式美的變化與統一規律就是形式美的變化與統一規律 l在一定條件下，不同色彩之間的對比會有不同的效果。在一定條件下，不同色彩之間的對比會有不同的效果。在不同的環境下，多色彩給人一種印象，色彩單

18、一給在不同的環境下，多色彩給人一種印象，色彩單一給人另一種印象。人另一種印象。很多人都以為色彩對比主要是紅綠、橙藍、黃紫很多人都以為色彩對比主要是紅綠、橙藍、黃紫色的對比，實際色彩對比范疇不局限于這些。是指色的對比，實際色彩對比范疇不局限于這些。是指各各種色彩的界面構成中的面積種色彩的界面構成中的面積、形狀形狀、位置位置以及以及色相色相、明度明度、純度純度之間的差別，使網頁色彩配合增添了許多之間的差別，使網頁色彩配合增添了許多變化、頁面更加豐富多彩。變化、頁面更加豐富多彩。 色相對比色相對比 l是指因色相之間的差別形成的對比。當主色相是指因色相之間的差別形成的對比。當主色相確定后，必須考慮其他

19、色彩與主色相是什么關確定后，必須考慮其他色彩與主色相是什么關系，要表現什么內容及效果等，這樣才能增強系，要表現什么內容及效果等，這樣才能增強其表現力。不同色相對比取得的效果有所不同，其表現力。不同色相對比取得的效果有所不同，兩色越接近，對比效果越柔和。越接近補色，兩色越接近，對比效果越柔和。越接近補色，對比效果越強烈對比效果越強烈。 色相對比色相對比純度對比純度對比l是指不同色彩之間純度的差別而形成的對比。是指不同色彩之間純度的差別而形成的對比。色彩純度可大致分為高純度、中純度、低純度色彩純度可大致分為高純度、中純度、低純度三種。未經調和過的原色純度是最高的，而間三種。未經調和過的原色純度是最

20、高的，而間色多屬中純度的色彩，復色其本身純度偏低而色多屬中純度的色彩，復色其本身純度偏低而屬低純度的色彩范圍。純度的對比會使色彩的屬低純度的色彩范圍。純度的對比會使色彩的效果更明確肯定。效果更明確肯定。 純度對比純度對比補色對比補色對比純度對比純度對比面積對比面積對比 l 同一種色彩，面積越大，明度、純度越強，面積同一種色彩，面積越大，明度、純度越強，面積越小，明度、純度越低。面積大的時候，亮的色顯得越小，明度、純度越低。面積大的時候，亮的色顯得更輕，暗的色顯得更重。這種現象稱為色彩的面積效更輕，暗的色顯得更重。這種現象稱為色彩的面積效果。面積對比是指頁面中各種色彩在面積上多與少、果。面積對比

21、是指頁面中各種色彩在面積上多與少、大與小的差別，影響到頁面主次關系。大與小的差別，影響到頁面主次關系。 l面積的對比面積的對比,可以是中高低明度差的面積變化及可以是中高低明度差的面積變化及中高低純度差的面積變化。中高低純度差的面積變化。 面積對比面積對比色彩調和色彩調和l兩種或兩種以上的色彩合理搭配，產生統一和諧的效果，稱為色彩調和。色彩調和的幾種基本方法色彩調和的幾種基本方法l同種色的調和 l相同色相、不同明度和純度的色彩調和。使之產生相同色相、不同明度和純度的色彩調和。使之產生秩序的漸進，在明度、純度的變化上，彌補同種色秩序的漸進，在明度、純度的變化上，彌補同種色相的單調感相的單調感 l類

22、似色的調和在色環中,色相越靠近越調和。主要靠類似色之間的共同色來產生作用。 l對比色的調和對比色的調和調和方法有：調和方法有：1、提高或降低對比色的純度；、提高或降低對比色的純度；2、在對比色之間插入分割色（金、銀、黑、白、在對比色之間插入分割色（金、銀、黑、白、灰等）；灰等）；3、采用雙方面積大小不同的處理方法；、采用雙方面積大小不同的處理方法；4、對比色之間加入相近的類似色。、對比色之間加入相近的類似色。 l漸變色的調和漸變色的調和漸變色實際是一種調和方法的運用。是顏色按層漸變色實際是一種調和方法的運用。是顏色按層次逐漸變化的現象。色彩漸變就像兩種顏色間的混色，次逐漸變化的現象。色彩漸變就

23、像兩種顏色間的混色，可以有規律地在多種顏色中進行。暗色和亮色之間的可以有規律地在多種顏色中進行。暗色和亮色之間的漸變會產生遠近感和三維的視覺效果漸變會產生遠近感和三維的視覺效果。 色彩調和的經驗色彩調和的經驗l 主要是通過面積大小、冷暖對比來表達體現頁面的主次關系、主要是通過面積大小、冷暖對比來表達體現頁面的主次關系、中心思想。中心思想。l 顏色平淡可加入適當類似色對比色來使頁面產生變化。顏色平淡可加入適當類似色對比色來使頁面產生變化。顏色凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做顏色凌亂可以適當加入同類色或者類似色、白色、黑色、灰色做到統一調配的目的。到統一調配的目的。l 對比色的

24、搭配并不是就是說是絕對值的紅或者綠，藍或對比色的搭配并不是就是說是絕對值的紅或者綠，藍或橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也橙、黃或紫。對比色的第一視覺傾向越明顯配色難度就越大，也就是說越難調和；反之，傾向越不明顯的對比色越容易調和。請就是說越難調和；反之，傾向越不明顯的對比色越容易調和。請參照剛才對比色調和頁面分析例子方法。參照剛才對比色調和頁面分析例子方法。l 不是一種色彩面積用得越多或者越少、純度、明度越高不是一種色彩面積用得越多或者越少、純度、明度越高就是能突出主體的主角色，主要是根據色彩相互之間的搭配關系就是能突出主體的主角色，主要是根據色彩相互之間的搭配關系來體

25、現的。來體現的。l 一個頁面中單純絕對的使用某種顏色或是使用絕對非常一個頁面中單純絕對的使用某種顏色或是使用絕對非常多種顏色搭配，容易產生個性效果，那叫玩色彩了，限于色彩運多種顏色搭配，容易產生個性效果，那叫玩色彩了，限于色彩運用得非常熟練的朋友，但不推薦初學者使用。用得非常熟練的朋友，但不推薦初學者使用。網頁的色彩搭配網頁的色彩搭配l顏色分非彩色與彩色兩類：非彩色指黑、白、灰，顏色分非彩色與彩色兩類：非彩色指黑、白、灰，其它為彩色。網頁制作用彩色還是非彩色好呢？根其它為彩色。網頁制作用彩色還是非彩色好呢？根據專業的研究機構研究表明：彩色的記憶效果是黑據專業的研究機構研究表明：彩色的記憶效果是

26、黑白的白的3.5倍。也就是說，在一般情況下，彩色頁面較倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：主完全黑白頁面更加吸引人。我們通常的做法是：主要內容文字用非彩色要內容文字用非彩色(黑色黑色)，邊框，背景，圖片用，邊框，背景，圖片用彩色。彩色。這這 樣頁面整體不單調，看主要內容也不會眼樣頁面整體不單調，看主要內容也不會眼花花。l任何色彩都有飽和度和透明度的屬性，屬性的變化任何色彩都有飽和度和透明度的屬性，屬性的變化產生不同的色相，所以至少可以制作幾百萬種色彩。產生不同的色相，所以至少可以制作幾百萬種色彩。 網頁的色彩搭配網頁的色彩搭配l非彩色的搭配非彩色的搭

27、配 黑白是最基本和最簡單的搭配，白字黑底，黑黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。底白字都非常清晰明了。 灰色是中庸色，可以和任何彩色搭配，也可以灰色是中庸色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實在找不出幫助兩種對立的色彩和諧過渡。如果你實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差合適的色彩，那么用灰色試試，效果絕對不會太差。網頁的色彩搭配網頁的色彩搭配l顏色分：暖色系、中性系、寒色系顏色分：暖色系、中性系、寒色系l不同的顏色會給瀏覽者不同的心理感受不同的顏色會給瀏覽者不同的心理感受,如：綠色如：綠色-介于冷暖兩中色彩的中間，顯得和睦

28、，寧靜，介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。健康，安全的感覺。 它和金黃，淡白搭配，可以它和金黃，淡白搭配，可以產生優雅，舒適的氣氛。產生優雅，舒適的氣氛。l每種色彩在飽和度，透明度上略微變化就會產生每種色彩在飽和度，透明度上略微變化就會產生不同的感覺。以綠色為例，黃綠色不同的感覺。以綠色為例，黃綠色 有青春，旺盛有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。的視覺意境，而藍綠色則顯得幽寧，陰深。 網頁色彩的搭配網頁色彩的搭配l原理原理l1.色彩的鮮明性。網頁的色彩要鮮艷，容易引人注目。色彩的鮮明性。網頁的色彩要鮮艷，容易引人注目。l2.色彩的獨特性。要有與眾不同的色彩，使得大家對你的印色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強烈。象強烈。l3.色彩的合