版權(quán)申明：本文原創(chuàng)作者“@飛屋睿UIdesign”，感謝“@飛屋睿UIdesign”的原創(chuàng)經(jīng)驗分享！

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

配色秩序

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

主色

主色是指在配色中處于支配地位的色彩。在配色前，主色是最先確定的顏色，例如，當(dāng)我們想要設(shè)計一個珠寶展示的頁面，這個頁面所需要什么色彩時，我們決定采用紫色，而紫色就是主色。主色的確定看起來并不困難，因為一開始被確定下主色只是定出一個宏觀方向，并沒有細(xì)化成具體的色調(diào)。主色的選擇也非常自由，因為并沒有完全正確的"公式"，每種顏色都有它的特性和優(yōu)劣，沒有最好的顏色或最差的顏色。

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

一般情況下，主色是配色中使用面積最多的色彩。用于主要的組件、組件的背景、大面積色塊等。

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

襯托色

襯托色是主色以外，為了襯托主色而出現(xiàn)的另一種色彩。襯托色通常為主色的互補(bǔ)色或?qū)Ρ壬Ｒr托色所使用的面積可大可小，只要達(dá)到襯托的目的即可。

黃色是主色，藍(lán)色襯托色。藍(lán)黃兩色互為對比色：

襯托色也可用在面積較大的地方，和主色平分秋色，彼此呼應(yīng)。

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

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

背景色

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

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

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

強(qiáng)調(diào)色

強(qiáng)調(diào)色是在主色以外起強(qiáng)調(diào)作用的色彩，可以說它是非常重要的視覺焦點(diǎn)。它本身具有一種獨(dú)立性，因此在配色上要形成與主色的強(qiáng)烈對比。它可以是主色的對比色、互補(bǔ)色等，使其能跳脫于主色的色彩。

頁面的主色為藍(lán)色，紅色則作為強(qiáng)調(diào)色，在進(jìn)入另一個頁面時，紅色又作為了主色，而紫色作為了強(qiáng)調(diào)色：

強(qiáng)調(diào)色所用的面積比較小，只要在焦點(diǎn)領(lǐng)域運(yùn)用上強(qiáng)調(diào)色，其本身就有著聚焦的作用。有時候強(qiáng)調(diào)色還扮演著襯托色的角色。

單色配色法：同色同源

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

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

單色扮演主色的同時也扮演著強(qiáng)調(diào)色，在配色運(yùn)用中，重要的組件、焦點(diǎn)的部分都可以運(yùn)用這一色彩，形成明顯的視覺重點(diǎn)框架。而與此同時，背景色應(yīng)該盡量保持黑白灰，不對主色造成干擾。如果想要形成一定的層次，也可以在主色調(diào)之外通過降低其色彩飽和度或明度等方式，形成單色配色中色彩的空間視覺深度。

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

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

當(dāng)網(wǎng)站的配圖較多，往往既要考慮配圖本身的配色、配圖與配圖間的配色、配圖色彩與單一主色間的搭配。