認識了色彩吃警，并不表示你就能對顏色運用自如糕篇。配色有理性的層面，也有感性的層面酌心。配色也需要依循一定的節(jié)奏拌消。有的配色跳躍明快，有的又顯得舒緩柔和安券。我們從理性出發(fā)的同時墩崩，也要把自己的觸角深入到感性的層面去理解色彩。

配色秩序

每一種色彩都有其自身的特質(zhì)侯勉，而這一特性的發(fā)揮鹦筹，還需要依賴于色彩在整個配色時所處的位置、面積等址貌，也即色彩與其他色彩所形成的秩序铐拐。

主色

主色是指在配色中處于支配地位的色彩。在配色前练对，主色是最先確定的顏色遍蟋，例如，當我們想要設計一個珠寶展示的頁面螟凭，這個頁面所需要什么色彩時虚青，我們決定采用紫色，而紫色就是主色赂摆。主色的確定看起來并不困難挟憔，因為一開始被確定下主色只是定出一個宏觀方向，并沒有細化成具體的色調(diào)烟号。主色的選擇也非常自由绊谭，因為并沒有完全正確的“公式”，每種顏色都有它的特性和優(yōu)劣汪拥，沒有最好的顏色或最差的顏色达传。

最終確定對主色色調(diào)的選擇則需要感性的參與，你希望你的網(wǎng)站看上去“沉穩(wěn)典雅”還是“清新明快”?這些不同的感受都來自色調(diào)的制約平衡。

一般情況下宪赶，主色是配色中使用面積最多的色彩宗弯。用于主要的組件、組件的背景搂妻、大面積色塊等蒙保。

頁面中的主色是清爽的藍色。盡管背景也運用了大面積的白色欲主，但是黑白灰屬于無彩色邓厕，無彩色并不參與到配色過程中。紅色是作為襯托色而出現(xiàn)的：

襯托色

襯托色是主色以外扁瓢，為了襯托主色而出現(xiàn)的另一種色彩详恼。襯托色通常為主色的互補色或對比色。襯托色所使用的面積可大可小引几，只要達到襯托的目的即可昧互。

黃色是主色，藍色襯托色伟桅。藍黃兩色互為對比色：

襯托色也可用在面積較大的地方敞掘，和主色平分秋色，彼此呼應贿讹。

頁面的主色為橙色渐逃，而襯托色為淺色粉，這兩種色彩為鄰近色民褂，彼此飽和度上有非常明顯的對比，也能很好的襯托出主色疯潭，為頁面的氛圍增加溫度：

一組配色中一定會有一個主色赊堪，而襯托色并非必不可少。是否采用襯托色竖哩，取決于你的配色計劃哭廉。通常單一的色彩會比較單調(diào)，而利用襯托色來強化主色的豐富變化是解決這一問題的方案之一相叁。

背景色

背景色經(jīng)常表現(xiàn)為無彩色(黑遵绰、白、灰)或者低飽和度的色彩增淹。背景色主要是作為背景而存在椿访，它最好不要以非常強烈的姿態(tài)出現(xiàn)。背景色并非具有某種功能虑润，它是一個頁面的基礎底色成玫。

頁面的背景色為藍綠色到藍紫色的漸變色，因此配圖時就應該考慮與背景色的搭配協(xié)調(diào)：

黑色作為背景色時，淺米色作為主色哭当，主色和背景色之間的相得益彰猪腕，這時的背景色也可看作襯托色：

強調(diào)色

強調(diào)色是在主色以外起強調(diào)作用的色彩，可以說它是非常重要的視覺焦點钦勘。它本身具有一種獨立性陋葡，因此在配色上要與形成與主色的強烈對比。它可以是主色的對比色彻采、互補色等腐缤，使其能跳脫于主色的色彩。

頁面的主色為藍色颊亮，紅色則作為強調(diào)色柴梆，在進入另一個頁面時，紅色又作為了主色终惑，而紫色作為了強調(diào)色：

強調(diào)色所用的面積比較小绍在，只要在焦點領域運用上強調(diào)色，其本身就有著聚焦的作用雹有。有時候強調(diào)色還扮演著襯托色的角色偿渡。

單色配色法：同色同源

單色系配色是指網(wǎng)站的頁面主色只使用一種顏色，需要注意的是霸奕，所謂的單色并不“單”溜宽，往往運用單色系配色方案的是配圖較多的網(wǎng)站，這些配圖自身已經(jīng)包含著豐富的色彩质帅，從整個頁面來看适揉，色彩就并不只有主色一種了。當配圖的色彩也參與到了頁面整體的配色體系中煤惩，只需要尋找到一種與配圖都能協(xié)調(diào)的色彩作為主色嫉嘀，就能輕松掌握單色配色法的技巧。

頁面的主色為清爽的藍綠色魄揉，這時選擇的背景配圖是人臉眼睛的部分剪侮，攝影作品本身帶有柔和的肉色，與藍綠色相得益彰：

單色扮演主色的同時也扮演著強調(diào)色洛退，在配色運用中瓣俯，重要的組件、焦點的部分都可以運用這一色彩兵怯，形成明顯的視覺重點框架彩匕。而與此同時，背景色應該盡量保持黑白灰摇零，不對主色造成干擾推掸。如果想要形成一定的層次桶蝎，也可以在主色調(diào)之外通過降低其色彩飽和度或明度等方式，形成單色配色中色彩的空間視覺深度谅畅。

在單色系配色法中登渣，即使屬于同一色系，色調(diào)也會有所差異毡泻，因此這也是另一種配色方式胜茧，運用在配圖較少，且配圖色彩也并不多變的情況下仇味。

頁面主色為橙色呻顽，也在細微的地方展示出不同調(diào)性的橙色，當鼠標Hover按鈕變?yōu)楦鼮槠t的橙丹墨。背景色則用了淺橙色作為底色廊遍。這三種色彩都是橙色，而表現(xiàn)了不同的色彩空間層次：

當網(wǎng)站的配圖較多贩挣，往往既要考慮配圖本身的配色喉前、配圖與配圖間的配色、配圖色彩與單一主色間的搭配王财。

想要將頁面變得干凈清爽除了產(chǎn)品縮略圖本身要維持簡潔干凈的背景卵迂、產(chǎn)品拍攝的統(tǒng)一協(xié)調(diào)，同時也需要考慮產(chǎn)品彼此的色彩呼應：

主色的單一色調(diào)不一定用在組件上绒净，有時也采用“反白”的處理见咒，尤其是主色本身比較強烈時，填充主色作為背景挂疆，傳遞出主色強烈的表現(xiàn)效果改览。

頁面中的藍色作為背景色的同時陰影部分顯出了圖片內(nèi)容輪廓，制造出朦朧的視感缤言，反白的文字更易于閱讀：

還有一種更加純粹的單色調(diào)配色方式恃疯，將整個網(wǎng)站的配圖設定為灰度圖案，讓主色在整個黑白灰的氛圍中顯得格外醒目墨闲，從而突出主題。這樣做的好處是讓畫面更加簡約郑口、克制鸳碧，當然也就失去了繽紛華麗的氛圍。

配圖為黑白灰犬性，作為主色的橙紅色就能從中脫穎而出瞻离。這讓每個橙紅色的細節(jié)元素都格外分明：

將配圖的顏色“拿掉”是相對冒險的做法，只在一些強調(diào)圖片的個性與質(zhì)感并不急于展示產(chǎn)品所有細節(jié)給用戶的網(wǎng)站中所用較多乒裆，品牌站里可以采用這類方式來加強品牌的感染力和形象特征套利。

漸變配色法：夢幻滑翔

漸變可以視為一種效果，也可以當做一個手段。漸變中使用的多種色彩肉迫，將它們的分布呈現(xiàn)柔和過渡验辞，展示出夢幻之感。一般來說喊衫，我們安排的漸變色往往是以兩種色彩為端點跌造，中間過渡為兩種色彩的滑翔地帶，其覆蓋的色彩范圍較廣族购，因此壳贪，我們很難判斷其主色是哪一固定的色值。從色溫的角度為考慮寝杖，漸變可以有暖色漸變违施、冷色漸變，也有冷暖過渡的漸變瑟幕，而從兩端的色彩之間的關系磕蒲，又分為鄰近色漸變、對比色漸變等收苏。不同的色調(diào)漸變所呈現(xiàn)出的品牌氛圍各有千秋亿卤。不管怎樣，在輕設計中鹿霸，漸變的色彩通常集中在高明度的色調(diào)范圍排吴，讓畫面顯得更為通透柔和。漸變的色彩范圍也不宜太廣懦鼠，色彩分布太大讓畫面本身容易陷入于混沌中钻哩。

漸變常以背景的形式出現(xiàn)，或運用于較大的元素之上肛冶。根據(jù)漸變色的不同街氢，所展示的配圖以及其他組件也要根據(jù)這一漸變色而協(xié)調(diào)。

藍與紫睦袖、紫與粉色的鄰近色漸變過渡有一種夢幻般的感受珊肃，白色文字以及配圖甄選也都考慮到與漸變色彩的協(xié)調(diào)感。色彩豐富飽滿馅笙，頁面則簡潔明快：

浮動于漸變背景上方的元素色彩也可以與背景形成對比伦乔，這時，漸變色的范圍就要更為精準清晰董习，以免讓色彩變“渾濁”。畢竟在輕設計中皿淋，維持畫面的“澄清”是很重要的招刹。

利用漸變色系配色法的靈活多變恬试，在一張大型配圖上方疊加一層透明漸變，也同樣是非常流行的做法疯暑。這樣作出的效果也相當炫目耀眼训柴，能瞬間提升攝影本身的感染力。

為了讓頁面變得更為“清澈”缰儿，可以采用漸變映射的方式畦粮，即只對核心焦點運用藍綠漸變，而背景色依然維持簡潔的白底乖阵，這樣的做法更巧妙地收住了漸變大面積鋪開所形成的華麗感宣赔，而像為主角打開了特殊的鎂光燈：

利用漸變色的變化，通過切換圖片瞪浸，漸變色也隨即改變儒将。由于漸變的飽和度較高，因此其上方的元素運用白色展示对蒲，使文字清晰可辨：

漸變色鋪排整個背景钩蚊，讓頁面展示出流光溢彩的氛圍：

現(xiàn)實世界中，我們很難發(fā)現(xiàn)有一塊完全凝固不變的色彩蹈矮，比如云彩雖說是白色砰逻，但總是又隱隱透出藍色、橙色等不同的漸變色泛鸟，天空也并不盡然是全然相同的藍蝠咆，而表現(xiàn)出了深淺不一的色調(diào)。我們在設計中運用到漸變色北滥，也就是讓畫面還原更多的真實刚操。

被北極光渲染的星空本身就帶著色彩的漸變流淌，照片本身的色彩漸變已表現(xiàn)出了動態(tài)的美輪美奐再芋。

有時候背景運用漸變的同時菊霜，前景對象也運用漸變色，利用漸變色進行填充后济赎，整個畫面充滿了未來感：

還可以將漸變色運用到元素上鉴逞，這時漸變色就需要更加濃烈鮮明，從背景凸顯出來司训，形成視覺強調(diào)华蜒。

在需要被注意的大型文字中運用鮮艷度都非常高的大紅到紫色的漸變，背景采用接近無彩的暗調(diào)豁遭，讓文字更加璀璨奪目：

漸變不僅是色彩上的變化，還有更多是屬于時間的變化贺拣。開發(fā)網(wǎng)頁設計中漸變色的運用絕不僅僅止步于此蓖谢。

運用漸變色增加色彩的豐富感捂蕴，同時又讓畫面不至于凌亂。這在很多品牌站中所用較多闪幽。如果希望頁面顯得嚴肅啥辨，可以限制漸變所用的范圍《㈦纾總之溉知，漸變是一種“夢幻”的手段，而絕對非目的腕够。

多色配色法：顏色的加減乘除

色彩不僅有色相级乍，還包括飽和度、明度帚湘、色溫等特質(zhì)玫荣，與此同時，從心理層面上還會衍生出色彩的重量感大诸、遠近距離等心理感受捅厂，兩種不同的色彩相互搭配，通過彼此的比例大小關系會衍生出更多復雜的影響资柔。

雙色互補

將色環(huán)上處于180°相對而存在的色彩進行搭配焙贷，這兩種色彩在視覺上形成互補關系。我們知道色彩并不能簡單陳述為紅色贿堰、藍色辙芍，因此在相對的關系上也不能簡單就概括紅與藍是互補這樣籠統(tǒng)的結論，因為實際上紅色和藍色的色調(diào)都高低明暗種類繁多官边。而我們知道處于相對180°位置的一組色彩其本身相互補充又相互制衡的關系沸手，在實際運用中會催生一種平衡的視覺滿足感。我們要做的依然是從情感上而非理性層面打開視覺的脈輪注簿。

互補色處于色環(huán)上兩兩相對的位置契吉，網(wǎng)頁設計中通常使用其中一個色彩作為主色或背景色，另一個作為強調(diào)色或襯托色而加以運用：

當背景色為藍色的同時诡渴，以橙色作為強調(diào)色捐晶，藍色和橙色為一組互補色：

雙色互補在運用面上并非對半平分，而是有選擇的采取一主一輔有機結合的方式妄辩，這樣有利于突出色彩的性格主題惑灵。

三色對比

處于色環(huán)上距離彼此120°位置的三種色彩，兩兩之間彼此為對比色眼耀，而這三種色彩的搭配也會形成非常和諧的組合英支。

此外，另有一類三色組合哮伟，是以其中兩種色彩彼此距離60°干花，第三種色位于它們相對180°位置上妄帘。利用前兩種色彩共同的力量而和另一個色彩形成相互制衡的關系，同樣能催生出另一種和諧池凄。

三色對比有兩種情況抡驼，一種是在色環(huán)上選取彼此間隔120°的色彩，另一種是有某個色彩與其他兩個色彩保持180°相對的關系：

當然肿仑，在網(wǎng)頁設計中致盟，挑選三種色彩運用到頁面中，要主要對配圖本身色彩加以控制尤慰，否則容易讓頁面顯得凌亂馏锡。尤其是輕質(zhì)風格的設計中，色彩盡量予以控制在三種以內(nèi)割择，如果要選擇這類配色法眷篇，應該盡量選擇明度較高、飽和度較低的色彩荔泳，沖淡色彩彼此的強烈沖擊蕉饼。最好的辦法仍然是以某一個色彩作為主色，其他兩種色彩起強調(diào)玛歌、對比的作用昧港。

網(wǎng)頁設計選用藍色、紫紅和粉紅的三色搭配支子，運用了三色對比创肥，看上去色彩協(xié)調(diào)、活潑值朋。網(wǎng)頁所采用的插畫配圖也遵循總的配色規(guī)律叹侄，保持了頁面配色風格的統(tǒng)一性：

沒有運用配圖的時候，整個頁面回歸到極簡的狀態(tài)昨登，這時運用純色對比趾代，就是運用色彩本身的魅力來感染用戶》崂保可以說撒强，這樣的配色方式比較安全，讓審美變得更加純粹笙什。

頁面被三種色彩均等分布飘哨，呈現(xiàn)出非常嚴格的平衡感：

就像我們曾經(jīng)說過，對單個頁面來說琐凭，網(wǎng)頁設計會有個全局的概念芽隆。有時候，網(wǎng)頁中一個頁面，或者一屏就可以被看作一件平面作品摆马。所謂“三色”可以是從整個網(wǎng)頁出發(fā)臼闻，也可以是從一個屏幕上來看。即使我們發(fā)現(xiàn)有的網(wǎng)頁運用了不止三種顏色囤采，但在一個屏幕中所出現(xiàn)色彩仍然控制在了三色對比的狀態(tài)。網(wǎng)頁的動態(tài)效果更是為配色的多變性增加了更多的靈動空間惩淳。

為了體現(xiàn)出嬰兒系列產(chǎn)品品牌的活潑童趣蕉毯，運用多種色彩可以表現(xiàn)出五彩繽紛，而選用粉嫩的色調(diào)則強調(diào)了初生嬰兒的柔和感思犁。頁面選用了藍色代虾、紫色、綠色等色彩作三色調(diào)和激蹲，往下拖動時棉磨，粉紅色的出現(xiàn)讓頁面轉向了更加溫柔的氛圍，卻又與原有色彩無沖突：

一屏一色

我們從一個屏幕的視覺出發(fā)学辱，而非從全局來看乘瓤，一個屏幕運用一個單色進行搭配，是行之有效的極簡風格配色法策泣。它很好的解決了色彩單一的問題衙傀，與此同時，整個網(wǎng)頁依然保有豐富多彩的色彩印象萨咕。這類配色技巧在許多展示類的網(wǎng)頁中常見统抬。

每一個頁面只運用一種主色，雖然整個頁面由多色組成危队，但色彩與色彩之間呈現(xiàn)出了豐富的動態(tài)的和諧關系：

每一屏運用不同的背景色蒙谓，配圖以及網(wǎng)頁元素的色彩，比如橙色的按鈕和配圖與背景色相協(xié)調(diào)：

網(wǎng)頁中的頁面切換也非常靈活茧跋，可以通過鼠標滾動實現(xiàn)逃延，還能通過切換按鈕切換主題畫面，也能達到一屏一色的目的盅弛。

EXTET.R的首頁設計非常巧妙地安排了一個類似時鐘一樣的圓形滾動播放主屏畫面钱骂，畫面采用不同的背景色和不同的展示主題。造型別致新穎：

大多時候挪鹏，多色配色時所選用的配圖應該盡量保持不驚擾原有配色的氛圍见秽，或根據(jù)配圖來決定網(wǎng)頁的配色方案。

顏色與顏色搭配絕不是簡單相加讨盒，而是運用色彩的特性解取，作出更加豐富的加減乘除，其結果不是得到另一個單一的色彩感受返顺，而是綜合其上的視覺效果和情感體驗禀苦。與其說色彩像幻術一樣無法抓取蔓肯，不如說對于配色，忘掉條條框框的理性分析振乏，或許能得到更多蔗包。

資源地址: http://blog.silucg.com/UI/jc/7192.html