在網(wǎng)站設(shè)計(jì)中，配色方案直接決定用戶的第一印象和體驗(yàn)。當(dāng)咱們評論配色的時分，一般聊的是配色趨勢、配色規(guī)矩和配色方法，可是與此一同，我也應(yīng)當(dāng)合理的躲避一些比較典型的過錯配色方式。這個配色黑名單并不長，可是覆蓋了多屬的配色問題，無妨細(xì)心看看~

網(wǎng)絡(luò)是一個多彩的國際，而顏色也是網(wǎng)絡(luò)招引用戶留意力的首要手法之一，它令人發(fā)生愛好，給人帶來影響，而且經(jīng)過比照、襯托帶來愉悅的瀏覽體驗(yàn)。與此一同，顏色還是規(guī)劃趨勢中無法疏忽的一個重要組成部分，不管是扁平化規(guī)劃還是Material Design，顏色的運(yùn)用都是重中之重。

可是，用錯顏色也是常見的現(xiàn)象。有沒有特定的顏顏色配是網(wǎng)頁規(guī)劃中的大忌？有！這個必定是有的，而且還不少。這些顏色組合會讓你的網(wǎng)頁呈現(xiàn)各種各樣的問題，為配色制定一個黑名單勢在必行。今日的文章，咱們就來聊聊配色的“黑名單”吧。

太亮的霓虹色

閃亮的霓虹色看起來很有趣，好像能讓頁面顯得十分潮、十分流行。可是他們并不會讓眼睛覺得舒暢，往往會給人以“閃瞎了”的不適感覺。

霓虹色的首要問題在于運(yùn)用這種顏色的文字內(nèi)容難于閱覽，欠好辨認(rèn)，和暗顏色的布景調(diào)配的時分，這種晃眼的感覺特別明顯。而假如用霓虹色作為布景的話，這個頁面簡直是無法看的，除了霓虹色之外的內(nèi)容簡直都無法看清楚。

想處理這個問題，你能夠試著下降霓虹色的亮度，讓它看起來更暗，讓它看起來愈加微妙，同屏幕顯現(xiàn)更匹配。

這個頁面就很好的處理了這個問題，他們運(yùn)用了十分挨近霓虹色的配色，而且經(jīng)過漸變色的方法來增加頁面的豐厚度，顏色的亮度、比照度都用的適當(dāng)微妙，不會令訪客感到不適。

“震顫”的顏色

當(dāng)高飽和度的顏顏色配在一同的時分，它們會發(fā)生一種“震顫效應(yīng)”， 會讓你覺得兩種顏色之間會發(fā)生含糊、震顫或許發(fā)出光暈的視覺作用。毫無疑問，這是令人不適的。

在Josef Albers 的經(jīng)典著作《顏色交互》中描述了顏色的“震顫效應(yīng)”是如何給人帶來不安感的：“這種配色開始或許會給人帶來驚喜的作用，一同這種侵略性會讓人覺得不舒暢，特別是眼睛。你們會發(fā)現(xiàn)，這種配色很少呈現(xiàn)在廣告當(dāng)中，由于它會讓人覺得不愉快，難受。”

不過即便你沒有嘗試調(diào)配，也能夠經(jīng)過它們的基礎(chǔ)特征，合理地躲避“震顫”配色：

·它們都是高飽和度的顏色
·兩種顏色在色輪上是互補(bǔ)色
·他們在色輪上相隔180度，處于對稱的位置
·將兩種顏色轉(zhuǎn)化為灰度之后，兩者灰度十分挨近

典型的事例便是明亮的紅色和綠色。這是廣受歡迎的“圣誕節(jié)”配色，這也是遭到廣泛詬病的配色計(jì)劃之一。它首要的可訪問性問題便是，色盲的用戶是徹底分辯不出來的……

假如說你有必要運(yùn)用“震顫”配色，這個對立也不是不能調(diào)和的：加入中性的顏色將兩者分隔開就好了。

淡色+淡色

淡色+淡色的調(diào)配也是常見的過錯之一。或許你在某個平面規(guī)劃或許印刷相關(guān)的項(xiàng)目上這么配色，終究沒形成可讀性的影響，這或許是設(shè)置的問題或許色差形成的，可是在絕大多數(shù)的情況下，是過錯的。

不管你怎么規(guī)劃，這樣的配色必定很難閱覽其中的內(nèi)容，每一次都這樣。

這種過錯常見于網(wǎng)站的Banner圖中：帥氣的大圖和精心規(guī)劃的白色字體調(diào)配在一同，而字體正好和顏色淺的部分疊加在一同，這下就十分為難了。淡色+淡色的調(diào)配讓內(nèi)容徹底無法讀，作為Banner的作用簡直被削弱為0。

想要修復(fù)這個問題其實(shí)十分簡單：

·挑選顏色均勻一致的布景，文字部分能夠與之構(gòu)成比照

·假如無法修改布景，能夠在布景和文字之間加一層，增加比照

·嘗試調(diào)整整個布景圖片的顏色、明暗、飽和度等，以達(dá)成提高比照度的目的

彩虹式配色

當(dāng)網(wǎng)站花成彩虹那樣的話，規(guī)劃師必定是也生無可戀了。想想看，當(dāng)一大堆各種各樣的顏色都成為體系配色的一部分的話，各種顏色之間的干涉，都不知道打破了多少配色的規(guī)矩。這種規(guī)劃盡管或許在一開始招引用戶的留意力，可是隨后讓用戶發(fā)生的厭惡和不適肯定會遠(yuǎn)超規(guī)劃者的預(yù)期，即便網(wǎng)站內(nèi)容再好，都無法被人辨認(rèn)。

假如你真的期望讓頁面愈加“多彩”，那么不要讓顏色都混雜到一同，試著運(yùn)用卡片式規(guī)劃來承載不同的顏色，合理的排布，既能夠讓顏色愈加靈敏，也能夠保證組織性和流動感。

亮色+亮色/深色+深色

就像淡色+淡色的調(diào)配一樣，亮色+亮色和深色+深色的調(diào)配，都是由于飽和度挨近而形成的辨識度問題。毫無疑問，這也是要躲避的問題。

你真的覺得這個問題不會發(fā)生到你身上？那么在做單色配色計(jì)劃的時分，要當(dāng)心這一點(diǎn)。即便是經(jīng)驗(yàn)豐厚的規(guī)劃師，也或許會在這個時分掉坑里。

總歸，千萬留意配色的比照度。假如這幾個顏色是有必要運(yùn)用的話，無妨將頁面規(guī)劃成翻滾變色的，這樣你能夠在保證比照和可讀性的一同，讓顏色也都用上。

“K”黑

咱們常說的CMYK中的K是黑色。許多規(guī)劃師的規(guī)劃著作會橫跨網(wǎng)頁版和印刷品，有時分會在做印刷品的規(guī)劃的時分，會誤將網(wǎng)頁配色中的黑色用上去。實(shí)際上網(wǎng)頁中的純黑（#000000）和印刷中的黑色有著巨大的差別，早在PS 7.0中，黑色的CMYK色標(biāo)其實(shí)是C75 M68 Y67 K90，而常說的體系黑K100 在更廣泛的RGB配色中，也只是較深的灰色罷了！

印刷品，包含咱們?nèi)粘Ｈ兆又械脑S多黑色，其實(shí)分很多種，它們一般是某種顏色疊加了很多之后發(fā)生的作用，比方渡鴉的茸毛是黑色的，可是你細(xì)心看它會輕輕泛藍(lán)。

所以，在規(guī)劃這個黑色的時分，好是挑選一個帶有你的品牌顏色的黑色（而非#000000）。這樣能夠在印刷的時分更容易和諧。（比方讓黑色帶有一點(diǎn)藍(lán)色的顏色，來抵消文本內(nèi)容中的黃色顏色）舉個例子，上面Wonderland的頁面中，黑色實(shí)際上是#0a0a0b。

結(jié)語

其實(shí)今日所談到的一切的配色的問題，簡直都是關(guān)于比照度和可讀性問題的。實(shí)際上，只需保證顏色和內(nèi)容的比照度和配色美感，簡直一切的顏色都是能用的。遵循這些規(guī)則，讓色彩真正為品牌賦能而非減分。