- 網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的原則與技巧 推薦度：
- 相關(guān)推薦
網(wǎng)頁(yè)設(shè)計(jì)中的色彩搭配原則
色彩搭配既是一項(xiàng)技術(shù)性工作，同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。下面小編為大家整理了網(wǎng)頁(yè)設(shè)計(jì)中的色彩搭配原則，希望能幫到大家！
網(wǎng)頁(yè)設(shè)計(jì)中的色彩搭配
自然界中有好多種色彩，比如玫瑰是紅色的，大海是藍(lán)色的，桔子是橙色的……但是最基本的有三種(紅，黃，藍(lán))，其它的色彩都可以由這三種色彩調(diào)和而成。我們稱這三種色彩為“三原色”。現(xiàn)實(shí)生活中的色彩可以分為彩色和非彩色。其中黑白灰屬于非彩色系列。其它的色彩都屬于彩色。任何一種彩色具備三個(gè)特征：色相，明度和純度。其中非彩色只有明度屬性。色相，指的是色彩的名稱。這是色彩最基本的特征，是一種色彩區(qū)別于另一種色彩的最主要的因素。比如說(shuō)紫色，綠色，黃色等等都代表了不同的色相。
明度，也叫亮度，指的是色彩的明暗程度。明度越大，色彩越亮，比如一些購(gòu)物，兒童類網(wǎng)站，用的是亮麗的顏色，讓人感覺(jué)絢爛多姿，生氣勃勃;明度越低，顏色越暗，主要用于一些游戲類網(wǎng)站，充滿神秘感;一些個(gè)人站長(zhǎng)為了體現(xiàn)自身的個(gè)性，也可以運(yùn)用一些暗色調(diào)來(lái)表達(dá)個(gè)人的一些孤僻，或者憂郁等性格。
純度，指色彩的鮮艷程度，純度高的色彩純，鮮亮;純度底的色彩暗淡，含灰色。
暖色，如黃色，橙色，紅色，紫色等都屬于暖色系列。暖色一般用于購(gòu)物類網(wǎng)站用以體現(xiàn)商品的琳瑯滿目，用于兒童類網(wǎng)站表達(dá)活潑，溫馨等效果。
冷色，如綠色，藍(lán)色，藍(lán)紫色等等都屬于冷色系列。冷色一般應(yīng)用于一些高科技，游戲類網(wǎng)站，主要表達(dá)嚴(yán)肅，穩(wěn)重等效果。一個(gè)網(wǎng)站要想讓人看上去舒適協(xié)調(diào)，除了文字、圖片等內(nèi)容的合理排版，恰當(dāng)?shù)剡M(jìn)行色彩搭配是非常必要的。
色彩搭配既是一項(xiàng)技術(shù)性工作，同時(shí)它也是一項(xiàng)藝術(shù)性很強(qiáng)的工作，因此，設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)除了考慮網(wǎng)站本身的特點(diǎn)外，還要遵循一定的藝術(shù)規(guī)律，從而設(shè)計(jì)出色彩鮮明、性格獨(dú)特的網(wǎng)站。
一個(gè)網(wǎng)站如果只運(yùn)用一種顏色，會(huì)讓人感覺(jué)單調(diào)，乏味;但是如果將所有的顏色都運(yùn)用到網(wǎng)站中，就讓人感覺(jué)輕浮，花哨。一個(gè)網(wǎng)站的用色必須要有自己獨(dú)特的風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。
網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其它平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺(jué)，避免采用純度很高的單一色彩或者多種拼湊色彩，這樣容易造成視覺(jué)疲勞。
通常認(rèn)為一個(gè)頁(yè)面盡量不要超過(guò)4種色彩，用太多的色彩讓人感覺(jué)沒(méi)有方向，沒(méi)有側(cè)重點(diǎn)。當(dāng)主題色確定好，選擇其它配色時(shí)，一定要考慮其它配色與主題色的關(guān)系，要體現(xiàn)什么樣的效果。然后根據(jù)效果來(lái)決定哪種因素占主要地位，是明度，純度還是色相。
盡管網(wǎng)頁(yè)設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺(jué)，但可以通過(guò)調(diào)整色彩的飽和度和透明度使其產(chǎn)生變化，使網(wǎng)站“活”起來(lái)。
所謂相近色，就是色環(huán)中相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為相近色。采用相近色來(lái)設(shè)計(jì)網(wǎng)頁(yè)可以使網(wǎng)頁(yè)避免色彩雜亂，給人的視覺(jué)效果舒適、自然，易于達(dá)到頁(yè)面的和諧統(tǒng)一。
互補(bǔ)色，是色環(huán)中相對(duì)的兩種色彩。如紅色跟綠色，藍(lán)色和橙色等。合理使用互補(bǔ)色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺(jué)效果;在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，互補(bǔ)色作為點(diǎn)綴，從而起到畫(huà)龍點(diǎn)睛的作用。
黑白灰是萬(wàn)能色，可以跟任意一種色彩搭配。當(dāng)你為某種色彩的搭配苦惱的時(shí)候，不防試試用黑白灰。當(dāng)你覺(jué)得兩種色彩的搭配不協(xié)調(diào)，試試加入黑色，或者灰色，或許會(huì)有意想不到的效果。白色是網(wǎng)站用的最普遍的一種顏色。很多網(wǎng)站甚至留出大塊的白色空間，作為網(wǎng)站的一個(gè)組成部分，這就是留白藝術(shù)。留白，給人一個(gè)遐想的空間，讓人感覺(jué)心情舒暢;恰當(dāng)?shù)牧舭讓?duì)于協(xié)調(diào)頁(yè)面的均衡起到相當(dāng)大的作用。
色彩的感染力是相當(dāng)大的，世界上無(wú)所謂好看的色彩或不好看的色彩，只在乎設(shè)計(jì)師如何運(yùn)用。大自然無(wú)形之手給我們展示一個(gè)色彩繽紛的世界，千變?nèi)f化的色彩配搭令人著迷;同樣，一個(gè)成功的色彩設(shè)計(jì)，它擁有生命力，可以感染觀眾情緒。為了網(wǎng)站的頁(yè)面更美觀，更舒適，更吸引他人，必須對(duì)色彩運(yùn)用多作深入的了解和研究，合理恰當(dāng)?shù)剡\(yùn)用與搭配頁(yè)面各要素間的色彩。
網(wǎng)頁(yè)設(shè)計(jì)中如何配色
有好多網(wǎng)頁(yè)設(shè)計(jì)師都愛(ài)問(wèn)這些問(wèn)題，尤其是剛?cè)胄械男率郑瑑蓚�(gè)問(wèn)題，一個(gè)配色，一個(gè)布局。
我希望大家不要從一開(kāi)始就理解錯(cuò)誤，一定記住，你是在做設(shè)計(jì)。行業(yè)和設(shè)計(jì)不沖突的。說(shuō)這個(gè)配色，這個(gè)布局，這個(gè)標(biāo)示就適合你們這個(gè)行業(yè)這類的話，我個(gè)人認(rèn)為，只是說(shuō)給普通客戶聽(tīng)聽(tīng)罷了。腦子里時(shí)刻要有印象，你是做設(shè)計(jì)的，不是美工。但是百分之90的設(shè)計(jì)師，都變成美工了。社會(huì)需求吧。
首先，你要明白，大氣不是大。布局的時(shí)候，分清主次，考慮一下用戶的瀏覽習(xí)慣，考慮人的視覺(jué)焦點(diǎn)，規(guī)劃一下整體感，比如logo ，banner和其他欄目這些要放的位置。
然后開(kāi)始決定你的配色，你可以先用一些色塊分布出來(lái)，然后你自己感覺(jué)一下，你的顏色科學(xué)不科學(xué)，能不能讓大部分人接受。
網(wǎng)站的設(shè)計(jì)和平面的設(shè)計(jì)區(qū)別還是很大的，你做的時(shí)候要考慮到程序?qū)崿F(xiàn)后的效果。
你可以先從這幾個(gè)方面考慮。主色，布局，字體，對(duì)比。
頭部簡(jiǎn)單，但是一定要注意細(xì)節(jié)，細(xì)節(jié)不是繁瑣，切記不要為了細(xì)節(jié)而讓細(xì)節(jié)的部分變的繁瑣。
banner這個(gè)地方我個(gè)人認(rèn)為就像是畫(huà)龍點(diǎn)睛，這里能體現(xiàn)這個(gè)網(wǎng)站的主題內(nèi)容，這里就要用到許多的平面設(shè)計(jì)能力。
做的時(shí)候要思路清晰，不要做一些沒(méi)必要的東西，越做越繁瑣。
你可以用到你學(xué)過(guò)的平面構(gòu)成，立體構(gòu)成，色彩構(gòu)成等這些知識(shí)。
我建議做完以后，直接關(guān)機(jī)，不要去想，直接忘記，第二天打開(kāi)，按照一個(gè)旁觀者的角度，你在看一下。你就明白自己什么地方不足，或者什么地方好了。
具體的建議沒(méi)有，就是一些方法，僅供你參考一下。
我覺(jué)得設(shè)計(jì)這個(gè)東西，根本沒(méi)法教。能教的只是你如何去應(yīng)用，設(shè)計(jì)還是要靠自己
(一)紅色搭配：紅色是非常容易吸引人注意力的顏色，能夠給人以溫暖熱情的感覺(jué)，這是紅色的優(yōu)點(diǎn)，但是也有其致命的缺點(diǎn)，即容易引起視覺(jué)疲勞。紅色在各種媒體中被廣泛的運(yùn)用，主要在于醒目且給人有活力、積極、熱誠(chéng)、溫暖、積極向上的精神和形象。
紅色的搭配主要是：(1)在紅色中加入少量的黃，會(huì)使其熱力強(qiáng)盛，趨于躁動(dòng)和不安(2)在紅色中加入少量的藍(lán)，會(huì)使其熱性減弱，更加文雅和柔和(3)在紅中加入少量的白，會(huì)使其性格變的溫柔，呈現(xiàn)含蓄、羞澀和嬌嫩。
(二)黃色的色彩搭配：黃色通常呈現(xiàn)敏感和不安寧的視覺(jué)印象，這是它的缺點(diǎn)。但是黃色因有著金色的光芒，能夠象征希望、權(quán)力和功名，還帶有神秘的宗教色彩，有時(shí)候，黃色還能給人明亮、充滿甜蜜和幸福感的感覺(jué)，很多設(shè)計(jì)師通常在作品中運(yùn)用黃色來(lái)表現(xiàn)喜慶和華麗的感覺(jué)。
黃色的搭配主要是：
(1)在黃色中加入少量的藍(lán)，呈現(xiàn)嫩綠色，去其高傲，成其平和、潮潤(rùn)的視覺(jué)效果
(2)在黃色中加入少量的紅，呈現(xiàn)橙色，去其冷漠、高傲，成其分寸感極強(qiáng)的熱情和溫暖
(3)在黃色中加入少量的白，呈現(xiàn)柔和色彩，去其冷漠和高傲，成其含蓄、親和。
(三)藍(lán)色的色彩搭配：藍(lán)色給人以冷漠，性格樸實(shí)而內(nèi)向的感覺(jué)，但也呈現(xiàn)樸實(shí)、內(nèi)向性格，可以為活躍、具有較強(qiáng)擴(kuò)張力的色彩提供深遠(yuǎn)、廣埔、平靜的空間。此外，藍(lán)色還可以淡化處理保持個(gè)性色彩，即便是在藍(lán)色中分別加入少量的紅、黃、黑、橙、白等色，均不會(huì)對(duì)藍(lán)色的性格構(gòu)成較明顯的影響力。
藍(lán)色的搭配主要是：
(1)藍(lán)色中加入橙黃，將呈現(xiàn)甜美、亮麗和芳香
(2)藍(lán)色中加入橙白，將凸顯焦躁無(wú)力的橙色知覺(jué)。
(四)綠色的色彩搭配：綠色是黃藍(lán)兩色綜合而成，將黃色的擴(kuò)張感和藍(lán)色的收縮感相中和，將黃色的溫暖感與藍(lán)色的寒冷感相抵消，因此，綠色是最平和、安穩(wěn)、柔順、恬靜、潢足、優(yōu)美的色彩。
綠色的搭配主要是：
(1)綠色中黃色較多時(shí)，呈現(xiàn)活潑、友善和幼稚的性格
(2)綠色中加入少量的黑，呈現(xiàn)莊重、老練和成熟
(3)在綠色中加入少量的白，呈現(xiàn)潔凈、清爽和鮮嫩。
(五)紫色的色彩搭配。紫色在所有色彩中明度最低的一種顏色，這種低明度給人沉悶和神秘的感覺(jué)。
紫色的搭配主要是：
(1)在紫色中紅的成份較多時(shí)，呈現(xiàn)壓抑感和威脅感。
(2)紫色中加入白，可以去其沉悶的感官感受，呈現(xiàn)優(yōu)雅、嬌氣，并充滿女性的魅力。
(六)白色的色彩搭配。白色的色感光明，性格樸實(shí)、純潔、快樂(lè)，又具有圣潔的不容侵犯的感覺(jué)，所以說(shuō)如果在白色中加入其它任何色，都會(huì)影響其純潔性，使其性格變的含蓄。
拓展：網(wǎng)頁(yè)設(shè)計(jì)中用到的色彩對(duì)比
一個(gè)網(wǎng)頁(yè)是由很多個(gè)不同元素構(gòu)成的，這些元素的重要性都不同，有些元素需要特別突出、有些元素彼此之間存在著聯(lián)系，而另外的元素之間則一點(diǎn)關(guān)聯(lián)性都沒(méi)有。如何去平衡元素中的等同和不同的元素特性，就顯得特別重要，因?yàn)槿绻荒軐⑦@些元素在一個(gè)畫(huà)面當(dāng)中協(xié)調(diào)處理，這個(gè)畫(huà)面便變得突兀。對(duì)比就是兩個(gè)或更多個(gè)元素之間的不同。通過(guò)對(duì)比，設(shè)計(jì)師就可以創(chuàng)造出視覺(jué)趣味性，同時(shí)引導(dǎo)用戶的注意力。
常見(jiàn)的對(duì)比有這么多的表現(xiàn)形式：
1) 色調(diào)上的明暗對(duì)比、冷暖對(duì)比等;
2) 形狀上的大小對(duì)比、方圓對(duì)比、粗細(xì)對(duì)比、長(zhǎng)短對(duì)比等;
3) 方向上的垂直對(duì)比、水平對(duì)比、傾斜對(duì)比等;
4) 數(shù)量上的疏密對(duì)比等;
5) 圖片上的虛實(shí)對(duì)比、黑白對(duì)比等;
6) 事物的動(dòng)靜對(duì)比等。
對(duì)比的表現(xiàn)形式比較多，今天小編先來(lái)跟大家分享一下網(wǎng)頁(yè)界面當(dāng)中的——色彩對(duì)比。
不同的顏色可以表達(dá)不同的感受，顏色上的對(duì)比也有很多，這個(gè)跟色彩構(gòu)成有很大的關(guān)系。顏色對(duì)比主要分色相對(duì)比、明度對(duì)比和純度對(duì)比。
色相即各類顏色色彩的相貌稱謂，任何黑白灰以外的顏色都有色相的屬性。如朱紅、普藍(lán)、檸檬黃等。色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)。
明度指的就是色彩的亮度。比如：深黃、中黃、淡黃、檸檬黃等，這些黃顏色在明度上就不一樣。顏色有深淺、明暗的變化，這些顏色在明暗、深淺上的不同變化，也就是色彩的明度變化。
純度指的是色彩的鮮艷和深淺程度。純度是色彩鮮艷度的判斷標(biāo)準(zhǔn)，純度最高的色彩就是原色，隨著純度的降低，色彩就會(huì)變暗、變淡。
一、色相對(duì)比。
兩種以上色彩組合后，由于色相差別而形成的色彩對(duì)比效果稱為色相對(duì)比。它是色彩對(duì)比的一個(gè)根本方面，其對(duì)比強(qiáng)弱程度取決于色相之間在色相環(huán)上的距離(角度)，距離(角度)越小對(duì)比越弱，反之則對(duì)比越強(qiáng)。
根據(jù)色相環(huán)可以看出色環(huán)上的顏色是多豐富多彩，隨意抽取兩個(gè)顏色，都能形成不一樣的對(duì)比。因此色相對(duì)比又分很多，有補(bǔ)色對(duì)比、對(duì)比色對(duì)比、鄰近色相對(duì)比等等。
1、互補(bǔ)色對(duì)比
在色相環(huán)的組成中，相隔 180 度的色彩我們稱之為互補(bǔ)色：紅與綠互補(bǔ)，黃與紫互補(bǔ)而藍(lán)色與橙色互補(bǔ)�；パa(bǔ)色的對(duì)比效果強(qiáng)烈、眩目、響亮、極有力，但也需要慎用，因?yàn)槭褂貌划?dāng)易產(chǎn)生幼稚 、原始、粗俗、不安定、不協(xié)調(diào)等不良感覺(jué)。
2、鄰近色相對(duì)比
鄰近色對(duì)比好理解一些，好比黃色跟橙色可以稱為鄰近色，草綠和果綠也可稱為鄰近色。色相環(huán)上相鄰的二至三色對(duì)比，色相距離大約30度左右，為弱對(duì)比類型。鄰近色相對(duì)比效果感覺(jué)柔和、和諧、雅致、文靜，但也會(huì)讓人感覺(jué)單調(diào)、模糊、乏味、無(wú)力，所以必須調(diào)節(jié)明度差來(lái)加強(qiáng)效果。
3、對(duì)比色對(duì)比
色相對(duì)比距離約120度左右，為強(qiáng)對(duì)比類型，要比鄰近色相對(duì)比鮮明、強(qiáng)烈、飽滿。豐富，容易使人興奮激動(dòng)和造成視覺(jué)以及精神的疲勞。如黃綠與紅紫色對(duì)比等，但是顏色之間協(xié)同統(tǒng)一的工作也比較難做。這種對(duì)比不容易單調(diào)，但一般需要采用多種調(diào)和手段來(lái)改善對(duì)比效果，不然就容易產(chǎn)生雜亂和過(guò)分刺激的效果。
4、零度對(duì)比
零度對(duì)比其實(shí)也分了幾塊，比如無(wú)彩色對(duì)比、無(wú)彩色與有彩色的對(duì)比、同種色相對(duì)比和無(wú)彩色與同種色相比四種，這塊只要理解下無(wú)彩色的概念即可。
無(wú)彩色指的就是沒(méi)有色相的顏色，前面小編說(shuō)的顏色都有色相，但黑白灰這三種是沒(méi)有色相的，所以也被稱為無(wú)彩色。
無(wú)彩色對(duì)比：如黑與白 、黑與灰、中灰與淺灰，或黑與白與灰、黑與深灰與淺灰等。
無(wú)彩色與有彩色的對(duì)比：如黑與黃、白與藍(lán)等。
同種色相對(duì)：如藍(lán)與淺藍(lán)(藍(lán)+白)色對(duì)比，橙與咖啡(橙+灰)或綠與粉綠(綠+白)與墨綠(綠+黑)色等對(duì)比。
無(wú)彩色與同種色相比：如白與深藍(lán)與淺藍(lán)、黑與桔與咖啡色等對(duì)比。
二、明暗對(duì)比。
兩種以上色相組合后，由于明度不同而形成的色彩對(duì)比效果稱為明度對(duì)比。它是色彩對(duì)比的一個(gè)重要方面，是決定色彩方案感覺(jué)明快、清晰、沉悶、柔和、強(qiáng)烈、朦朧與否的關(guān)鍵。
三、純度對(duì)比。
純度指的就是飽和度，檸檬黃的純度是比較高的，當(dāng)加入一點(diǎn)紅色之后就變成橙色，因而檸檬黃和橙色就形成了純度上的對(duì)比。兩種以上色彩組合后，由于純度不同而形成的色彩對(duì)比效果稱為純度對(duì)比。它是色彩對(duì)比的另一個(gè)重要方面，但因其較為隱蔽、內(nèi)在，故易被忽略。在色彩設(shè)計(jì)中，純度對(duì)比是決定色調(diào)感覺(jué)華麗、高雅、古樸、粗俗、含蓄與否的關(guān)鍵。
【網(wǎng)頁(yè)設(shè)計(jì)中的色彩搭配原則】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的原則與技巧12-15
網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的運(yùn)用12-03
網(wǎng)頁(yè)設(shè)計(jì)之色彩搭配的技巧03-18
網(wǎng)頁(yè)設(shè)計(jì)色彩搭配案例有哪些04-17
網(wǎng)頁(yè)設(shè)計(jì)中色彩的運(yùn)用11-17
網(wǎng)頁(yè)設(shè)計(jì)的原則06-13
網(wǎng)頁(yè)設(shè)計(jì)對(duì)色彩的思考12-05
生活中的色彩搭配教學(xué)教案04-04