網頁設計配色應用實例剖析——黑色系

黑色是暗色，是純度、色相、明度最低的非彩色。象徵著力量，有時感覺沉默、虛空，有時感覺莊嚴肅穆，有時又意味著不吉祥和罪惡。自古以來，世界各族都公認黑色代表死亡、悲哀黑色具有能吸收光線的特性，別有一種變幻無常的感覺。 　　 黑色能和許多色彩構成良好的對比調和Web Design關係，運用範圍很廣。 　　黑色給人深沉、神秘、寂靜、悲哀、壓抑的感受。 　　黑色是最有力的搭配色。 　　黑色也常用來表示英俊的男人。 　　下面我們根據黑色系搭配不同的顏色所表現出的特性做不同的舉例分析。 　　黑色系分析：（明度對比：黑色+白色） 　　 從RGB和HBS模式可以看出，三組數位顯示沒有摻雜任何的數位，都統一到最高級0到255，即純黑和純白。 　　黑色白色屬於沒有色相和飽和度、只在明度兩極的非色彩。兩種極端強烈對比網站建設的只在明度上有區別的顏色，與前面我們所說的三原色、對比色的對比還是有較大區別的。 　　該頁面只有兩種非色彩搭配，即黑色白色，襯映得該頁面的設計元素也非常乾淨簡練，旁邊點綴大小得當的文字元素減小該頁面有可能因此產生的單調感覺。 　　 　　結論： 　　黑白純色在明度上反差非常大，視覺衝擊強烈，主次分明，全站的貫穿運用，構成特色鮮明的設計風格，散發迷人的高品位的貴族氣息。 　　黑白兩種顏色的搭配使用通常可以表現出都市化的感覺，常用於現代派頁面設計中。 　　黑色系分析：（非色彩系：黑白深灰色） 　　 該頁面與上頁配色類似，只是多了一組輔助色——灰色，黑、灰、白這三種非色彩在該頁面裏都運用到了。大家從該頁整體可以看到，多了輔助色灰色，令該頁面層次感更豐富，過渡更柔和，空間感覺增強。左上部點睛色白色塊面的網頁寄存運用，使得這種空間感差距拉大，增強視覺層次感，同時突出標誌品牌、主題思想。另一作用在於突出文字的功能運用。 　　背景深灰色明度非常低，接近於黑色，稍不留心有可能會被忽略。結合輔助色灰色再整體上看該色配色，主要起到豐富視覺層次感，緩和主色調黑色有可能帶來的僵硬感。 　 　　結論： 　　黑白灰非色彩色調所構成的頁面較具特色，尤其灰色的加入更增添層次感。 　　結合黑白圖形，營造出一段古典的故事場景。契合該網站所體現的內容思想。 　　黑色系分析：黑色背景 　　 背景黑色下，除了白色，還有其他三種顏色綠色、紫色、紅色分佈在不同的位置。其中網頁設計模板綠色和紫色雖然被稱之為輔助色，但它們使用的面積仍然不多，只是相對於點睛色紅色來說。綠色主要是用於文字方面，紫色用於圖形方面，所指向的分工明確。從RGB模式RGB三個數值上看到紫色混合數值上較接近，因此純度降低，相對於綠色紅色來說為中間色，色彩性能上呈低調緩和狀態。 　　 HSB模式S數值來看，綠色雖然純度上比紅色稍低些，也許是因為使用面積較多的原因，看起來似乎比紅色醒目些。紅色在這裏主要起到的是點明目前所屬的狀態這一功能性作用，在黑色的背景下儘管使用面積非常小，但依舊容易被流覽者注意到。 　　 　　結論： 　　黑色的背景下所使用的顏色面積雖然不多，但由於黑色這一襯托放大的特性，其他顏色較容易引起流覽者的注意，充分發揮其設計意圖。 　　黑色系分析：（黑白淺灰） 　　 從RGB數值都是234來上看可知，255為白色，網上商店背景色234只是在明度上稍做變化得到的淺灰色。背景的淺灰色把前景的白黑對視覺的刺激力變得柔和協調很多。雖為背景灰色，實際在整個頁面配色作用上起到了點睛之筆，使得頁面煥發出另外一種神秘且特殊的氣息。 　　該頁面無論從設計上還是配色上都非常簡潔，主要是以黑白文字為重點，背後的白黑色塊面粗、白色邊框線條無不是為了突出前景文字的作用。 　　 　　結論： 　　該頁面設計風格極其簡約，除了方形塊面邊框，沒有多餘的圖形修飾，主要是以文字的大小粗細、疏密間距排版為設計元素。 　　淺灰色的加入讓本來具強烈衝突色的黑白變得素雅些了，也頗具高層次格調許多。 　　黑色系分析：黑色＋少量彩色 　　 該頁面基本上還是以黑色為主色調，雖然似乎多了不少顏色的加入，但是由於使用面積都CMS較少，除了少許修飾外主要運用於功能文字方面的強調。 　　輔助色藍色正藍色的HSB模式的H應該是240，目前這顯示的是215可看出色相上稍向綠色靠近，S93％B43%來看純度和明度都不高，因此該藍色在黑色上顯示不明顯。 　　這裏的點睛色主要都運用在文字功能上，紅色幾乎是正紅，由於降低了純度和明度，該顏色不明顯。綠色H數值為149，正綠色為120，色相上稍向藍色傾斜，純度和明度不高，因此該顏色也不明顯。 　　 　　結論： 　　低純度低飽和度的色彩在黑色背景下，較易使整體色彩達到統一的目的，顏色變得柔和而含蓄。 　　黑色系分析：（黑色配色：黑色+橙色） 　　 橙色的HSB模式H色值顯示是25，而正橙色是30可以知道，該橙色色相電郵服務上稍往黃色傾斜。我們通過前面的學習可以知道橙色適用於視覺要求較高的時尚網站，運用於該網站主題設計再適合不過了。另一點睛橙色在色相上稍偏橙紅色，是基於橙色的一個過渡或者說是增加視覺節奏感的一個小方法。右邊文字在不同程度上也使用了橙色做為點睛，稍平衡了左右視覺，起到色彩左右呼應的作用。 　　輔色調白色使得黑色和橙色的搭配上不至於太生硬，增強頁面視覺的愉悅感。 　　 　　結論： 　　橙色在黑色的背景上顯得很鮮亮，它的特性得到了最大化的發揮。 　　黑色系分析：（黑色配色：黑色+紅色） 　　 輔助色紅色從HBS模式上的H為0度看出，該紅色為正紅色且純度明度都為最高值100%，在黑色這一背景的襯托下，高純度高明度的正紅色遇到黑色搭配結合而得的特性簡直發揮到了極致。因此該頁面色彩配色具有極強的視覺衝擊力。 　　點睛色白色是讓這兩種顏色配合起來更透亮，緩和對人視覺不適的壓迫力。 　　儘管頁面的設計元素為噪音效果，顏色在不同面積分配上也參差不齊的感覺，但是電子商務由於黑色主色調為背景，牢牢掌控了全局，頁面設計及配色上也能達到統一的目的。 　　結論： 　　 紅色和黑色的搭配被譽為商業的成功色。一是因為紅色是一種對人刺激性很強的顏色，是最鮮明生動的、最熱烈的顏色。在黑色的反襯下鮮明紅色極容易吸引人們的目光。紅色相對於其他顏色，視覺傳遞速度最快。 　　紅黑這兩種配色也被廣泛的運用於較能體現個性的時尚類網站，讓人印象強烈的深刻。 　　本部分小節： 　　 　　 ● 黑色是最暗的顏色，是純度、色相、明度最低的非彩色。因此網站排名它較容易起到襯托和發揮起其他顏色的特性，是最有力的搭配色。 　　 ● 黑白色的搭配較充滿個性，合理運用能散發出另外一種迷人的高品位高格調的貴族氣質。黑色與橙色搭配較容易營造視覺要求較高的時尚網站。黑色與紅色的搭配被譽為是商業的成功色，具有極強的視覺衝擊力。 　　 ● 無論頁面上使用或者色相跨度大的多種顏色、或是高純度低純度、或者高對比的顏色，只要有黑色這一最得力的色彩為主色調掌控著，頁面設計配色上能得到和諧統一的效果。