- 相關推薦
網(wǎng)頁設計色彩搭配的基本知識
色彩，是最先也是最持久地給瀏覽者以網(wǎng)站形象的因素。下面是小編為大家整理的網(wǎng)頁設計色彩搭配的基本知識，歡迎參考~
網(wǎng)頁設計色彩搭配的基本知識
一、確定主體色
遵循主從關系，這是最穩(wěn)定的處理色彩原則。
其實紅、黃、綠、藍、紫等每一個字都代表一類具體的顏色，也就是色相了，它是指色彩的相貌，是區(qū)別色彩種類的名稱。在頁面上，除白色為背景外大 量使用的顏色，就是這個網(wǎng)頁的主體顏色。如果在同一個頁面內(nèi)運用了多種顏色，把握不好的話，就無法確定哪個是主體色。因為其他的顏色面積不能過大，遵循主 從關系。
二、相近色
選擇色彩相近的顏色，非常容易搭配。
解釋一下：假設在紅色里面加白，紅色就會越來越亮，明度提高。而加黑，紅色就越來越暗。明度降低。那么色彩的明度就是指任何一種色彩的明暗程度。
假設在藍色里面加了黑、白、灰，或另一種顏色，就會使得藍色不純，不再鮮艷。那么色彩的純度就是指彩色系中每個色彩的鮮艷程度。
同色彩系(同色相)，明度不同或純度不同的幾種顏色容易搭配，比如挑幾種深淺不同的綠色來搭配，一般頁面不會有太大問題;同一頁面盡量不要多出 4種顏色。超級連接的色彩搭配也是遵循以上的原則。而文字顏色的搭配，則要與背景分離。有個小方法：打開Dreamweaver的顏色盒。如果 它們6色為一組的話，每組都是很不錯的配色方案，但是都比較高調(diào)。其實如果搭配顏色的時候遇到麻煩，就可以在顏色面板中，調(diào)入不同的幾種色系，看看它們相 鄰的顏色，或隔幾種色來搭配，找合適你頁面的顏色絕對不難。
三、色彩均衡
它是比較保險的配色互補原則。多種顏色同時存在的時候不容易把握好，一定要調(diào)和統(tǒng)一。
比如利用色彩錯視現(xiàn)象，其中的重量錯視在實用設計時用處很多。也就是明度高的淺亮色看起來較輕，明度低的深暗色則較重。
那么在網(wǎng)頁設計中，如果運用了較多明度較高的顏色。比如中左邊是比較淺的顏色或亮的顏色，就可以用黑色，或同色相的深色小面積壓一下，點綴 一下，使得頁面不要太輕，達到色彩重量的平衡。平衡的顏色較符合多數(shù)人的色彩心理。根據(jù)你的情況，如選用黑色，可能會嚴肅和莊重，而用同色相的深色，則輕 松一些。
四、黑白灰運用
其實黑白灰是寶貝，萬不可小看它們。
如果在用色上遇到麻煩，可以大面積的加白，灰;小面積加黑來調(diào)節(jié)其他顏色搭配不當。遇到使用純度很高的顏色，比如純藍，純黃等，這樣的搭配會很鮮艷，視覺感覺比較興奮。把這樣的顏色明度抬高或降低，搭配上灰、白色，也是調(diào)節(jié)的方法。
五、色彩心理與情感
選擇適合內(nèi)容風格的顏色。
1.色彩有冷暖的感覺。如兒童類站點不要使用冷色系，且色彩要豐富一些。
2.色彩有柔軟和堅硬感。同色相，明度高，則有柔軟感。明度低，則會有堅硬感。女性站點，適量選用柔美的淡粉色或高級灰，而男性類站點，就可以使用棕色，深藍色。
3.從色相看，暖色給人的感覺華麗;從明度看，明度高的感覺華麗;從純度看，純度高的色彩給人的感覺華麗。由此首飾類站點可以使用高雅的咖啡和金黃色，而香水類站點可以用明度高的淡綠或淺藍色。
4.色彩的聯(lián)想。主要色相抽象的聯(lián)想(省略具體的聯(lián)想)：
紅色：熱情。橙色：溫暖、歡樂。黃色：光明、快活。綠色：和平、新鮮。藍色：安寧、平靜、理智。紫色：優(yōu)雅、高貴、莊重、神秘。黑色：恐怖、死亡。白色：純潔、神圣、清凈�；疑�;謙遜等等。
如游戲站點，適合黑色，暗色比較神秘。旅游類站點，可以選用草綠搭配黃色。政府類站點，可以使用紅色，藍色。時裝類站點，可以選擇高級灰、紫色等，突出高雅氛圍。校園類站點也適合綠色。科技類適合深藍色。新聞類適合深紅色，或黑色，搭配高級灰等等。
5.色彩明度的高低與聲音的高低相關。強烈的色彩如亮黃色、鮮紅色，具有尖銳、高亢的音樂感。暗濁色如海藍色、深灰色等具有低沉渾厚的音樂感。現(xiàn)代音像藝術正是采用了視覺與聽覺等多媒體相結合的方法，展現(xiàn)了豐富、新穎的視聽效果。
6.根據(jù)色彩的味覺感。綠色、黃綠色是未成熟的果實色彩，有酸、澀的味感。橙色、淺黃色、淺棕色、粉紅色使人想到了成熟的瓜果色彩而產(chǎn)生甜甜的味感。設計飲食類站點，就可以遵循以上原則。
六、頁面的色彩分配
1.網(wǎng)頁內(nèi)容，是信息存儲空間，要求背景要亮，文字要暗，對比度要高。一般是白黑字，如果是黑底，也可以是灰字，可以用很淡的顏色來做，淡到讓人可以忽略。
2.網(wǎng)頁標頭，是LOGO和主要信息放置的地方。一般要深色。具有較高對比度，以便用戶能夠非常方便地看到他在該站點的所在位置。標題通常與頁面其它部分有不同的"風貌"，它可以使用與網(wǎng)頁內(nèi)容非常不同的字體或顏色組合。也可以采用網(wǎng)頁內(nèi)容的反色。
3.導航菜單所在區(qū)域。把菜單背景顏色設置暗一些，然后依靠較高的顏色對比度、比較強烈的圖形元素或獨特的字體將網(wǎng)頁內(nèi)容和菜單的不同目的準確地區(qū)分開。
4.側欄，盡管不是所有網(wǎng)頁都使用側欄，它仍不失為顯示附加信息的一個有用方式。它應與網(wǎng)頁內(nèi)容清楚地區(qū)分開，同時也要易于閱讀。
5.頁腳，這一項最不重要，不應該喧賓奪主。可以考慮和側欄相同的顏色，或稍微壓一下深一些的顏色。
6.在配色上使用一些比較跳躍的顏色，用來引導視線。如：灰棕色為主題色。用跳躍性的橙色來做導航、按鈕，指引視線的去向。
企業(yè)網(wǎng)站建設各頁面色彩布局搭配技巧
網(wǎng)頁視覺水平主要由形式（或布局）、色彩、圖片和文本信息組成，設計師通常更關注形式，因為視覺沖擊、設計差異或創(chuàng)新主要依賴于形式呈現(xiàn)，色彩主要影響整體印象、設計質(zhì)量和觀眾情緒。
一、色彩在精不多
在企業(yè)網(wǎng)站頁面上，如果色彩過于復雜，會給人一種令人眼花繚亂、頭暈的感覺，肯定會讓客戶失去持續(xù)閱讀文章的細心。因此，企業(yè)網(wǎng)站建設的色彩應該是一致的，如果可以的話，試著應用一種色彩，如果色彩太簡單，簡單，可以適當?shù)鼗謴蜕实那逦�，不一樣色彩的清晰度在企業(yè)網(wǎng)站頁面的整體規(guī)劃不僅不容易使網(wǎng)站頁面看起來冗長，而且會改善網(wǎng)站頁面的紋理。除了調(diào)整色彩的清晰度外，還可以使用不一樣的圖形來消除單一色彩的缺點。
二、類似色的搭配
簡單地說，它是相似色彩之間的搭配，在主題色彩的左右距離選擇兩種相鄰的色彩。類似的色彩是常見的色彩，如黃色，給用戶一種愉快的感覺，黃色的對比度相對較低，很容易產(chǎn)生和諧的美。
三、亮度對比分析
亮度就是指色彩的亮度。亮度越大，色彩就越亮。網(wǎng)站設計中亮度較低的色彩更容易混合色彩。亮度對比度就是指由不一樣色彩之間的亮度差產(chǎn)生的對比，也是網(wǎng)頁頁面產(chǎn)生適當黑、白、灰效果的主要手段。
四、頁面布局
網(wǎng)頁的布局應該足夠合理，具有一定的層次感，有序的展示，合理的內(nèi)容分布。內(nèi)容的設計充滿了這種一定的層次感，當用戶看起來更舒適時。
網(wǎng)頁設計的色彩搭配技巧
網(wǎng)頁色彩搭配方法：
1.同種色彩搭配;
2.鄰近色彩搭配;
3.對比色彩搭配;
4.暖色色彩搭配。
1、網(wǎng)頁設計的色彩搭配技巧
1、同種色彩搭配：同種色彩搭配是指首先選定一種色彩，然后調(diào)整其透明度和飽和度，將色彩變淡或加深，而產(chǎn)生新的色彩，這樣的頁面看起來色彩統(tǒng)一，具有層次感。
2、鄰近色彩搭配：鄰近色是指在色環(huán)上相鄰的顏色，如綠色和藍色、紅色和黃色即互為鄰近色。采用鄰近色搭配可以使網(wǎng)頁避免色彩雜亂，易于達到頁面和諧統(tǒng)一的效果。
3、對比色彩搭配：一般來說，色彩的三原色(紅、黃、藍)最能體現(xiàn)色彩間的差異。色彩的強烈對比具有視覺誘惑力，能夠起到很多的作用。對比色可以突出重點，產(chǎn)生強烈的視覺效果。通過合理使用對比色，能夠使網(wǎng)站特色鮮明、重點突出。在設計時，通常以一種顏色為主色調(diào)，其對比色作為點綴，以起到畫龍點睛的作用。
4、暖色色彩搭配：暖色色彩搭配是指使用紅色橙色黃色集合色等色彩的搭配。這種色調(diào)的運用可為網(wǎng)頁營造出溫馨、和諧和熱情的氛圍。
5、冷色色彩搭配：冷色色彩搭配是指使用綠色、藍色及紫色等色彩的搭配，這種色彩搭配可為網(wǎng)頁營造出寧靜、清涼和高雅的氛圍。冷色調(diào)色彩與白色搭配一般會獲得較好的視覺效果。
6、有主色的混合色彩搭配：有主色的混合色彩搭配是指以一種顏色作為主要顏色，同色輔以其他色彩混合搭配，形成繽紛而不雜亂的搭配效果。
7、文字與網(wǎng)頁的背景色對比要突出：文字內(nèi)容的顏色與網(wǎng)頁的背景色對比要突出，底色深，文字的顏色就應淺，以深色的背景襯托淺色的內(nèi)容(文字或圖片)。反之，底色淡，文字的顏色就要深些，以淺色的背景襯托深色的內(nèi)容(文字或圖片)。
2、網(wǎng)頁設計色彩搭配原則
在選擇網(wǎng)頁色彩時，除了考慮網(wǎng)站本身的特點外還要遵循一定的藝術規(guī)律，從而設計出精美的網(wǎng)頁。
1、色彩的鮮明性：如果一個網(wǎng)站的色彩鮮明，很容易引人注意，會給瀏覽者耳目一新的感覺。
2、色彩的獨特性：要有與眾不同色彩，網(wǎng)頁的用色必須要有自己獨特的風格，這樣才能給瀏覽者留下深刻的印象。
3、色彩的藝術性：網(wǎng)站設計是一種藝術活動，因此必須遵循藝術規(guī)律。按照內(nèi)容決定形式的原則，在考慮網(wǎng)站本身特點的同時，大膽進行藝術創(chuàng)新，設計出既符合網(wǎng)站要求，又具有一定藝術特色的網(wǎng)站。
4、色彩搭配的合理性：色彩要根據(jù)主題來確定，不同的主題選用不同的色彩。例如，用藍色體現(xiàn)科技型網(wǎng)站的專業(yè)，用粉紅色體現(xiàn)女性的柔情等。
3、網(wǎng)頁設計配色技巧
1. 彩色和非彩色選用技巧
網(wǎng)頁制作是選用彩色還是非彩色好，根據(jù)專業(yè)研究表明：
彩色的記憶效果是黑白的3.5倍。也就是說，一般彩色頁面較完全黑白頁面更加吸引人。
(1)主要內(nèi)容文本用非彩色(白色、黑色或灰色)。
(2)邊框、背景或修飾圖片用彩色。
這樣頁面整體不單調(diào)，同時主要內(nèi)容也不會影響視覺效果。
2.非彩色搭配技巧
黑白是最基本和最簡單的搭配，白字黑底，白底黑字都非常清晰明了。
灰色是通用色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。
3.同色搭配技巧
同色搭配是指先選定一種色彩，然后調(diào)整該色彩透明度或飽和度(就是將色彩變淡或則加深)，產(chǎn)生新的色彩，分別應用于網(wǎng)頁各個元素上。這樣的頁面看起來色彩統(tǒng)一，富有層次感。
4.多色搭配技巧
用相反色彩。先選定一種色彩，然后選擇它的相反色，在Photoshop 中按Ctrl+Shift+I組合鍵可以快速制作反色。這樣整個頁面色彩豐富而不花俏。
用同一色系。同一色系就是感覺比較接近的色彩，例如淡藍、淡黃、淺綠或者土黃。確定色彩的方法為：首先在Photoshop里單擊工具箱中的前景色方框，然后在打開的“拾色器”對話框中選擇“顏色庫”，最后在顏色列表中選擇相鄰顏色應用即可。
【網(wǎng)頁設計色彩搭配的基本知識】相關文章：
室內(nèi)設計色彩搭配的常識04-17
服裝色彩基本知識11-23
家居色彩搭配禁忌12-06
色彩搭配在平面設計中的運用12-24
服裝色彩搭配技巧大全12-03
色彩搭配原理和技巧12-28
服裝搭配色彩學05-26
新家色彩搭配有哪些關鍵點08-19
色彩搭配技巧的色相、明度與純度解析09-14
現(xiàn)代簡約風格色彩搭配方法03-09