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

2021-04-11 19:06:52 字數 3945 閱讀 6922

黃色是陽光的色彩,具有活潑與輕快的特點,給人十分年輕的感覺。象徵光明、希望、高貴、愉快。淺黃色表示柔弱,灰黃色表示病態。

它的亮度最高,和其他顏色配合很活潑,有溫曖感,具有快樂、希望、聰明和輕快的個性,有希望與功名等象徵意義。黃色也代表著土地、象徵著權力,並且還具有神秘的宗教色彩。

黃色的性格冷漠、高傲、敏感、具有擴張和不安寧的視覺印象。

淺黃色系明朗、愉快、希望、發展,它的雅緻,清爽屬性,較適合用於女性及化妝品類**。

中黃色有崇高,尊貴,輝煌、注重、擴張的心理感受。

深黃色給人高貴、暖和、內斂、穩重的心理感受。

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

→ 黃色系網頁例圖:

黃色系分析:

黃色是所有彩色中明度最高的顏色。上圖看到hsb模式的h數值是60度,正是正黃色,但rgb數值中加入了b藍色數值為51,因此降低了hsb的飽和度s為80%,但是大面積的黃色仍使得該頁面色彩明亮顯眼。

輔助色是純黑色,非色彩明度最低的顏色。

大面積顯眼的正黃色有黑色的線條壓制,黃色頓時顯得沉穩,頁面增添內容感。

白色雖然是點睛色,但由於非色彩的白色與黃色的明度最高,因此這裡似乎沒有起到"點睛"的作用。

結論:當鮮度、明度高的背景色與前景輔助色暗度低的黑色在明度形成較強烈的對比時,豔度降低,較能協調視覺。

整個頁面配色單純,卻也不簡單,形成另一種設計風格。

→ 黃色同類色網頁例圖:www.paralotna.pl

黃色同類色分析

該頁面的配色很單純,是同類色的黃色不同明度顏色,頁面看起來乾淨、單純。

點睛色白色淡黃色在深色黃色背景下比較顯眼,且在最中間位置,是整個頁面中的高調部分。

這三種黃色,明度都很高,只有背景輔助色明度稍低,點睛黃色h色相是三種顏色中黃色傾向最高的為57度,而60度是正黃色,因此明度也是最高的,充分的發揮其點睛色的作用。

背景色和前景色只在色相上明度上有非常微妙的變化,卻也很巧妙,形成了變化較明顯的空間層次感,削弱了同類色易產生的單調感。點睛色白色讓層次感更明顯。

結論:同類色的屬性使得整個頁面非常和諧,可以根據不同的主題來設計配色。

可以通過明度、飽和度的不同變化來加強頁面配色的層次感。

→ 中黃色應用網頁例圖:

中黃色系分析:

背景中黃色上點綴多種豔度較高的顏色,都是屬於跳躍的顏色,渲染整個**的熱鬧環境氣氛,符合該**的設計主題。

從hsb數值上看,該中黃色的明度和飽和度呈最高值,屬於明亮刺眼的顏色。輔助色是黃綠色和紅色,黃綠色在中黃背景下呈冷色調,輕快單薄的亮色;紅色的hsb數值h色相上看是正紅色,明度稍低,這裡屬於厚重沉穩的顏色,在中黃色背景下呈現暖色調;背景中黃色在黃綠色和紅色兩者中這時呈中間色,是很好的整體頁面視覺過渡色。

加之商品**多種亮艷的色澤混合在同一頁面上,點睛色白色在這裡起到了調和多種顏色的作用,減少、透氣於整個頁面的多種配色噪音。

結論:當背景色起到中間色的作用時,頁面少量冷暖色彩搭配較輕易調和。

通常商品**志在渲染熱鬧氣氛,比較適合活潑跳躍、色彩絢麗的配色方案,但色彩的調和難度較大。

→ 黃綠色調網頁例圖:

黃綠色調分析:

主色調為黃綠色,單純而看,黃綠色是通常的暖色的起始色、色彩中亮度最高的黃色與冷色的起始色、綠色相結合而得,因此該顏色看起來非常明快清新。

處於輔助色的非色彩黑色,中間的點綴色是主色調黃綠色,很輕易讓人一時以為該顏色就是點睛色。實際主色調黃綠色的明度非常高,飽和度這時也很高,在明度最低的黑色襯映下就異常顯眼。

背景色使用略有些漸變的效果,正是黃綠和黑(灰)顏色的柔和過渡,頁面調和。

點睛色在這裡混色較多,rgb、hsb數值差距都不大,因此顏色偏灰色階,仔細分析是黃綠色與少許黑色混合而得,起到了調和背景色與輔助色明度差異過大的作用。

結論:點睛色可以是少許刺眼的顏色,也可以是少許協調於視覺的混合灰色,無論是刺眼的顏色還是謙遜沉穩的灰色,都是不可缺少的角色,有著不可替代的作用。

整個頁面配色較單純,只有三種色,非色彩來說分別起到黑(輔助黑)白(主色黃綠)灰(點睛混合色)的作用,所以頁面配色較有層次感,並不顯得單調。

→ 黃色鄰近色網頁例圖:www.leerbanen.nl

黃色鄰近色配色(黃色紅色)分析:

選取的上圖三組色裡hsb數值的b明度雖然都有些變化,但s飽和度分毫沒有受到影響,仍都呈最高值100%,因此頁面配色異常刺眼。好在其間有少量不同明度飽和度的紅色系色塊做壓制,頁面顯得沉穩許多,頁面色彩層次也豐富了許多,塊面交織設計富有節奏韻律美,卻也有雀躍的感覺。

頁面**人物也經過了雙色調處理,與頁面色彩風格一致。

整個頁面屬於明暗反差較大的色調,所以頁面響亮明快,極賦視覺衝擊力、感染力。

結論:刺眼的顏色有深色塊壓制,也是很好的調和方法。

該頁面裡的不少小色塊混合了暗灰色,因此頁面飽和度刺激程度得到少許降低並調和。

同類色系、類似色系不同純度明度的深淺變化搭配,增添現代美感。

→ 高***色鄰近色應用網頁例圖:

高***色鄰近色配色(黃色紅色)分析:

全頁選取的幾個色彩組合是高純度高明度的鄰近色正黃、淡黃(這裡的淡黃色不是指淺黃色,而是色彩顏料色裡的稱呼。)、中黃及正紅色。

我們知道,黃色是色彩系裡明度最高的刺眼色,hsb數值h色相60度是正黃色,特性越高明度越高。h色相度往60度前是接近紅色,而紅色明度相較於黃色低,背景色hsb數值h色相為48度,往紅色靠近,因此色度較深,呈現為中黃色。使用中黃背景正是烘托突出前景的淡黃色。

淡黃色的前景上設計少許中黃色帶進入,頁面的色彩層次感生動了不少。

另乙個輔助色紅色hsb數值的h色相是0度,顯示正紅色且高純度高亮度,放在最顯眼的標誌廣告區域,實現視覺引導作用,主次感增強了。

白色也是輔助色三色之一,在頂部面積較大的使用,使整個頁面的純度緩和了許多,起到提亮並拉開空間的作用。

點睛色用於導航欄,提示導航區域的醒目與重要性。

結論:高純度高明度的顏色調子刺眼響亮,通常對視覺的刺激程度較大。

鄰近色由正黃到最後的正紅色是色輪表的協調過渡色,因此頁面調和。

鄰近色與同類色一樣,是調和色,但較同類色更生動更多變化。

→ 黃色低純度配色應用網頁例圖:

低***色配色(黃色藍色)分析:

該頁面是屬於純度較低的多組配色頁面,配色難度似乎較大,但是按主色調、輔助色、點睛色來細細分析就會發現輕易多了。

主色調的中黃色,從rgb數值b明度48來看,提高了明度,rgb數值的變化hsb也相應變化,該色調純度降低,黃色的刺眼特性相應緩和。

該頁面輔助色比較多,這裡選了主要的三種淺黃、淺藍、棕紅色,明度純度不同的變化來分析。淺黃色的rgb三個數值接近,因此呈現偏灰的柔和狀態。正藍色的rgb數值r為0,g為255,b為255,該藍色rgb數值上看,混合了r紅色11,g的綠色數值較低,b藍色的數值較高,因此飽和度降低,顏色呈淺色調。

棕紅色的rgb的三數值上看,r的數值最高為124,加入了對比色g綠色67,因此顏色變暗發烏,調入了適量b藍色24,因此該顏色飽和度亮度降低,也是該頁面沉穩的主要色調,牽制豔度較高的幾種顏色。

點睛色的hsb數值h色相為356度,幾乎呈正紅色,只是調入了少許b藍色18,因此顏色在明度上稍偏暗。另一點睛白色的作用除了提亮整個頁面,同時也突出標誌影象。

標誌是紅色,下面的綠色是紅色的對比色,目的是突出標誌的作用,同時也是黃色與藍色的中間視覺過渡色。

結論:多種輔助色份量相當冷暖搭配時,有飽和度稍低的主色調牢牢把握住,整個頁面輕易調和。

由於頁面顏色較豐富,點睛色在這裡起到拉開各個色彩層次的作用,明確主次角色。

本部分小節:

● 黃色是色彩系裡明度最高的刺眼顏色,尤其是hsb數值h色相為60度正黃色時,它的特性越明顯。由於黃色的特性,在頁面配色的時候可適當新增明度較深的顏色,色階層拉開,並起到協調刺眼的豔度作用。黃色飽和度、明度的不同變化傳達不同的意義和作用。

● 無論是高純度低純度還是多色彩的頁面配色,白色起到要害的作用。

● 點睛色不一定就是非常顯眼的顏色,也有起到調和整體頁面配色的作用。

● 中間色通常被大面積的使用為主色調、輔助色,是調和輔助色(有可能是同時幾種)與點睛色(有可能是幾種)的色彩,是調和色、調和方法的要害。

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

網頁設計配色應用例項剖析 紫色系 1 紫色是一種在自然界中比較少見的顏色。象徵著女性化,代表著高貴和奢華 優雅與魅力,也象徵著神秘與莊重 神聖和浪漫。另一方面又有孤獨等意味。紫色在西方宗教世界中是一種代表尊貴的顏色,大主教身穿的教袍便採用了紫色。紫色的明度在有彩色的色度中是最低的。紫色的低明度給人一...

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

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

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

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