網頁設計色彩搭配的基本知識

時間：2020-09-09 18:06:49 美工設計我要投稿

網頁設計色彩搭配的基本知識

　　色彩，是最先也是最持久地給瀏覽者以網站形象的因素。下面是小編為大家整理的網頁設計色彩搭配的基本知識，歡迎參考~

網頁設計色彩搭配的基本知識

　　一、確定主體色

　　遵循主從關系，這是最穩定的處理色彩原則。

　　其實紅、黃、綠、藍、紫等每一個字都代表一類具體的顏色，也就是色相了，它是指色彩的相貌，是區別色彩種類的名稱。在頁面上，除白色為背景外大量使用的顏色，就是這個網頁的主體顏色。如果在同一個頁面內運用了多種顏色，把握不好的話，就無法確定哪個是主體色。因為其他的顏色面積不能過大，遵循主從關系。

　　二、相近色

　　選擇色彩相近的顏色，非常容易搭配。

　　解釋一下：假設在紅色里面加白，紅色就會越來越亮，明度提高。而加黑，紅色就越來越暗。明度降低。那么色彩的明度就是指任何一種色彩的明暗程度。

　　假設在藍色里面加了黑、白、灰，或另一種顏色，就會使得藍色不純，不再鮮艷。那么色彩的純度就是指彩色系中每個色彩的鮮艷程度。

　　同色彩系(同色相)，明度不同或純度不同的幾種顏色容易搭配，比如挑幾種深淺不同的綠色來搭配，一般頁面不會有太大問題;同一頁面盡量不要多出 4種顏色。超級連接的色彩搭配也是遵循以上的原則。而文字顏色的搭配，則要與背景分離。有個小方法：打開Dreamweaver的顏色盒(如下圖)。如果它們6色為一組的話，每組都是很不錯的配色方案，但是都比較高調。其實如果搭配顏色的時候遇到麻煩，就可以在顏色面板中，調入不同的幾種色系，看看它們相鄰的顏色，或隔幾種色來搭配，找合適你頁面的顏色絕對不難。

　　三、色彩均衡

　　它是比較保險的配色互補原則。多種顏色同時存在的時候不容易把握好，一定要調和統一。

　　比如利用色彩錯視現象，其中的重量錯視在實用設計時用處很多。也就是明度高的淺亮色看起來較輕，明度低的深暗色則較重。

　　那么在網頁設計中，如果運用了較多明度較高的顏色。比如圖3中左邊是比較淺的顏色或亮的顏色，就可以用黑色，或同色相的深色小面積壓一下，點綴一下，使得頁面不要太輕，達到色彩重量的平衡。平衡的顏色較符合多數人的色彩心理。根據你的情況，如選用黑色，可能會嚴肅和莊重，而用同色相的深色，則輕松一些。

　　四、黑白灰運用

　　其實黑白灰是寶貝，萬不可小看它們。

　　如果在用色上遇到麻煩，可以大面積的加白，灰;小面積加黑來調節其他顏色搭配不當。遇到使用純度很高的顏色，比如純藍，純黃等，這樣的搭配會很鮮艷，視覺感覺比較興奮。把這樣的顏色明度抬高或降低，搭配上灰、白色，也是調節的方法。

　　五、色彩心理與情感

　　選擇適合內容風格的.顏色。

　　1.色彩有冷暖的感覺。如兒童類站點不要使用冷色系，且色彩要豐富一些。

　　2.色彩有柔軟和堅硬感。同色相，明度高，則有柔軟感。明度低，則會有堅硬感。女性站點，適量選用柔美的淡粉色或高級灰，而男性類站點，就可以使用棕色，深藍色。

　　3.從色相看，暖色給人的感覺華麗;從明度看，明度高的感覺華麗;從純度看，純度高的色彩給人的感覺華麗。由此首飾類站點可以使用高雅的咖啡和金黃色，而香水類站點可以用明度高的淡綠或淺藍色。

　　4.色彩的聯想。主要色相抽象的聯想(省略具體的聯想)：

　　紅色：熱情。橙色：溫暖、歡樂。黃色：光明、快活。綠色：和平、新鮮。藍色：安寧、平靜、理智。紫色：優雅、高貴、莊重、神秘。黑色：恐怖、死亡。白色：純潔、神圣、清凈。灰色;謙遜等等。

　　如游戲站點，適合黑色，暗色比較神秘。旅游類站點，可以選用草綠搭配黃色。政府類站點，可以使用紅色，藍色。時裝類站點，可以選擇高級灰、紫色等，突出高雅氛圍。校園類站點也適合綠色。科技類適合深藍色。新聞類適合深紅色，或黑色，搭配高級灰等等。

　　5.色彩明度的高低與聲音的高低相關。強烈的色彩如亮黃色、鮮紅色，具有尖銳、高亢的音樂感。暗濁色如海藍色、深灰色等具有低沉渾厚的音樂感。現代音像藝術正是采用了視覺與聽覺等多媒體相結合的方法，展現了豐富、新穎的視聽效果。

　　6.根據色彩的味覺感。綠色、黃綠色是未成熟的果實色彩，有酸、澀的味感。橙色、淺黃色、淺棕色、粉紅色使人想到了成熟的瓜果色彩而產生甜甜的味感。設計飲食類站點，就可以遵循以上原則。

　　六、頁面的色彩分配

　　1.網頁內容，是信息存儲空間，要求背景要亮，文字要暗，對比度要高。一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的顏色來做，淡到讓人可以忽略。

　　2.網頁標頭，是LOGO和主要信息放置的地方。一般要深色。具有較高對比度，以便用戶能夠非常方便地看到他在該站點的所在位置。標題通常與頁面其它部分有不同的"風貌"，它可以使用與網頁內容非常不同的字體或顏色組合。也可以采用網頁內容的反色。

　　3.導航菜單所在區域。把菜單背景顏色設置暗一些，然后依靠較高的顏色對比度、比較強烈的圖形元素或獨特的字體將網頁內容和菜單的不同目的準確地區分開。

　　4.側欄，盡管不是所有網頁都使用側欄，它仍不失為顯示附加信息的一個有用方式。它應與網頁內容清楚地區分開，同時也要易于閱讀。

　　5.頁腳，這一項最不重要，不應該喧賓奪主。可以考慮和側欄相同的顏色，或稍微壓一下深一些的顏色。

　　6.在配色上使用一些比較跳躍的顏色，用來引導視線。如：灰棕色為主題色。用跳躍性的橙色來做導航、按鈕，指引視線的去向。

【網頁設計色彩搭配的基本知識】相關文章：