- 相關推薦
網頁設計中怎么配色
網頁設計怎么配色?為什么我總是配不好顏色，弄的整個頁面亂七八糟?配色有沒有方法?方法懂了之后有無什么捷徑?網頁設計中配色要弄好其實也不難，下面是小編為大家整理的網頁設計中怎么配色，歡迎閱讀！
選色：這是最基本的一步
開始設計網頁的時候應該規(guī)劃好選取哪些顏色
顏色的選取不是無中生有的
是根據網站的產品定位、風格、以及需要傳達出的理念等為基礎進行選取
而不是無中生有隨著自己的喜好來選取
那具體怎么選
很簡單，比如51rgb在線教育，因為是一家在線教育機構
口號是讓一切學習變得簡單起來
所以主題定位是輕松，愉悅的感覺
可以選擇清爽宜人的淡青藍色為主色
而不會去選擇紫色系這樣的神秘色調
也不會去選擇紅橙色系這樣的火熱的色調
那么換你為客戶進行網頁設計的時候
需要怎樣配色是不是有點思路了
分配顏色：這是第二步
當你選好顏色之后就該考慮怎么把他們分配到網頁的每個版塊
分配顏色也是很講究的
色彩分為主色、輔助色、點綴色
什么是主色?——面積最大的!最大!大!
是能夠傳達出網站整體風格的顏色，
把你前面選擇好的顏色拿一個出來定為主色!
什么?你還要問那到底用在哪些地方是大的區(qū)塊?
banner的顏色啊
導航的背景色啊
文字標題的顏色啊
什么是輔助色?比主色用到少一半的!一半!半!
(其實也沒誰規(guī)定是一半拉，反正就是比主色用到要少的咯)
注意(敲黑板了)
點綴色一般是飽和度較高的顏色，
一般用在網頁中的強調內容或者突出的內容，
如按鈕、鏈接等，
三種顏色在整個網頁的比重大概是60%、30%、10%
拓展閱讀：
網頁設計黃金配色的6條原則
一、需要配色的是你的畫布，而不是你的圖片
一個在網頁設計中最根本的原則是，無論你花了多少時間創(chuàng)造了一個輝煌的設計，其最終的作用是發(fā)揮出內容的核心位置。你的配色方案永遠不應該比它呈現的內容的更加“響亮”。你的設計應該是在后臺，目的是幫助突出網站的內容。
淡色的畫布突出了圖像，而明亮的畫布反而不能突出你的內容。(別笑，后者是發(fā)生在網絡上的真實案例^—^)
用Photoshop或者Sketch等軟件設計網站的時候，創(chuàng)建設計的過程往往是相互獨立的。有些設計單個看起來很不錯，也能被你的客戶所接受，但是當它真正被設計成網頁的時候不適當的配色往往會分散訪客的注意力。事實上，網頁設計的過程是和內容緊密相連的，很多制作高品質的網頁看上去空空蕩蕩，幾乎沒有內容。
這是一個偉大的想法：你可以在你的網站上先鋪陳出你的內容，用設計軟件也好用代碼也好，然后在你內容的周圍設計你的網頁。當然這也是一個特殊情況，如果一個特定風格的圖像和照片都能和你的設計和諧的融為一體，那么你的設計配色才算是完美。試想一下，網站的配色對內容而言就像衣服對于人的重要性，對此你必須制定一套完美的并且合身的衣服。
二、選擇簡單的灰色作為你網站的基調
你可以為你的網站基調選擇無數種顏色，不過我建議你采用最簡單的顏色，比如白色/淺灰色與深灰色的搭配文字背景。
你可以看看任何熱門的網站、模版、主題，白色或淺灰色與深灰色搭配成了大多數的選擇，這當然也是有充分理由的。這樣的搭配對訪客而言提高了你內容的可讀性，并且把你的圖片突出在最前方。
一般來說，你的文字最好避免使用墨黑色，深灰色一般更容易閱讀。我們提供一個比較舒服的文字顏色范圍：#333333到#666666。
對于你的背景色，全白色(#FFFFFFF)是可以搭配任何文本的最安全的顏色。如果你想選用其他的背景顏色，我們建議采用#FFFFFF到#CCCCCC
當然，這些顏色的選擇都不是固定死的。只不過如果你是新手，以上的配色方案你可以放心使用。
三、只選擇一種顏色突出顯示
如果你選擇好幾種不同的色調來，那么你的配色方案絕大多數是有問題的。你顏色用得越多，你的頁面就越來越難以控制。所以，在你網頁以灰色基調的前提下，你最好只選擇一種鮮艷的顏色來作為你想要突出的事物，比如標題、菜單、按鈕等等。你的高亮顏色可以是藍色、紅色、綠色，等等。
你最好選擇與你的基調顏色相關的高亮顏色。打開你的顏色選擇器，并單擊你彩色方塊的中心。
向上或向下移動你的滑塊，你可以仔細選擇你認為最合適的顏色。
現在，你設計的頁面有了三個基本的顏色：背景色、文本色和高亮色。在以后你也可以選擇一種以上的高亮色，但現在對于新手的你來說還是選擇一種比較合適。你現在已經掌握了基本的配色，如果你有信心，你以后還可以嘗試更多種不同的方案。
你剛剛學到：
學會了如何選擇“色相”。概括來說，色相是基本色，當你移動滑塊，你會看到h值在顏色選擇器中的變化。
“H”代表色相，一旦你選擇了你的高亮顏色，文本框中顯示的就是你當前顏色的色相。
四、如果有疑問，請使用藍色
如果你對你的高亮色的選擇有疑惑的話，不妨使用藍色。藍色是一種彈性比較大的顏色，可以和很多種顏色搭配。黃色和紫色也很不錯，但是如果使用不當會適得其反。
另一方面，如果你是用藍色，那么你用錯顏色的概率就會很低。如果你正猶豫著不知道用什么顏色好，不妨使用藍色。比較安全的藍色包括從H235到H190，從海軍藍到深藍色。
如果是我的話，我通常選擇H205的藍色，如果你選定了一種顏色作為你的高亮色，那么也請你在其他需要的地方使用這種顏色。如果你的按鈕、標題等需要高亮，把它們的顏色也換成同一種藍色。在下面這個例子中我把白色換成了藍色。
五、給你的高亮色增加變化
你一旦選擇了高亮的顏色，從該點移動滑塊來選擇接下來的顏色。在你的設計中也需要其他的顏色，高亮色的稍微變化會讓你的顏色選擇變得簡單。
使用這些類型的顏色變化的東西，如：
懸停效果：
邊界：
通過突出顯示顏色：
漸變：
光影效果：
六、盡量不要使用顏色選擇器右上角的顏色
顏色選擇器的右上角是一塊肥沃的土地。在右上角的顏色就像F1賽車;他們可以執(zhí)行出驚人的效果，而且非常誘人，但通常想用好需要大量的經驗。如果沒有這種經驗，他們可能會導致事故的發(fā)生，所以最好以削弱你的顏色，最好都保持比較淡化的色彩。
【網頁設計中怎么配色】相關文章：
網頁設計配色方案12-27
網頁設計的6條配色原則01-05
網頁設計中顏色的情感含義09-20
網頁設計中的色彩搭配原則01-04
怎么用Dreamweaver設計網頁12-28
網頁設計中色彩搭配的原則與技巧12-15
網頁設計中的頁面尺寸標準參考12-19
網頁設計中重要標簽必不可少11-11
網頁設計中圖片有哪些常見的使用技巧03-21