模塊網(wǎng)站及網(wǎng)頁的色彩搭配

1、04模塊 網(wǎng)站及網(wǎng)頁的色彩搭配 網(wǎng)站的色彩搭配非常重要，色彩搭配好的網(wǎng)站能給瀏覽者留下很好的印象，而色彩搭配不好的網(wǎng)站則很難吸引瀏覽者。本模塊主要介紹的色彩搭配的相關(guān)知識。內(nèi)部包括三原色、常見網(wǎng)頁色彩、色彩的冷暖視覺、網(wǎng)頁的安全色、網(wǎng)站色彩規(guī)劃與搭配原理和常見配色方案等。 能力目標(biāo)1能區(qū)分冷暖色調(diào)。2能用Photoshop CS5拾取圖片顏色。3能根據(jù)網(wǎng)站內(nèi)容規(guī)劃網(wǎng)站色調(diào)。知識目標(biāo)1三原色。2冷暖色。3常見網(wǎng)頁顏色代碼。4常見網(wǎng)頁配色方案。 知識1 色彩的基礎(chǔ)知識 在物理學(xué)中，顏色由紅、綠和藍(lán)三原色1（又叫三基色）構(gòu)成。三種原色的不同的組合，構(gòu)成現(xiàn)實(shí)世界中的所有豐富多彩的顏色。黑色不是有顏色，

2、而是黑色物體不反射任何光線，看上去才表現(xiàn)為黑色。白色不是沒有顏色，而是含有全部的顏色。在設(shè)計(jì)中，顏色分為彩色與非彩色兩種。非彩色是指含有灰、白、黑三系的顏色。彩色是指非彩色以外的所有顏色。 網(wǎng)頁HTML語言中的色彩表達(dá)即是分別用紅、綠和藍(lán)三種顏色的值來表示的。分別把紅、綠和藍(lán)三種顏色分為256個(gè)（0至255）等級，用不同的組合形成不同的顏色。經(jīng)過組合后網(wǎng)頁就可以表示224種顏色。通常每種顏色的值用兩位十六進(jìn)制數(shù)來表示，并以“#”開頭。如紅色表示為#FF0000，綠色表示為#00FF00，藍(lán)色表示為#0000FF，白色表示為#FFFFFF。 Photoshop顏色拾取知識2 網(wǎng)頁色彩的冷暖視覺

3、從色彩心理學(xué)角度來考慮，桔紅的純色被定為最暖色，在色立體上為暖極；天藍(lán)的純色被定為最冷色，在色立體上稱為冷極，并用冷暖兩極的關(guān)系來劃分色立體其他顏色的冷暖程度與冷暖差別。與暖極近的為暖色，與冷極近的為冷色，與兩極距離相等的顏色，稱為中間色。由此可知，紅、橙和黃等為暖色，藍(lán)綠、藍(lán)和藍(lán)紫是冷色，黑、白、灰、彩和紫等色為中性色。 淡雅清爽的百度網(wǎng)址大全首頁 溫暖活潑的淘寶網(wǎng)首頁知識3 網(wǎng)頁的安全色不同的硬件環(huán)境、操作系統(tǒng)、瀏覽器對各種顏色的表現(xiàn)有所不同。當(dāng)顯示的顏色與設(shè)計(jì)的顏色不同時(shí)，就會產(chǎn)生失真。但所有的這些環(huán)境都可以顯示216種顏色集合（調(diào)色板），也就是說這些顏色在任何計(jì)算機(jī)上的顯示都是相同的。

4、所有網(wǎng)頁中如果使用這216種顏色，就可以避免失真的問題。網(wǎng)絡(luò)安全色是當(dāng)紅色（Red）、綠色（Green）、藍(lán)色（Blue）顏色數(shù)字信號值為0、51、102、153、204、255時(shí)構(gòu)成的顏色組合，它一共有6 * 6 * 6=216種顏色（其中彩色為210種，非彩色為6種）。 當(dāng)網(wǎng)頁中的有些顏色顯示設(shè)備無法正確還原時(shí)，顯示設(shè)備就會使用與需要相似的顏色，使顯示的顏色盡量達(dá)到需要的效果。因此用這216種顏色表現(xiàn)高清晰度的圖片時(shí)可能會有所欠缺，但表現(xiàn)網(wǎng)頁的文字、背景的顏色還是完全可以的。使用216中安全色是網(wǎng)頁設(shè)計(jì)中累積經(jīng)驗(yàn)的結(jié)果，在進(jìn)行網(wǎng)頁的頁面設(shè)計(jì)時(shí)，要盡量使用網(wǎng)頁安全色，這樣就可以更準(zhǔn)確、真實(shí)地

5、表現(xiàn)網(wǎng)頁的顏色效果。 知識5 網(wǎng)站總體色彩規(guī)劃 1 1定義網(wǎng)站的色彩基調(diào)定義網(wǎng)站的色彩基調(diào)就是選擇一個(gè)顏色作為網(wǎng)站最主要的風(fēng)格色調(diào)。需要注意以下幾個(gè)方面。(1)網(wǎng)站的色彩要鮮明。人們在瀏覽網(wǎng)站時(shí)，更愿意接受鮮明的顏色。黯淡的顏色會給人一種壓抑的感覺。(2)網(wǎng)站的色彩要獨(dú)特。一個(gè)優(yōu)秀的網(wǎng)站，往往與別的網(wǎng)站有著不同的色彩風(fēng)格。用戶可能根據(jù)網(wǎng)站的獨(dú)特風(fēng)格而接受這個(gè)網(wǎng)站。(3)色彩需要與網(wǎng)站的內(nèi)容諧調(diào)。網(wǎng)站色彩應(yīng)該依據(jù)網(wǎng)站內(nèi)容給消費(fèi)者營造相應(yīng)的氣氛。例如科技和教育類網(wǎng)站可以使用淺藍(lán)色，婚慶類網(wǎng)站可以使用粉紅色，慶典類網(wǎng)站可以使用大紅色。(4)要注意色彩和顏色的聯(lián)想性。例如，黑色讓人聯(lián)想到夜晚，藍(lán)色讓人

6、聯(lián)想到天空或海洋，大紅色可以讓人聯(lián)想到喜慶等。 2 2站點(diǎn)內(nèi)各欄目色彩搭配原則在對網(wǎng)站進(jìn)行顏色搭配時(shí)，需要遵循一些顏色搭配的原理和方法。這些配色原理是根據(jù)長期設(shè)計(jì)的經(jīng)驗(yàn)和人們對顏色的感知形成的。網(wǎng)站的各個(gè)欄目，因?yàn)樾枰w現(xiàn)出不同的內(nèi)容和瀏覽方式，需要針對不同的網(wǎng)站欄目進(jìn)行不同的配色。一般來說，需要吸引用戶注意力的欄目應(yīng)該使用鮮明的顏色。不同的欄目之間應(yīng)該有一些顏色的對比，增強(qiáng)網(wǎng)頁色彩的層次感。 知識6 網(wǎng)頁色彩搭配原理在網(wǎng)頁中的一般處理方法是主要內(nèi)容文字用非彩色（黑色），邊框、背景、圖片等次要內(nèi)容用彩色。這樣，頁面的整體感覺很清爽但不單調(diào)，也不會給人眼花繚亂的感覺。在非彩色的搭配中，黑白是最基

7、本和最簡單的搭配，白底黑字或白字黑底頁面的內(nèi)容都非常自然?；疑侨f能色，可以和很多種顏色搭配，可以實(shí)現(xiàn)不同顏色的和諧過度。在網(wǎng)頁中，當(dāng)有兩種對比很強(qiáng)烈的顏色組合在一起，而不好搭配其它顏色時(shí)，可以考慮使用灰色為過度的中間色。 彩色搭配是一個(gè)比較復(fù)雜的內(nèi)容。網(wǎng)頁進(jìn)行配色時(shí)，需要先確定網(wǎng)頁的主色調(diào)。然后根據(jù)主色調(diào)再確定搭配的顏色。網(wǎng)站中不要使用過多的顏色，一個(gè)網(wǎng)頁的顏色應(yīng)盡量控制在3種顏色以內(nèi)。使用太多種顏色可能使網(wǎng)站顏色混雜，視覺效果混亂。背景與文本的顏色對比要強(qiáng)烈，不要將背景與文本使用相近的顏色。不要使用鮮明的花紋作為背景，這樣無法突顯出網(wǎng)頁的內(nèi)容，瀏覽網(wǎng)頁時(shí)也會很吃力。 知識7 常見的幾種網(wǎng)頁

8、配色方案1 1紅色色調(diào)的使用與搭配紅色的色感溫暖、性格剛烈而外向，可以對人形成強(qiáng)烈的刺激。紅色比其他顏色更能吸引人的注意，也可以引起人的興奮、激動、緊張和沖動的感覺。過多的紅色也會引起人的視覺疲勞，使人眼的視覺感減弱。在紅色中可以搭配一些其他顏色豐富網(wǎng)頁的效果。(1)在紅色中加入一些黃色，會增強(qiáng)紅色的色感，可使紅色更加趨向于躁動和不安。(2)在紅色中加入一些藍(lán)色，會減弱紅色的色感，可使紅色更加趨向于文雅和柔和。(3)在紅色中加入一些黑色，會使紅色的性格變得沉穩(wěn)，給人以厚重和樸實(shí)的感覺。(4)在紅色中加入一些白色，會使色感溫柔，趨于含蓄、羞澀和嬌嫩。2 2綠色色調(diào)的使用與搭配綠色是大自然中生命的

9、顏色，給人們以生命、成長、希望的氣息。綠色是人們最愿意接受的純自然感覺。綠色的性格平和、安穩(wěn)，是一種溫順、恬靜、自然和優(yōu)美的顏色。(1)在綠色中加入一些黃色，會使綠色的性格趨于活潑和友善。(2)在綠色中加入一些黑色，會使綠色的性格趨于莊重和成熟。(3)在綠色中加入少量的白色，會使綠色的性格趨于潔凈、清爽和鮮嫩。 3 3藍(lán)色色調(diào)的使用與搭配藍(lán)色的色感冷清，性格樸實(shí)內(nèi)向，是一種有助于人頭腦冷靜的顏色。藍(lán)色可以很容易讓人感覺到天空、大海的氛圍，提供一個(gè)深遠(yuǎn)、廣闊和平靜的空間，可以襯托其他活躍的顏色。藍(lán)色淡化后仍然能保持較強(qiáng)個(gè)性，不同的藍(lán)色給人完全不同的感覺。如果在藍(lán)色中分別加入少量的紅、黃、黑、橙和

10、白等色，會對藍(lán)色的色感造成鮮明的影響。藍(lán)色是最養(yǎng)眼的顏色，藍(lán)色的背景可以使人平靜、遐想。網(wǎng)站常常使用藍(lán)色作為網(wǎng)站的背景色。而不同的藍(lán)色往往給人完全不同的感覺。藍(lán)色是現(xiàn)今網(wǎng)站中最常使用的主色調(diào)。藍(lán)色風(fēng)格的網(wǎng)頁最容易被用戶接受和認(rèn)可。很多大中型的科技教育類和網(wǎng)絡(luò)公司的網(wǎng)站都是使用藍(lán)色風(fēng)格。 4 4黃色色調(diào)的使用與搭配黃色可以表現(xiàn)出冷漠、高傲、敏感和不安寧的視覺印象。在所有的顏色中，黃色的色感最容易發(fā)生變化。只要在純黃色中搭配少量的其他顏色，其色感和表現(xiàn)出的性格就會發(fā)生很大的變化。黃色在搭配其他的顏色時(shí)，會因?yàn)樯实膶Ρ冉o黃色帶來完全不同的色彩感覺。(1)在黃色中加入少量的藍(lán)色，會使其轉(zhuǎn)化為嫩綠色，

11、可使黃色表現(xiàn)出平和潮潤的感覺。(2)黃色和紅色搭配在一起，會使其轉(zhuǎn)化為橙色，色感會從冷漠、高傲轉(zhuǎn)化為有分寸感的熱情和溫暖。(3)在黃色中加入少量的黑色，會使其轉(zhuǎn)化為橄欖綠色，色感表現(xiàn)成熟和隨和的感覺。(4)在黃色中加入少量的白色，會使色感變得柔和，可以淡化黃色的性格感，使顏色趨近于含蓄和易于接近。 5 5橙色色調(diào)的使用與搭配橙色具有紅和黃的成分，其性格趨于甜美、亮麗和芳香，也有紅色的效果，性格趨于興奮和狂躁。橙色中加入少量的白色，可淡化橙色的效果，使橙色的色感趨于焦躁和無力。6 6紫色色調(diào)的使用與搭配紫色的明度在彩色的色料中是最低的。紫色的低明度給人一種沉悶和神秘的感覺。(1)紫色中紅的成分較

12、多時(shí)，就會給人以壓抑威脅的感覺。(2)紫色中加入黑色，其感覺就趨于沉悶、傷感和恐怖。(3)紫色中加入白色，就會變得優(yōu)雅、嬌氣，并充滿女性的魅力。 7 7白色色調(diào)的使用與搭配白色的色感光明，性格樸實(shí)、純潔和快樂。給人以雪山和冰川的感覺。如果在白色中加入其他的顏色，都會影響其純潔性，使其性格變得含蓄，會減弱白色的色感。(1)白色搭配少量的紅色，會感受到一種粉紅色，鮮嫩而充滿誘惑。(2)白色搭配少量的綠色，就如剛出土的綠芽，給人一種稚嫩和柔和的感覺。(3)白色搭配少量的藍(lán)色，會使氣氛變得清冷和潔凈。(4)白色搭配少量的黃色，會成為一種乳黃色，給人一種溫馨的感覺。(5)白色搭配少量的橙色，就如同沙漠戈壁，如同干裂的土地，有干燥的氣氛。(6)白色搭配少量的紫色，就如同紫色蘭花，讓人聯(lián)想到淡淡的芬芳。 引例：經(jīng)典網(wǎng)頁設(shè)計(jì)色彩搭配實(shí)例欣賞 支付寶網(wǎng)站的顏色搭配，代表電子商務(wù)網(wǎng)站的配色趨勢，有很多內(nèi)