網頁設計配色應用例項剖析 紫色系

2021-04-11 19:06:52 字數 5024 閱讀 3637

網頁設計配色應用例項剖析——紫色系(1)

紫色是一種在自然界中比較少見的顏色。象徵著女性化,代表著高貴和奢華、優雅與魅力,也象徵著神秘與莊重、神聖和浪漫。另一方面又有孤獨等意味。

紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便採用了紫色。

紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一種沉悶、神秘的感覺。在紫色中紅的成份較多時,顯得華麗和諧。

紫色中加入少量的黑,沉重、傷感、恐怖、莊嚴的感覺。紫色中加入白,變得優雅、嬌氣,並充滿女性的魅力。

紫色通常用於以女性為物件或以藝術作品介紹為主的站點,但很多大公司的站點中也喜歡使用包含神秘色彩的紫色,但都很少做大面積使用。

不同色調的紫色可以營造非常濃郁的女性化氣息,在白色的背景色和灰色的突出顏色的襯托下,紫色可以顯示出更大的魅力。

下面我們根據紫色系不同屬性的鄰近色、高純度低純度配色、相對對比色等色彩搭配做不同的舉例分析。

→ 紫色高純度網頁例圖:http://   紫色系分析:(高純度對比:同類紫色+同類對比色)

紫色的hsb數值h色相為300度時是正紫色。上圖的hsb模式s數值顯示,上組顏色飽和度基本都比較高,加上部分較高的明度組合,使該頁面異常奢華艷麗。

輔色調之一的黃色是紫色強度最高的對比色,主、輔色面積的大小不同是形成視覺衝擊力最大的主要原因。值得一提的是右下腳的淺藍色的運用,它在整個頁面配色上是很謙遜的角色,但卻既突出上面的文字內容,又不張揚的壓抑住其他顏色的配色,屬於豐富於頁面的輔助作用。如果把它試換成別的顏色似乎還是沒有這個淺藍色效果好。

另一輔助色淺紫紅色又稱粉紅色,粉紅色主要用於包含少女在內的女性站點。因為從明亮到淺白色調的粉紅色能夠表現出可愛、乖巧的感覺,這裡只做少量運用。

其他點睛色使用得雖多但面積很小,主要是主色調紫色附近的過渡色,例如群青、青蓮、玫瑰、紅色等點綴,閃亮耀眼,增強頁面的視覺感染力,有渲染出華麗凸顯現代氣息的作用。

結論:紫色結合紅色的紫紅色是非常女性化的顏色,它給人的感覺通常都是浪漫、柔和、華麗、高貴優雅,特別是粉紅色可以說是女性化的代表顏色。高彩度的紫紅色可以表現出超凡的華麗,而低彩度的粉紅色可以表現出高雅的氣質。

紫紅色並不能隨意在所有的站點中使用,但使用恰當的紫紅色會給人留下深刻的印象。高彩度的紫色和粉紅色之間的搭配通常都能得到較好的效果。

該頁面具有非常強烈的現代奢華感。時尚張揚的配色組合,符合該頁面主題所要表達的環境,讓人容易記住它

網頁設計配色應用例項剖析——紫色系(2)

→ 紫色淺紫色網頁例圖:   紫色系分析:(淺紫色)

該頁面使用特性最高的紫色提亮為100%高明度的主色調,很容易抓住人們的視線成為聚焦點,是非常大膽又時尚的配色。

輔色調則是使用冷色系代表的深藍色,明度較低。主要是為了烘托左邊導航選單,凸顯上面的內容資訊,由於人們對網頁已然形成了視覺慣性,也起到了很好的視覺引導作用。

主、輔色的搭配運用構成了較強烈的視覺對比效果。

另一輔色調淺藍色,在主色調淺紫色的烘托下呈現稚嫩的感受,裡面的白色塊起到淺紫的背景和淺藍色調和、明快的作用。

點睛色的使用實際有不少,這裡只選幾種起到主要作用的顏色做舉例分析。中黃色運用得很珍貴,只在左上區域出現,旨在突出主題文字的效果。其他配色主要是根據左下文字字母而來,紅和綠色出現在頁面的淺紫色較為寬敞的位置,小範圍的做色彩對比效果。

其他點睛色則極少的零星分布,既調和呼應又起到活躍於頁面的角色作用,以上這些都是點綴和渲染頁面氣氛不可缺少的配色元素。

結論:在紫色中加入白色,可使紫色略顯沉悶的特徵消失,變得清秀、優雅、嬌氣,並充滿女性的魅力。

白色、粉紫色、天藍色的顏色搭配,是比較稚嫩的配色,同時也是最受少女歡迎的配色方案,這裡運用也較得體。

使用高明度高飽和的主色調非常個性,讓人很容易記住它,但是色彩都有兩面性,此種顏色略顯驕躁感過於刺激視覺,不易於長時間的注目瀏覽。

網頁設計配色應用例項剖析——紫色系(3)

→ 紫色深紫色網頁例圖:

紫色系分析:(深紫色)

以略有漸變色為背景主色調,漸變色是調和方法之一,起到增加層次感空間感柔和視覺的作用。背景色左上最亮處的特殊處理,主要起到突出了標誌的作用。

從hsb模式h色相數值上看到輔助色依舊以主色調延伸而成,僅在明度上做了些變化,屬於同類色的調和色系。

點睛色皆選用了色彩色系中明度最高的黃色及相近色黃綠、玫瑰紅。黃色和黃綠色真就點睛之筆——黃色是紫色的對比色,深紫色背景上的高明度黃色被襯托得異常跳躍。黃綠色既和諧又增添了頁面配色的高強度節奏。

玫瑰紅在這裡是最溫暖的顏色,協調且增強了頁面配色的層次感。根據各顏色的特質,在視覺上成功做了先後次序的引導。白色雖是非色彩,但也起到拉大色彩之間色階層次的作用,增強了頁面空間感,也使以上配色更調和。

結論:深紫色給人華貴、深遠、神秘、孤寂、珍貴的心理感受。較暗色調的紫色可以表現出成熟沉穩的感覺,創造、謎、忠誠、神秘、稀有。

整個頁面配色尤其是點睛色的妙用,使得整個頁面非常新穎別緻,極賦現代都市氣息。

根據面積的大小對比,適當的對比色能讓頁面有活躍、明快的氣氛

網頁設計配色應用例項剖析——紫色系(4)

→ 紫色配色網頁例圖:

紫色系分析:(紫色配色:紫色+綠色)

綠色被譽為紫色的絕配色。主色調是飽和度降低明度較低的紫色,輔色調是色彩明度較高的草綠色及沉穩的深藍色。

點睛色雖然被稱為點睛色,但在整個頁面中使用的面積極小,與其他色系所佔的比重來看,這兩種點睛色小到幾乎給忽略。儘管從hsb模式數值上看到,橙黃色為高純度高明度色,只在主題文字上有些體現。另一藍綠色所處的位置在顯眼的**名稱後方,謙遜程度幾乎不為人們注意到,儘管它才是**背後所要表達的真正主題。

草綠色和深藍色把大面積的白色框起來,襯托起前景,但也許由於白色面積使用過大,為了不至於讓它太突出,在白色的背景上點綴較淺的紋樣來降低這種感覺。

背景色紫色由於色彩特質明度較低的緣故,與明度較高的輔助色草綠色形成較明快的效果。

結論:點睛色根據頁面所佔的面積因素,也有的僅起到輔助的作用。相反草綠色或許由於色彩特質的原因,這裡起到比較強調的強勢目的,在該頁面配色裡起到非常關鍵的作用

網頁設計配色應用例項剖析——紫色系(5)

→ 紫色鄰近色網頁例圖:http://

紫色系分析:(紫色鄰近色配色:紫色+紫紅色)

嚴格來說,該頁面配色的色組和紫色關聯上稍有些偏移,之所以做為案例選擇,是因為整體配色上依舊給人有紫色系配色的錯覺。

hsb的h色相數值上顯示的260來看,正紫色數值為300,主色調整個往藍色系稍偏移,構成較有視覺感染力的藍紫色。藍紫色在色相環中位於藍色和紫色之間,所以它也蘊含著紫色的一些神秘感。儘管飽和度不是很高60%,但明度達到最高狀態為100%,使得該色彩豔度很強,較高亮度的藍紫色顯得非常高雅,契合**主題。

輔色調hsb的h色相數值為270,已經稍往紫色偏移,紫色特徵較明顯,明度較高且較明快的感覺。另一輔助色粉紅色h色相數值為331,稍往紅色系偏移,明度極高為100%,更增添了明快的氣息。

點睛色在這裡起到了不可忽視的作用,由於淺紫紅較有女性氣質特徵,增添了該頁面的女性溫柔細膩的美感。另一點睛色深藍色由於色彩特質所致,這裡只是輔助性的做些點綴。

結論:淺紫色系給人嫵媚、優雅、嬌氣、清秀、夢幻,充滿女性魅力。

上面的配色除了點睛色深藍色明度較低,其他的色彩組合都在不同的程度上提高了明度,增強了頁面所要表達的主題效果

網頁設計配色應用例項剖析——紫色系(6)

→ 紫色配色應用網頁例圖:

紫色系分析:(紫色配色:紫色+紅色)

這是一組非常簡潔精幹的配色頁面。主要使用了主、輔兩色調為界,點綴小配色,整體疏密得當,色塊分明的色彩構成。主色調紫hbs模式的h色相數值是283,稍向藍色方位偏移,以致於此種紫色略呈現冷色特徵。

點睛色主要選擇紅藍黃三種,其中紅色的h色相顯示為347,色值向藍色偏移略呈冷調,因此該顏色在這裡顯示沒有僵硬的感覺。另一點睛色橙黃色使用面積非常之小,幾乎讓人忽略。

右上角多個線條的小色塊的修飾增強了頁面的視覺感染力。

背景黑色不是孤立使用,既響亮的突出前景,又與前景的線條、文字呼應起來,讓整個頁面高品位高層次的特質更明顯。

結論:主色調紫色在這裡既有沉靜又顯高貴的感覺,提公升產品的檔次。點睛色紅色的加入讓這種高貴又檔次的感覺更加明顯。藍色有穩住紫色和紅色的效果。

該頁面大色塊的構圖及配色極其簡約,獨具魅力

網頁設計配色應用例項剖析——紫色系(7)

紫色系分析:(低純度配色:紫色+綠色)

該頁面除了點睛色外,整體配色飽和度都很低,所以在視覺上呈柔和狀態。

主色調紫色的hsb模式h色相為308,數值稍向紅色傾斜,由於飽和度及明度降低,顏色呈現很平和,空間感增強。輔助色綠色h色相為167,數值稍向藍色偏移,從rgb模式上看,g為125(正綠色時為255,r為0,b為0),r為82,b116,有這兩色混合,因此飽和度和明度都很低,然而在雅緻的紫色背景的烘托下,較為突出了綠色的產品這一主角,達到配色目的。另一輔助色灰色,為整體的柔和狀態增添了雅緻的氣息。

點睛色黃色的特質因素,無疑是這頁面最響亮耀眼的顏色儘管使用的面積較小,它是紫色的對比色,高純度的黃色與低純度的紫色形成較強烈的視覺反差對比效果,也因此使得頁面的沉悶得到一定程度的緩解,提公升頁面配色的空間透亮感。

結論:整體柔和的配色調子較吻合的體現了尊貴高雅的服飾感覺,並透露出寧靜、安穩、雅緻的環境氛圍,充分體現出了紫色運用的最大魅力。

本部分小節:

● hsb數值h色相為300度時是正紫色,它的特性這個時候也就揮灑得越明顯。從上面的網頁配色例項中我們較全面的看到了不同角色紫色的性格體現。

● 紫色是色彩系裡明度最低的顏色。儘管如此,高純度的紫色與高階灰度的紫色都透出不同的氣質。神秘、高雅在這裡配色是它普遍的詮釋。

紫色的純色明度很低,因此它與淺色在一起,從明度關係上就分出了涇渭。為了不與黑白對比混淆,適當地將紫色加白色效果會更好。 由於紫色發冷,紫色配暖色時,暖色不能直接介入,需要調整純度或明度才能形成比較和諧的配色。

● 綠色被譽為紫色的絕配色,也是一對複色對比色,它比三原色的對比色要溫和含蓄,由於它們都帶有一點共同成分,相互配合也會協調得多。各自的特質原因,對比之下綠色通常起到比較關鍵的作用。

紫色對比色組通常是較小面積的做對比使用,不同面積不同明度飽和度的使用所表達的感受是不一樣的。

● 紫色傳達著高貴、優雅、幻想、神秘、莊重的心理感受。藍紫色可以用來創造出都市化的成熟美,且藍紫色可以使心情浮躁的人冷靜下來。明亮的色調直至灰亮的藍紫色有一種與眾不同的神秘美感。

低亮度的藍紫色顯得沉穩,高亮度的藍紫色顯得非常高雅。在網頁中,藍紫色通常與藍色一起搭配使用。

網頁設計配色應用例項剖析 黃色系

黃色是陽光的色彩,具有活潑與輕快的特點,給人十分年輕的感覺。象徵光明 希望 高貴 愉快。淺黃色表示柔弱,灰黃色表示病態。它的亮度最高,和其他顏色配合很活潑,有溫曖感,具有快樂 希望 聰明和輕快的個性,有希望與功名等象徵意義。黃色也代表著土地 象徵著權力,並且還具有神秘的宗教色彩。黃色的性格冷漠 高傲...

網頁設計配色應用例項剖析 綠色系

網頁設計配色系列 綠色系 綠色在黃色和藍色 冷暖 之間,屬於較中庸的顏色,這樣使得綠色的性格最為平和 安穩 大度 寬容。是一種柔順 恬靜 滿足 優美 受歡迎之色。也是網頁中使用最為廣泛的顏色之一。綠色與人類息息相關,是永恆的欣欣向榮是的自然之色,代表了生命與希望,也充滿了青春活力,綠色象徵著和平與安...

5 網頁設計配色應用例項剖析 紅色系

紅色的色感溫暖,性格剛烈而外向,是一種對人刺激性很強的顏色。紅色容易引起人的注意,也容易使人興奮 激動 緊張 衝動 還是一種容易造 視覺疲勞的顏色。在眾多顏色裡,紅色是最鮮明生動的 最熱烈的顏色。因此紅色也是代表熱情的情感之色。鮮明紅色極容易吸引人們的目光。紅色在不同的明度 純度的狀態 粉紅 鮮紅 ...