實(shí)例色彩網(wǎng)站搭配

1、藍(lán)色是色彩中比較沉靜的顏色。象征著永恒與深邃、高遠(yuǎn)與博大、壯闊與浩渺，是令人 心境暢快的顏色。藍(lán)色的樸實(shí)、穩(wěn)重、內(nèi)向性格，襯托那些性格活躍、具有較強(qiáng)擴(kuò)張力的色彩，運(yùn)用對比 手法，同時(shí)也活躍頁面。另一方面又有消極、冷淡、保守等意味。藍(lán)色與紅、黃等色運(yùn)用得 當(dāng)，能構(gòu)成和諧的對比調(diào)和關(guān)系。藍(lán)色是冷色調(diào)最典型的代表色，是網(wǎng)站設(shè)計(jì)中運(yùn)用得最多的顏色，也是許多人鐘愛的顏 色。藍(lán)色表達(dá)著深遠(yuǎn)、永恒、沉靜、無限、理智、誠實(shí)、寒冷的多種感覺。藍(lán)色會給人很強(qiáng) 烈的安穩(wěn)感，同時(shí)藍(lán)色還能夠表現(xiàn)出和平、淡雅、潔凈、可靠等。下面我們根據(jù)藍(lán)色系不同屬性的同類色、鄰近色、高純度對比、相對對比色等色彩搭配 做不同的舉例分析。藍(lán)

2、色高純度對比網(wǎng)頁例圖：藍(lán)色系分析：（高純度對比：藍(lán)色+玫瑰色）藍(lán)色的HSB數(shù)值H色相為240度時(shí)是正藍(lán)色。上圖的HSB模式S數(shù)值顯示，所有主 要配色的飽和度都是100%。從主色調(diào)、輔色調(diào)HSB模式的數(shù)值可看出，這兩種顏色在明度 上有較大的區(qū)別，色相上稍有輕度變化，飽和度相同RGB模式上看，主色調(diào)與輔色調(diào)R 數(shù)值都為0，G綠色的數(shù)值和B藍(lán)色數(shù)值分量的變化，得到了不同藍(lán)色的兩結(jié)果。點(diǎn)睛色僅 是R紅色與B藍(lán)色兩色調(diào)和而得沒有摻雜其他顏色，因此飽和度呈最高值100%。整個頁面 配色的飽和度都為100%，頁面整體配色看起來視覺沖擊力異常強(qiáng)烈。輔助色白色讓頁面上的顏色的特性發(fā)揮到極致，是不可缺少的輔助配色

3、。結(jié)論：響亮、強(qiáng)烈刺激的詞語似乎都適用于上圖頁面，源于高純度烘托、微妙的冷暖變 化配色上，體現(xiàn)出現(xiàn)代都市張揚(yáng)時(shí)尚的氣息。白色塊面的線型使得這種高純度高強(qiáng)度的配色 變得響亮卻也緩和。輔色調(diào)藍(lán)色的運(yùn)用透露出設(shè)計(jì)師的大膽與魄力，玫瑰色在色輪表里算是冷色系，但是與 藍(lán)色廣義上的對比來說是暖色，在這里與藍(lán)色搭配算是絕配了。整個頁面無不體現(xiàn)出特色和 個性。藍(lán)色淺藍(lán)色網(wǎng)頁例圖： HYPERLINK /start.html /start.htmlSPQII SPOTS SPOTSBEREICW WiHLtW主色調(diào)jr*Ha()輔色調(diào).點(diǎn)睹色背景色R.169 H：20QR.225 H.192BRJOO HJ58

4、G：215 S：2B%G.24& S：1DWG：75 S：52%B：23B B：93%B.25T網(wǎng)頁設(shè)計(jì)與配色實(shí)例始析藍(lán)色系分析：（同類色：淺藍(lán)色）主色調(diào)HSB數(shù)值H顯示200度，色輪度稍向綠色方位傾斜，但是由于從180度到270 度基本上給人的視覺呈現(xiàn)還是藍(lán)色范疇，因此與視覺上廣義的藍(lán)色差別不大。該頁面中間色較多，主要是在藍(lán)色范疇內(nèi)做明度的變化，所以色度差非常緩和，以致于 頁面的色彩呈現(xiàn)非常柔和，甚至稍有些發(fā)灰的感覺，好在該頁面還有些較大色塊的淺藍(lán)色及 白色，拉大了頁面的色階，使得這種灰的感覺減弱不少。點(diǎn)睛色的HSB數(shù)值是258,色輪趨勢是向暖色紫色相對冷暖色）傾向，變化微妙，是本 頁面最溫

5、暖的顏色。藍(lán)紫色在色相環(huán)中位于藍(lán)色和紫色之間，所以它也蘊(yùn)含著紫色的一些神 秘感，加上淺藍(lán)色的雅致，所以亮度較高的藍(lán)紫色顯得非常高雅。在網(wǎng)頁中，藍(lán)紫色通常與 藍(lán)色一起搭配使用。結(jié)論：淺藍(lán)色給人一種很寧靜安靜的心理感受。淺藍(lán)色系有淡雅、清新、浪漫、高級的特質(zhì)， 常用于化妝品、女性、服裝網(wǎng)站。它是最具涼爽，清新特征的色彩。和白色混合時(shí)，能體現(xiàn) 柔順，淡雅，浪漫的氣氛。主色調(diào)選擇明亮的藍(lán)色，配以白色的背景和灰亮的輔助色，可以使站點(diǎn)干凈而整潔，給 人莊重、充實(shí)的印象。該頁面基本上屬于同類色系，也是最保守穩(wěn)妥且調(diào)和的配色方案。但該種配色看久了容 易呈現(xiàn)出平淡乏味的感受。f 藍(lán)色深藍(lán)色網(wǎng)頁例圖： HYPER

6、LINK 藍(lán)色系分析：（深藍(lán)色）HSB數(shù)值顯示主色調(diào)和輔色調(diào)的H色相接近，飽和度為最高，都為100%,兩者只在明 度上有區(qū)別，分別是35%和65%。三維厚重的設(shè)計(jì)風(fēng)格，用調(diào)和法之一的漸變手法，把主 色調(diào)和輔色調(diào)進(jìn)行了緩緩的過渡，增強(qiáng)了層次感，體現(xiàn)個性魅力，符合該頁面視音頻風(fēng)格網(wǎng) 站的主題。雖然是被譽(yù)為點(diǎn)睛色，但從整個頁面來看由于面積關(guān)系，點(diǎn)睛色在這里所起的作用不大， 僅僅就蜻蜓點(diǎn)水而已。相反的輔助色在這里卻起到了較為突顯的作用一一讓整個沉悶的本只 起烘托作用的深藍(lán)色得到充分的展示。另一輔色調(diào)灰色令白色與深藍(lán)色反差不易過大，起到 調(diào)和的目的。白色增強(qiáng)了整個頁面的視覺感，使之更醒目。結(jié)論：深藍(lán)色是

7、沉穩(wěn)的且較常用的色調(diào)。能給人穩(wěn)重、冷靜、嚴(yán)謹(jǐn)、冷漠、深沉、成熟的心理 感受。它主要用于營造安穩(wěn)、可靠、略帶有神秘色彩的氛圍。深藍(lán)色明度偏暗，基于上面對深藍(lán)色的特質(zhì)描述，在常規(guī)網(wǎng)站的設(shè)計(jì)里，可能不適合做 太大面積的使用。但根據(jù)不同網(wǎng)站主題的設(shè)計(jì)需要可以做些不同的嘗試。藍(lán)色純度對比網(wǎng)頁例圖：.uk(.主色調(diào)輔色調(diào)點(diǎn)睹色* 1背景色R 0R.SH.11VR 2S5H.50H 37* R238H.16H朝3：1C%S：75WG.217S.93WG：74S：93%S：1DG%B：235B：63WB.17B：66% B：1BB：93%B：93W網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析藍(lán)色系分析：（純度對比）從HSB模式上的

8、數(shù)值顯示情況進(jìn)行分析，全頁基本上是屬于高純度配色，各顏色特性 相互輝映、相互交融，把整個頁面環(huán)境渲染得異常鮮亮和熱鬧。冷暖色系之間跨度很大：藍(lán)色、綠色、黃色、橙黃色、朱紅色、土橙黃色、墨綠色，幾 乎按照色輪表上的軌跡進(jìn)行。也由于面積有多有少的原因，因此頁面看起來較明快調(diào)和。其 中土橙黃色和墨綠色是頁面明度最重的顏色，從RGB色值上可看出，都分別的混合了其他 顏色，因此飽和度相對較低，略呈灰色狀態(tài)，另一種意義上來說這種灰色狀態(tài)是調(diào)和色的一 種很好的方式。由于有大面積的主色調(diào)和背景色做掌控，加之以上因素綜合分析，無論頁面再多再細(xì)再 耀眼的顏色都能很好的統(tǒng)一在同一個頁面之中。結(jié)論：非常明快活潑、跳躍

9、的富有趣味性的配色。使人勾起了無限愉悅的童趣。高純度的藍(lán)色主色調(diào)配合的其他高純度冷暖色調(diào)對比，會營造出一種整潔輕快的印象。 根據(jù)色輪表的緩和過渡及使用面積多少，判斷分析出頁面調(diào)和程度。藍(lán)色鄰近色網(wǎng)頁例圖：pEggncy Category B RakingI rnporta nt Ncwi for Womm of Childbedrtng Agel-的fLhrr J *FEM, wBmjiH15Evaluated over 6 years in three birth and pngnQncy regiitrin1!Th* kmpacl a1 budf-ipR hurYiian pron-afi

10、cy:Dn iiirefl S-wedish- rcflistn4 EvaBig 9爭* MRH InOC QdT AQUA i lihi* liit .野$ntf kfitifdinAt -| f-IvroiiJ wN!h i Prpgnn(y C-alriury fi rbnig ClwF frO mdlig Homan in the Un4il Sl4/ls- afs 折 cMdtfining g/ 1A fkL-lafaen biri h !&f prerMH pSMCiJINS for Women ot Chddtn4rin Agekw of SpngyLaw RecfiTm$nda

11、d StaEtirgi Diag#Chamdhnrbcii il RrtNOCQRTJkQUA MmimRAuuEhJar EF，F(xiàn) * oRHINOCORTMUKltMd主色調(diào)R 0 H.MbG：102 5:100%B.153 B.60%輔色調(diào)R.17S H.2Q0. R 0 M1ECTG.2M 3:21% G.153 S：1D&%B：224 B：3B% B：153 B：60%點(diǎn)睛色背昌色E P6 M.Z17-R.117 H.154-G：1S2 3：JBWG：1B7S.-31WB：3B B：74%B：1B2 B：77%網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析藍(lán)色系分析：（藍(lán)色鄰近配色：藍(lán)色+綠色）從HBS模式

12、的S飽和度數(shù)值100%上看，不少朋友會有疑惑的感覺，認(rèn)為看起來較為 柔和的顏色，飽和度或許會低，刺眼的顏色通常飽和度較高，其實(shí)不然，每個顏色有每個顏 色的不同屬性特性。高純度的色彩，明度的降低是協(xié)調(diào)視覺的一個因素，容易給人造成低純 度的錯覺。不同塊面的鄰近色交錯排列，增強(qiáng)本頁面視覺動感。輔色調(diào)淺藍(lán)色是背景色白色和主色調(diào)藍(lán)色的中間色，它形成了頁面配色的中間色階，色 彩層次感增強(qiáng)以外，還使整個頁面的顏色更為和諧。另一輔色調(diào)青色，是藍(lán)色和綠色的結(jié)合體，包括在標(biāo)志文字、文字標(biāo)題上的運(yùn)用，無疑 活躍了整個頁面的配色環(huán)境。兩個點(diǎn)睛色都略調(diào)高了明度，另一意義上是該頁面配色的中間色階。兩點(diǎn)睛色都是在主 色調(diào)藍(lán)

13、色、輔色調(diào)青色的基礎(chǔ)上衍生出來的顏色，這里“點(diǎn)睛”的作用不大，都屬于和諧色系。結(jié)論：很多站點(diǎn)都在使用藍(lán)色與青綠色的搭配效果。藍(lán)色、青綠色、白色的搭配可以使頁面看 起來非常干凈清澈，在我們的現(xiàn)實(shí)生活中運(yùn)用的范圍很廣，可以說是隨處可見的。主顏色選擇明亮的藍(lán)色，配以白色的背景和灰亮的輔助色，加上中間色階的運(yùn)用，可以使頁面有干凈整潔，給人莊重、充實(shí)的印象。這是一組非常愉悅和諧的鄰近色系配色。中間色適度面積的運(yùn)用及背景白色讓這組顏色 特征發(fā)揮到了極致。藍(lán)色強(qiáng)對比網(wǎng)頁例圖：藍(lán)色系強(qiáng)對比：藍(lán)色+紅色藍(lán)色是冷色系的最典型的代表了，而紅色是暖色系里最典型的代表，兩冷暖色系對比下 讓全頁的色彩對比異常強(qiáng)烈且興奮，

14、很容易感染帶動瀏覽者的激昂情緒。紅色把文字圖片框 起來，在藍(lán)色背景對比下，很好的突出主題，又好似模仿投影熒屏的感覺，讓人迅速的聚焦 于視頻中心，達(dá)到網(wǎng)站背后的最終目的。輔色調(diào)是紅色，從數(shù)值上看接近于正紅色，紅色對視覺傳遞的信息是很快的，屬于高昂 響亮的顏色。點(diǎn)睛色分別是黃色、黃綠色。大家知道，黃色是明度最高的顏色，也較響亮、刺目，在 這里的運(yùn)用能強(qiáng)烈的突現(xiàn)標(biāo)題。從大的來看，點(diǎn)睛色黃綠色與輔助色紅色是對比色，雖然面 積不太大，只小范圍的對比，但是已經(jīng)足以達(dá)到了迅速傳遞信息的效果，讓人印象深刻，促 成再訪點(diǎn)擊。結(jié)論：冷暖色系的對比碰撞，充滿激情，能傳遞熾熱情感、強(qiáng)烈刺激主題的目的。該頁面運(yùn)用了冷暖

15、、紅綠兩種比較鮮明的對比色，配色積極大膽，視覺沖擊力很強(qiáng)。藍(lán)色對比網(wǎng)頁例圖：主色調(diào).輔色調(diào)(R.Z17 點(diǎn)睛色H.232B背景色RDH.3J0-R.0n.igsH.357R 2S5 H BCT5S.47G：1D23:100%S：100%G：31G：255 S：1DG%G.593:66%日：153HU日田 B：1DO%網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析藍(lán)色同類色對比：藍(lán)色+暖色這是一個配色難度較大的頁面。如何使這些配色和諧又能達(dá)到帶動對比的目的，就要求 要有一定的配色經(jīng)驗(yàn)了。難度一，在于主色調(diào)輔色調(diào)及點(diǎn)睛色的這三種藍(lán)色所充當(dāng)?shù)慕巧\(yùn) 用。難度二，高純度高亮度的正黃色在這個頁面的使用。難度三，黑色的運(yùn)用。運(yùn)用

16、排除法細(xì)分得到：主色調(diào)輔色調(diào)的藍(lán)色飽和度一樣都是最高值，色相H上稍微有 些微妙區(qū)別，亮度上有些變化。點(diǎn)睛色藍(lán)色飽和度和明度都較低，介于兩種藍(lán)色之間。三者 面積如果用得不好頁面容易呈混沌的灰色狀態(tài)。拿出輔色調(diào)藍(lán)色，再回到整個頁面的配色來 看，頁面色彩偏重，亮度不夠，缺少中間色階，冷暖主次傾向不夠明顯，這時(shí)把輔色調(diào)藍(lán)色 添加進(jìn)去正好彌補(bǔ)了這種缺憾。HSB模式顯示H是60度，S飽和度與B明度都是100%，正是正黃色。正黃色只適合 做小面積的點(diǎn)睛色使用，大面積使用頁面配色較難協(xié)調(diào)，當(dāng)然正黃色做為主色調(diào)能好配色些。在這樣的頁面色彩組合里，黑色是很難運(yùn)用進(jìn)去的，面積使用多了，頁面有可能會破壞所營造的氛圍、

17、產(chǎn)生不協(xié)調(diào)的感覺。只在輔助性的勾勒于邊框是很好的使用辦法。圖片里的產(chǎn)品顏色，有降低純度的棕黃色、土黃色、米黃色等同類黃色系，對該頁面色 彩組合調(diào)配具有一定的協(xié)調(diào)能力。結(jié)論：通常矢量頁面的配色相對于圖片配色來說，難度較大，色彩的組織搭配，是根據(jù)設(shè)計(jì)師 們自己以往的豐富配色經(jīng)驗(yàn)，反復(fù)調(diào)配、反復(fù)加減而得。該頁面設(shè)計(jì)師選取了頁面的產(chǎn)品圖片中的兩三種顏色，例如點(diǎn)睛色里的紅色、藍(lán)色和黃 色，再大膽的發(fā)揮出主色調(diào)藍(lán)色、較淺的輔色調(diào)藍(lán)色和點(diǎn)睛色正黃色，點(diǎn)睛色黃色運(yùn)用于最 能突出產(chǎn)品特色的文字上，這些和諧的元素生動趣味，讓整個頁面充滿了故事情節(jié)。本部分小節(jié)： HSB數(shù)值H色相為240度時(shí)是正藍(lán)色，它的特性這個時(shí)候也就揮灑得越明顯。從以 上不同屬性的藍(lán)色頁面色調(diào)上能看到，不同色相、飽和度、明度的藍(lán)色本身色彩特性表現(xiàn)得 不是非常特殊，這也是低調(diào)沉穩(wěn)的藍(lán)色所具備的特征之一。關(guān)鍵在于該種藍(lán)色都與哪種哪幾 種顏色襯托、對比的。冷色系以藍(lán)色為最典型的代表，因此就產(chǎn)生了廣義的相對暖色，例如當(dāng)與玫瑰紫色 做對比