網(wǎng)頁(yè)配色技巧-課件

6.2.5網(wǎng)頁(yè)配色技巧目標(biāo)了解網(wǎng)頁(yè)色彩基本知識(shí)掌握色彩的三要素掌握色彩對(duì)比和色彩心理的表現(xiàn)形式掌握網(wǎng)頁(yè)配色原則與技巧

網(wǎng)站整體運(yùn)營(yíng)流程公司網(wǎng)站網(wǎng)站前期的策劃與設(shè)計(jì)網(wǎng)站中期的制作與開(kāi)發(fā)網(wǎng)站后期的推廣與維護(hù)網(wǎng)站上傳與維護(hù)網(wǎng)站推廣與安全網(wǎng)站前臺(tái)頁(yè)面制作網(wǎng)站后臺(tái)程序開(kāi)發(fā)網(wǎng)站需求分析與策劃方案網(wǎng)站頁(yè)面效果圖設(shè)計(jì)與定稿網(wǎng)頁(yè)的色彩是樹(shù)立網(wǎng)站形象的關(guān)鍵之一。網(wǎng)頁(yè)的背景，文字，圖標(biāo)，邊框，超鏈接等，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好的表達(dá)出預(yù)想的內(nèi)涵？一、色彩入門(mén)1、色彩與視覺(jué)原理：色彩是由光的刺激而產(chǎn)生的一種視覺(jué)效應(yīng)。光是產(chǎn)生色的原因，色是光感覺(jué)的結(jié)果。一、色彩入門(mén)2.顏色分無(wú)彩色和有彩色兩大類(lèi)。無(wú)彩色是指黑，白，灰系統(tǒng)色。有彩色是指除了非彩色以外的所有色彩，如，紅、綠藍(lán)等。3、三原色一切顏色都來(lái)自三原色：紅、綠、藍(lán)[RGB]，其它的色彩都可以用這三種色彩調(diào)和而成。例如，黃=紅+綠，紫色=紅+藍(lán)，白色=紅+綠+藍(lán)用6個(gè)十六進(jìn)制數(shù)來(lái)表示紅、綠、藍(lán)3種顏色的含量，組成一個(gè)6位的十六進(jìn)制數(shù)，就是RGB顏色。例如，紅色為FF0000，綠色為00FF00，藍(lán)色為0000FF，白色為FFFFFF。通常情況下，RGB各有256級(jí)亮度，一共可以組合出256*256*256=16777216，簡(jiǎn)稱(chēng)1600萬(wàn)色，也稱(chēng)為24位色。一、色彩入門(mén)一、色彩入門(mén)4、色彩的三要素色相：色相也叫色澤，色相是色彩最基本的特征，反應(yīng)顏色的基本面貌。色相是一種色彩區(qū)別于另一種色彩的最主要因素。

色相最基本的代表色是紅、黃、綠、青、紫5種。這5種在人們的心理方面有明確的特征，色相的心理反應(yīng)特征是暖色或冷色。色相之間的關(guān)系可以用色相環(huán)表示，除了主要的5種色相外，橙、黃綠、青綠和青紫、紫紅成為中間色相。人的眼睛可以分辨出約180種不同色相的顏色。12基本色相---色環(huán)一、色彩入門(mén)4、色彩的三要素明度：明度是指色彩的深淺、明暗，它決定于反射光的強(qiáng)度，任何色彩都存在明暗變化。其中黃色明度最高，紫色明度最低，綠、紅、藍(lán)、橙的明度相近，為中間明度。另外在同一色相的明度中還存在深淺的變化。如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。有明度差的色彩更容易調(diào)和。如紫色（#993399）跟黃色（#ffff00），暗紅（#cc3300）跟草綠（#99cc00），暗藍(lán)（#0066cc）跟橙色（#ff9933）等。12基本色相---色環(huán)紫色（#993399）跟黃色（#ffff00）暗紅（#cc3300）跟草綠（#99cc00）暗藍(lán)（#0066cc）跟橙色（#ff9933）一、色彩入門(mén)4、色彩的三要素純度：純度是指色彩的鮮艷程度，也稱(chēng)色彩的飽和度。其取決于該色中含色成分和消色成分(灰色)的比例。含色成分越大，飽和度越大；消色成分越大，飽和度越小。相近色：

色環(huán)中相鄰的三種顏色。如黃綠色，黃色和桔黃色。相近色的搭配給人的視覺(jué)效果很舒適，很自然。所以相近色在網(wǎng)站設(shè)計(jì)中極為常用。二、色彩對(duì)比互補(bǔ)色：在色環(huán)上，相對(duì)的兩種顏色（即：在同一條直徑上的兩種顏色）為一組補(bǔ)色，如：紅和綠，橙和藍(lán)，黃和紫都是補(bǔ)色。補(bǔ)色的對(duì)比十分強(qiáng)烈，視覺(jué)上給人不和諧的感覺(jué)。補(bǔ)色的組合可以使人感覺(jué)紅的更紅綠的更綠，雖然不和諧，但如果運(yùn)用得好的話(huà)也可以很漂亮，給人視覺(jué)沖擊力很強(qiáng)，如果運(yùn)用得不好，就會(huì)給人俗氣，刺眼得感覺(jué)。

補(bǔ)色在網(wǎng)站設(shè)計(jì)中用得也極為普遍。二、色彩對(duì)比補(bǔ)色對(duì)比分析：

由冷色系的綠色、藍(lán)色組成大背景環(huán)境，純度較低。前景主要是突出產(chǎn)品、文字信息內(nèi)容的大紅色形成補(bǔ)色對(duì)比效果，RGB的R255數(shù)值與HSB是H為零，數(shù)值顯示非常明確，標(biāo)準(zhǔn)的大紅色。純度亮度非常高，達(dá)到最高值，加之白色的勾邊，使得紅色更為凸顯，更易于視覺(jué)對(duì)信息的迅速捕捉。

結(jié)論：

對(duì)比色的合理搭配，能拉開(kāi)前景與背景的空間感，突出頁(yè)面主體物。尤其是紅色在主體物的運(yùn)用，能迅速傳遞視覺(jué)的效果。暖色:暖色，如黃色，橙色，紅色，紫色等都屬于暖色系列。暖色跟黑色調(diào)和可以達(dá)到很好的效果。暖色一般應(yīng)用于購(gòu)物類(lèi)網(wǎng)站，電子商務(wù)網(wǎng)站，兒童類(lèi)網(wǎng)站等等，用以體現(xiàn)商品的琳瑯滿(mǎn)目，兒童類(lèi)網(wǎng)站的活潑，溫馨等等效果。二、色彩對(duì)比暖色冷色:冷色，如綠色，藍(lán)色，藍(lán)紫色等等都屬于冷色系列。冷色一般跟白色調(diào)和可以達(dá)到一種很好的效果。冷色一般應(yīng)用于一些高科技，游戲類(lèi)網(wǎng)站，主要表達(dá)嚴(yán)肅，穩(wěn)重等效果。二、色彩對(duì)比冷色冷暖對(duì)比分析：

該頁(yè)面冷暖顏色較為豐富，橙和藍(lán)是對(duì)比最強(qiáng)烈的補(bǔ)色，其次是傾向不夠明顯的補(bǔ)色黃、紫。明度不同的兩個(gè)綠色起到了冷暖視覺(jué)的過(guò)渡作用。主色調(diào)的淺藍(lán)色亮度較高，讓頁(yè)面不易給人沉悶的感覺(jué)。

結(jié)論：

冷暖對(duì)比的應(yīng)用，通常在休閑娛樂(lè)網(wǎng)站、食品網(wǎng)站出現(xiàn)比較多。

將這兩個(gè)色系的色彩安排在同一畫(huà)面時(shí)，其對(duì)比效果極為強(qiáng)烈。通常初學(xué)者較容易使兩色相互排斥，導(dǎo)致畫(huà)面色調(diào)不諧調(diào)。一般我們采用兩種調(diào)和的方法。三、色彩的分析當(dāng)我們看到不同的顏色時(shí)，心理會(huì)受到不同顏色的影響而發(fā)生變化而產(chǎn)生一些聯(lián)想。不同的色彩又可以表達(dá)了不同的含義。不同的色彩運(yùn)用又會(huì)得到不同的效果。紅色心理聯(lián)想：是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)、憤怒、熱情、活力的感覺(jué)。被用來(lái)傳達(dá)有活力、積極、熱誠(chéng)、溫暖、喜悅、前進(jìn)等涵義的企業(yè)形象與精神。大紅桃紅磚紅玫瑰紅動(dòng)態(tài)效果強(qiáng)烈的鮮明對(duì)比色彩賦于站點(diǎn)奔放、激情的個(gè)性。

奔放、激情的配色返回綠色綠色在黃色和藍(lán)色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿(mǎn)足、優(yōu)美、受歡迎之色。也是網(wǎng)頁(yè)中使用最為廣泛的顏色之一。綠色與人類(lèi)息息相關(guān)，是永恒的欣欣向榮是的自然之色，代表了生命與希望，也充滿(mǎn)了青春活力，綠色象征著和平與安全、發(fā)展與生機(jī)、舒適與安寧、松弛與休息，有緩解眼部疲勞的作用。大綠翠綠橄欖綠墨綠

綠色和淡白淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。紫色

紫色是一種在自然界中比較少見(jiàn)的顏色。象征著女性化，代表著高貴和奢華、優(yōu)雅與魅力，也象征著神秘與莊重、神圣和浪漫。另一方面又有孤獨(dú)等意味。紫色在西方宗教世界中是一種代表尊貴的顏色，大主教身穿的教袍便采用了紫色。紫色中加入少量的黑，沉重、傷感、恐怖、莊嚴(yán)的感覺(jué)。紫色中加入白，變得優(yōu)雅、嬌氣，并充滿(mǎn)女性的魅力。大紫貴族紫葡萄酒紫深紫橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時(shí)尚的效果。鮮橙橘橙朱橙香吉士黃色具有快樂(lè)，希望，智慧和輕快的個(gè)性，它的明度最高。大黃檸檬黃柳丁黃米黃藍(lán)色是最具涼爽，清新，專(zhuān)業(yè)的色彩。由于藍(lán)色沉穩(wěn)的特性，具有理智，準(zhǔn)確的意象，在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技，效率的商品或企業(yè)形象，大多選用藍(lán)色當(dāng)標(biāo)準(zhǔn)色，企業(yè)色。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛。大藍(lán)天藍(lán)水藍(lán)深藍(lán)

白色在商業(yè)設(shè)計(jì)中，白色具有高級(jí)，科技的意象，通常需和其他色彩搭配使用并且可以和任何顏色作搭配。黑色在商業(yè)設(shè)計(jì)中，黑色具有高貴，穩(wěn)重，科技的意象，許多科技產(chǎn)品的用色，如電視，跑車(chē)，攝影機(jī)，音響，儀器的色彩，大多采用黑色，在其他方面，黑色的莊嚴(yán)的意象，也常用在一些特殊場(chǎng)合的空間設(shè)計(jì)?；疑谏虡I(yè)設(shè)計(jì)中，灰色具有柔和，高雅的意象，而且屬於中間性格，男女皆能接受，所以灰色也是永遠(yuǎn)流行的主要顏色，在許多的高科技產(chǎn)品，尤其是和金屬材料有關(guān)的，幾乎都采用灰色來(lái)傳達(dá)高級(jí)，科技的形象，使用灰色時(shí)，大多利用不同的層次變化組合或他配其他色彩，才不會(huì)過(guò)於素，沉悶，而有呆板，僵硬的感覺(jué)。大灰老鼠灰藍(lán)灰深灰四、網(wǎng)頁(yè)配色原則[1]、特色鮮明：一個(gè)網(wǎng)站的用色必須要有自己的獨(dú)特風(fēng)格，這樣才能顯得個(gè)性鮮明，給瀏覽者留下深刻的印象。[2]、搭配合理：網(wǎng)頁(yè)設(shè)計(jì)雖然屬于平面設(shè)計(jì)的范疇，但它又與其他平面設(shè)計(jì)不同，它在遵從藝術(shù)規(guī)律的同時(shí)，還要考慮人的生理特點(diǎn)，色彩搭配一定要合理，給人一種和諧、愉快的感覺(jué)，避免采用純度很高的單一色彩，這樣容易造成視覺(jué)疲勞。[3]、講究藝術(shù)性：網(wǎng)站設(shè)計(jì)也是一種藝術(shù)活動(dòng)，因此它必須遵循藝術(shù)規(guī)律，在考慮到網(wǎng)站本身的特點(diǎn)同時(shí)，按照內(nèi)容決定形式的原則，大膽進(jìn)行藝術(shù)創(chuàng)新，設(shè)計(jì)出既符合網(wǎng)站要求，又有一定藝術(shù)特色的網(wǎng)站五、網(wǎng)頁(yè)配色的方法[1]、單色的使用：簡(jiǎn)單的說(shuō)，這種方法是采用一種顏色的深淺搭配，盡管網(wǎng)站設(shè)計(jì)要避免采用單一色彩，以免產(chǎn)生單調(diào)的感覺(jué)，但通過(guò)調(diào)整色彩的飽和度與透明度也可以產(chǎn)生變化，使用網(wǎng)站避免單調(diào)。[2]、鄰近色的使用：所謂鄰近色，就是在色相環(huán)中相鄰近的顏色，比如：紅與黃、綠與藍(lán)為相鄰色。采用相鄰色設(shè)計(jì)網(wǎng)頁(yè)可以使用網(wǎng)頁(yè)避免色彩雜亂，易于達(dá)到頁(yè)面的和諧統(tǒng)一五、網(wǎng)頁(yè)配色的方法[3]、對(duì)比色使用：使用兩種完全不同的顏色搭配，對(duì)比色可以突出重點(diǎn)，產(chǎn)生強(qiáng)烈的視覺(jué)效果。在設(shè)計(jì)時(shí)一般以一種顏色為主色調(diào)，對(duì)比色作為點(diǎn)綴，可以起到畫(huà)龍點(diǎn)眼的作用五、網(wǎng)頁(yè)配色的方法[4]、冷色的使用：[5]、暖色的使用：紅.橙.橙黃.黃.黃綠.綠.青綠.藍(lán)綠.藍(lán).藍(lán)紫.紫.紫紅.紅|___________||____||_________||_________|||||暖色系中性系冷色系中性系五、網(wǎng)頁(yè)配色的方法[6]、疊透法的使用：使用不同色彩純度的顏色疊加搭配，由于色彩的純度不同，從而形成不同色彩的疊加和透明。比如同種色的疊透、類(lèi)似色的疊透和對(duì)比色的疊透明。使頁(yè)面色彩具體立體感與空間感。[7]、主次搭配的使用：以一種顏色為主要顏色，即作為主色，同時(shí)輔以其他顏色混合搭配，形成繽紛而不雜亂的搭配效果。六、網(wǎng)頁(yè)配色技巧[1]、用一種色彩：這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說(shuō)得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。[2]、用兩種色彩：先選定一種色彩，然后選擇它的對(duì)比色。這樣會(huì)使用整個(gè)頁(yè)面色彩豐富但不花稍。六、網(wǎng)頁(yè)配色技巧[3]、用一個(gè)色系：簡(jiǎn)單的說(shuō)就是用一個(gè)感覺(jué)的色彩，例如淡藍(lán)，淡黃，淡綠；或者土黃，土灰，土藍(lán)。因?yàn)槭峭粋€(gè)色系，因此搭