網站制作技巧之藍色頁面配色,藍色是色彩中比較沉靜的顏色。象征著永恒與深邃、高遠與博大、壯闊與浩渺,是令人心境暢快的顏色。藍色的樸實、穩(wěn)重、內向性格襯托那些性格活躍、具有較強擴張力的色彩,運用對比手法,同叫也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍色與紅、黃等色運用得當,能構成和諧的對比調和關系。深圳網站制作公司認為藍色是冷色調最典型的代表色,是網站沒計中運用得最多的顏色,也是許多人鐘愛的顏色。藍色表達著深遠、水恒、沉靜、無限、理智 誠實、寒冷的多種感覺。藍色會給人很強烈的置穩(wěn)感,同時藍色還能夠表現(xiàn)出和平、淡雅、潔凈、可靠等。博納網絡本文就網頁制作時對色彩“藍色”搭配技巧的經驗進行如下分享。
網站制作色彩搭配之藍色+玫瑰色
【示例】藍色高純度對比(藍色+玫瑰色)網頁示例截圖如圖10-45所示。
分析

藍色的HSB數(shù)值H色相為240度時是正藍色。圖10-45的HSB模式S數(shù)值顯示,所有主要配色的飽和度都是100%。從主色調、輔色調HSB模式的數(shù)值可看出,這兩種顏色在明度上有較大的區(qū)別,色相上稍有輕度變化,飽和度相同。
RGB模式上看,主色調與輔色調R數(shù)值都為0,G綠色的數(shù)值和B藍色數(shù)值分量的變化,得到了不同藍色的兩結果。點睛色僅是R紅色與B藍色兩色調和而得沒有摻雜其他顏色,因此飽和度呈最高值1OO%。整個頁面配色的飽和度都為1oo%.頁面整體配色看起來視覺沖擊力異常強烈輔助色白色讓頁面上的顏色的特性發(fā)揮到極致,是不可缺少的輔助配色。
【網站設計師點評】
高純度烘托、微妙的冷暖變化配色,體現(xiàn)出現(xiàn)代都市張揚時尚的氣息。白色塊面的線型使得這種高純度、高強度的配色變得響亮卻也緩和。
輔色調藍色的運用透露出設計師的大膽與魄力,玫瑰色在色輪表里算是冷色系,但是與藍色廣義上的對比來說是暖色,在這里與藍色搭配算是絕配了。整個頁面無不體現(xiàn)出特色和個性。
網站制作色彩搭配之淺藍色
【示例】同類淺藍色網頁示例截圖如圖10-46所示。
分析
該頁面中間色較多,主要是在藍色范疇內做明度的變化,所以色度差非常緩和,以至于頁面的色彩呈現(xiàn)非常柔和,甚至稍有些發(fā)灰的感覺,好在該頁面還有些較大色塊的濺藍色及白色,拉大了頁面的色階,使得這種灰的感覺減弱不少。
主色調HSB數(shù)值H顯示200度,色輪度稍向綠色方位傾斜,但是由于從180度到270度基本上給人的視覺呈現(xiàn)還是藍色范疇,因此與視覺上廣義的藍色差別不大。
點睛色的HSB數(shù)值是258,色輪趨勢是同暖色紫色(相對冷暖色)傾向,變化微妙,是本頁面最溫暖的顏色。藍紫色在色相環(huán)中位于藍色和紫色之間,所以它也蘊含著紫色的些神秘感,加上淺藍色的雅致,所以亮度較而的藍紫色顯得非常高雅。在網頁中,藍紫色通常與藍色
起搭配使用。
【網站設計師點評】
淺藍色給人一種很寧靜、安靜的心理感受。淺藍色系有淡雅、清新、浪漫、高級的特質,常用于化妝品、女性、服裝網站。它是最具涼爽、清新特征的色彩。和白色混合時,能體現(xiàn)柔順、淡雅、浪漫的氣氛。
主色調選擇明亮的藍色,配以白色的背景和灰亮的輔助色,可以使站點干凈而整潔,給人莊重、充實的印象。該頁面基本上屬于同類色系,也是最保守穩(wěn)妥且調和的配色方案。但該種配色看久了容易呈現(xiàn)出千淡乏味的感受。
網站制作色彩搭配之深藍色
【示例】深藍色網頁示例截圖如圖10-47所示
分析
HSB數(shù)值顯示主色調和輔色調的H色相接近,飽和度為最高,都為loo%,兩者只在明度上有區(qū)別,分別是35%和65%。三維厚重的設計風格用調和法之的漸變手法,把王色調和輔色調進行了緩緩的過渡,增強了層次感,體現(xiàn)個性魅力,符合該頁面視音頻風格網站的主題。
從整個頁面來看由于面積關系,點睛色在這里所起的作用不大,僅僅就蜻蜓點水而己。相反的輔助色在這里卻起到了較為突顯的作用,本只起烘托作用的深藍色得到充分的展示。另輔色調灰色令白色與深藍色反差不易過大,起到調和的目的。白色增強了整個頁面的視覺感,使之更醒目。
【網站設計師點評】
深藍色是沉穩(wěn)的且較常用的色調。能給人穩(wěn)重、冷靜、嚴謹、冷漠、裸沉、成熟的心理感受。它主要用于營造安穩(wěn)、可靠、略帶有神秘色彩的氛圍。
深藍色明度偏暗,基于上面對深藍色的特質描述,在常規(guī)網站的設計里,可能不適合做太大面積的使用。但根據不同網站主題的設計需要可以做些不同的嘗試。
網站制作色彩搭配經驗之純藍色
【示例】藍色純度對比網頁示例截圖10-48所示
分析
從HSB模式上的數(shù)值顯示情況進行分析,全頁基本上是屬于而純度配色,各顏色特性相互輝映、相互交融,把整個頁面環(huán)境渲染得異常鮮亮和熱鬧。由于有大面積的主色調和背景色做掌控,加之以上因素綜合分析,無論頁面再多、再細、再耀眼的顏色都能很好地統(tǒng)一在同一個頁面之中。
冷暖色系之間跨度很大:藍色、綠色、黃色、橙黃色、朱紅色、土橙黃色、墨綠色幾乎按照色輪表上的軌跡進行。也由于面積有多有少的原因,因此頁面看起來較明快調和。其中土橙黃色和墨綠色是頁面明度最重的顏色,從RGB色值上可看出,部分別混合了其他顏色,因此飽和度相對較低,略呈灰色狀態(tài),另一種意義上來說這種灰色狀態(tài)是調和色的種很好的方式。
【網站設計師點評】
高純度的藍色主色調配合的其他高純度冷暖色調對比,會營造出種整潔輕快的印象。根據色輪表的緩和過渡及使用面積多少,判斷分析出頁面調和程度。非常明快活潑、跳躍的富有趣味性的配色,使人勾起了無限愉悅的童趣。
網站制作色彩搭配經驗之藍色+綠色
【示例】藍色與鄰近色綠色搭配的網頁示例截圖10-49所示
分析
從HBS模式的S飽和度數(shù)值100%上看,不少用戶會很疑惑,誤以為較為柔和的顏色飽和度或許會低,刺眼的顏色通常飽和度較高,其實不然,每個顏色有每個顏色的不同屬性特性。高純度的色彩,明度的降低是協(xié)調視覺的個因素,容易給人造成低純度的錯覺。不同塊面的鄰近色交錯排列,增強本頁面視覺動感。
輔色調淺藍色是背景色白色和主色調藍色的中間色,它形成了頁面配色的中間色階,色彩層次感增強以外,還使整個頁面的顏色更為和諧。另輔色調青色,是藍色和綠色的結合體,包括在標志文字、文字標題上的運用,無疑活躍了整個頁面的配色環(huán)境。
兩個點睛色都略調高了明度,另意義上是該頁面配色的中間色階。兩點睛色都是在主色調藍色、輔色調青色的基礎上衍生出來的顏色這里“點睛”的作用不大,都屬于和諧色系。
【網站設計師點評】
很多站點都在使用藍色與青綠色的搭配效果。藍色、青綠色、白色的搭配可以使頁面看起來非常干凈清澈,在我們的現(xiàn)實生活中運用的范圍很廣,可以說是隨處可見的。
主顏色選擇明亮的藍色,配以白色的背景和灰亮的輔助色,加上中間色階的運用,可以使頁面有干凈整潔,給人莊重、充實的印象。這是組非常愉悅和諧的鄰近色系配色。中間色適度面積的運用及背景白色讓這紐顏色特征發(fā)揮到了極致。
網站制作色彩搭配經驗之藍色+紅色
【示例】藍色與紅色強對比網頁示例截圖如圖10-50所示。
分析

藍色是冷色系的最典型的代表了,而紅色是暖色系里最典型的代表,兩冷暖色系對比下讓全頁的色彩對比異常強烈且興奮,很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框起來,在藍色背景對比下,很好地突出主題,又好似模仿投影熒屏的感覺,讓人迅速地聚焦于視頻中心,達到網站背后的最終目的。
輔色調是紅色,從數(shù)值上看接近于正紅色,紅色對視覺傳遞的信息是很快的,屬于高昂響亮的顏色。
點睛色分別是黃色、黃綠色。大家知道,黃色是明度最高的顏色,也較響亮、刺目,在這里的運用能強烈地突現(xiàn)標題。從大的方面來看點睛色黃綠色與輔助色紅色是對比色,雖然面積不太大,只小范圍的對比,但是已經足以達到了迅速傳遞信息的效果,讓人印象深刻,促成再訪點擊。
【網站設計師點評】
冷暖色系的對比碰撞,充滿激情,能傳遞熾熱情感、強烈刺激主題的目的。該頁面運用了冷暖、紅綠兩種比較鮮明的對比色,配色積極大膽,視覺沖擊力很強。
網站制作色彩搭配之藍色+暖色
【示例】藍色同類色(藍色+暖色)對比網頁示例截圖如圖10-51所示
分析
本頁面配色難度較大,如何使這些配色和諧又能達到帶動對比的目的,就要求要有定的配色經驗了。難度,在于主色調、輔色調及點睛色的這3種藍色所充當?shù)慕巧\用。難度二,高純度、高亮度的正黃色在這個頁面的使用。難度三,黑色的運用。
運用排除法細分得到:主色調、輔色調的藍色飽和度樣都是最高值,色相H上稍微有些微妙區(qū)別,亮度上有些變化。點睛色藍色飽和度和明度都較低,介于兩種藍色之間。三者面積如果用得不好頁面容易呈混沌的灰色狀態(tài)。拿出輔色調藍色,再回到整個頁面的配色來看,頁面色彩偏重,亮度不夠,缺少中間色階,冷暖主次傾向不夠明顯,這時把輔色調藍色添加進去正好彌補了這種缺陷。
HSB模式顯示H是60度,S飽和度與B明度都是100%,正是正黃色。正黃色只適合做小面積的點睛色使用,大面積使用頁面配色較難協(xié)調,當然正黃色作為主色調能好配色些。
在這樣的頁面色彩組合里,黑色是很難運用進去的,面積使用多了,頁面有可能會破壞所營造的氛圍、產生不協(xié)調的感覺。只在輔助性地勾勒于邊框是很好的使用辦法。圖片里的產品顏色,有降低純度的棕黃色、土黃色、米黃色等同類黃色系,對該頁面色彩組合調配具有一定的協(xié)調能力。
【網站設計師點評】
通常矢量頁面的配包相對于圖片配色來說,難度較大,色彩的組織搭配,是根據設計師們自己以往的豐富配色經驗,反復調配、反復加減而得。
該頁面設計師選取了頁面的產品圖片中的兩三種顏色,例如點睛色里的紅色、藍色和黃色,再大膽地發(fā)揮出主色調藍色、較淺的輔色調藍色和點睛色正黃色.點睛色黃色運用于最能突出產品特色的文字上,這些和諧的元素生動趣味,讓整個頁面充滿了故事情節(jié)。
網站制作公司總結:
HSB數(shù)值H色相為240度時是正藍色,從以上不同屬性的藍色頁面色調上能看到,不同色相、飽和度、明度的藍色本身色彩特性表現(xiàn)得不是非常特殊,這也是低調沉穩(wěn)的藍色所具備的特征之。關鍵在于該種藍色都是與哪幾種顏色襯托、對比的。
冷色系以藍色為最典型的代表,因此就產生了廣義的相對暖色。例如,當與玫瑰紫色做對比時,玫瑰紫就呈現(xiàn)出微妙的暖色,當與綠色做對比色,綠色就呈出了相對的暖色,但是此種特性呈現(xiàn)得非常的微弱,應根據不同的主題頁面做具體分析。當在藍色色相、明度上暗色亮色非常明朗的情況下,可以考慮添加中間色.減弱可能造成的單調感,豐富兩極色階的過渡,調和頁面的視覺感受。好了,網站制作公司關于在網頁設計時對于色彩搭配“藍色”配色的經驗博納網絡就介紹到這里。謝謝關注。