說起配色你會想到什麼？

像《布達佩斯大飯店》一樣豔麗唯美的電影？顔值與設計感并存的單款配色數碼産品？花樣百出的化妝品？

學習正确的配色規則與方法不僅能讓我們在做設計的時候更加得心應手，還能夠提高審美。然而，錯誤的配色方式也不能被忽視。在避免犯錯的同時，也讓我們對色彩的掌握更加深入。

同一種配色，在電影或插畫中或許是美麗的，但一旦呈現在了數碼頁面上，卻會變得晃眼。因此，為了實現更為美觀的設計，在進行頁面設計時，記得把以下幾項配色拉黑哦。

一、純黑色（#000000）

黑色在繪畫中被稱為“顔色中的皇後”。關于色彩心理學的文章都強調黑色與魅力、精緻、力量和權威的聯系。因此，“純黑色”被列入黑名單，可能會讓人覺得有些困惑。

但如果仔細觀察就會發現，優秀的作品使用的“黑”都不是純黑（#000000），而是接近于純黑的深灰色。

這是因為真正的純黑色（#000000）實際上是一種不自然的顔色，它不存在于自然界中。純黑色的産生意味着要吸收所有的光譜，而這在自然界中根本不可能發生。自然的色彩是混合且柔和的。因此，純黑色不是我們眼睛習以為常的東西，我們的大腦不習慣看到它。

純黑色（#000000）與鳕魚灰（#1111111）的對比

在界面元素中使用霓虹色

霓虹色指的是發出強烈光芒感的明亮的顔色。霓虹色雖然引人注目，卻會給眼睛和大腦帶來不适感，尤其在電子顯示屏中出現的霓虹色會更令人炫目。作為不會出現在自然界中的顔色，它們對于人的大腦來說是不熟悉的，因此大腦在處理這類信息的時候會很吃力。

在藝術作品或插畫裡，霓虹色是美麗、充滿活力且吸引人的顔色，尤其用在複古主題的作品中有非常好的效果。但是在界面設計中，它作為背景色會過度搶眼；用在文字上會導緻難以閱讀，如果強行使用，就會因為過度刺激眼睛和大腦，而大大影響用戶體驗。如果一定要使用霓虹色，盡量避開需要被閱讀的文字背景，比如主體文字，側邊欄導航欄和按鈕的背景。

霓虹色海報

對比度過高的組合

任何的高對比度色彩帶來的震撼效應都是讓人覺得兩個色彩之間會産生模糊、刺眼或者發出光暈的視覺效果。

“紅配綠”就是一個典型的反面例子。作為聖誕節的主打色，紅綠組合在頁面設計中卻很不适用。紅色給人帶來熱烈和興奮的感覺，而綠色作為冷色調，可以鎮定大腦，将兩者放在一起會使大腦在進行視覺信息處理時感到不舒服。

同樣，作為典型冷色和暖色的代表，藍色和紅色搭配雖然沒有紅綠配那麼激烈﹐但也仍然會産生沖突。同時，二次色作為原色的混合色和它的原色也很難搭配。所以在配色的時候可以規避二次色和其相鄰的原色配合使用。比如紫色是紅色和藍色的混合，就避免和紅色或藍色搭配；綠色是藍色和黃色的混合，就避免和藍色或黃色搭配；橙色是黃色和紅色的混合，就避免和黃色或紅色搭配。

紅配綠和藍配紅的效果

對比度過低的組合

避免強烈對比的顔色并不意味着應該隻使用色調和數值幾乎相同的顔色，矯枉過正同樣也是不可取的。淺色與淺色搭配，或者深色與深色搭配，導緻對比度過低，影響了可讀性，同樣也會導緻不好的用戶體驗。

比如，淺色的文字放置在白色或淺色背景中，就會讓訪問者難以弄清文本所說的内容。深色背景配上深色文字也是如此。除此之外，還有一些特定的糟糕組合，比如黃色文字配綠色背景、綠色文字配黃色背景、紅色背景配黑色、藍色和品紅文字，等等。

淺色文字放在淺色背景上的效果

多顔色背景

選擇紋理背景的時候要小心。要避免使用刺眼的顔色，這類顔色通常是通過重複使用一些色彩明亮的、尺寸很小的圖案來構成。這種背景過于鮮亮且色彩沖突性強，很容易讓文字被忽略。通常的法則是在背景裡使用不超過三種顔色；如果超過了，絕對不能超過四種顔色。

同樣的道理也适用于漸變色的使用。避免在有多個文字塊的頁面使用漸變色塊，也不要使用包含了文字顔色的漸變色塊作為背景，這樣文字就不會因為背景色的影響而被讀者忽略。在使用紋理背景的時候，必要時可以把文字放在一個能區别于背景的幹淨區域，比如給文字框設置背景或者在文字圖層的下面放一個配合文字的顔色圖層。同時切記讓文字和其他的視覺元素保持距離，這樣文字才能脫穎而出。

正确背景與文字示範

在注重色彩的時候不要忘記：顔色并不是唯一一個影響設計效果的因素，也不是一個孤立的存在，在配色的時候要綜合考量排版、插圖，内容和目标受衆等各個方面再進行選擇。很多時候，需要多次嘗試才能得到理想的效果，因此，不要害怕改動，每一次改動，必然都是為了得到更好的結果。

編 輯｜龍 一 劉佳婧

責 編｜圓 圓