網(wǎng)頁配色基礎(chǔ)教程

520張超贊實(shí)物配色卡

• 類型：圖片素材大�。�88.3M語言：中文 評分：8.3
• 標(biāo)簽：

立即下載

西西也是非美術(shù)專業(yè)下面的教程是在各大網(wǎng)站上整理過來的，希望對大家在配色上有所幫助。

在實(shí)用美術(shù)中，常有"遠(yuǎn)看色彩近看花，先看顏色后看花，七分顏色三分花"的說法。

在HTML里，顏色有兩種表示方式。一種是用顏色名稱表示，比如blue表示藍(lán)色。另外一種是用16進(jìn)制的數(shù)值表示RGB的顏色值。RGB是Red，Green，Blue意思，RGB每個(gè)原色的最小值是0，最大值是255，假如換算成16進(jìn)制表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；還有黑色的RGB(0,0,0)，就用#000000表示。

注：在W3C制定的HTML 4 .0標(biāo)準(zhǔn)中，只有16種顏色可以用顏色名稱表示(aqua, black, blue, fuchsia, gray, green, lime, maroon , navy, olive, purple, red, silver, teal, white, and yellow)，其它的顏色都要用16進(jìn)制RGB顏色值表示。

種不同的系統(tǒng)保留顏色。以下就是216種Web安全顏色：#這個(gè)符號。56種Web安全顏色呢？因?yàn)镸icrosoft和Mac操作系統(tǒng)有。

當(dāng)然 ，現(xiàn)在的瀏覽器支持更多的顏色名稱。不過為保險(xiǎn)起見，建議你還是采用16進(jìn)制RGB顏色值來表示顏色。并且在值前加上#這個(gè)符號。

為了方便大家找到合適的顏色 ，我們在這里列了一些顏色說明 ，以供大家參考 ，不妨作為一種速查工具 。

Web安全顏色

以前，很多電腦顯示器最多支持256色，因此出現(xiàn)了216種Web安全顏色 ，以保證網(wǎng)頁的顏色能夠正確顯示。以下就是216種Web安全顏色：000000表示。以保證網(wǎng)頁的顏色能夠正確顯示。那為什么不是256種Web安全顏色呢？因?yàn)镸icrosoft和Mac操作系統(tǒng)有40種不同的系統(tǒng)保留顏色。

green, lime, maroon, navy, olive!

以下就是216種Web安全顏色 ：

微軟支持的顏色名稱

下面是微軟IE4.0以上都支持的顏色名稱：

這也就說明，在任何設(shè)計(jì)中，色彩對視覺的刺激起到第一信息傳達(dá)的作用。因此，對色彩的基礎(chǔ)知識的良好掌控，在網(wǎng)頁設(shè)計(jì)中才能做到游刃有余。

為了使下面的網(wǎng)頁配色分析更易于理解，我們先來了解色彩的RGB模式和HSB模式。

■ RGB

RGB是表示紅色綠色藍(lán)色又稱為三原色光，英文為R(Red)、G(Green)、B(Blue)，在電腦中，RGB的所謂"多少"就是指亮度，并使用整數(shù)來表示。

通常情況下，RGB各有256級亮度，用數(shù)字表示為從0、1、2至255。雖然數(shù)字最高是255，但0也是數(shù)值之一，因此共256級。按照計(jì)算，256級的RGB色彩總共能組合出約1678萬種色彩，即256×256×256＝16777216。通常也被簡稱為1600萬色或千萬色。也稱為24位色(2的24次方)。

對于單獨(dú)的R或G或B而言，當(dāng)數(shù)值為0時(shí)，代表這種顏色不發(fā)光；如果為255，則該顏色為最高亮度。因此當(dāng)RGB三種色光都發(fā)到最強(qiáng)的亮度，純白的RGB值就為255,255,255。屏幕上黑的RGB值是0,0,0。R，意味著只有紅色存在，且亮度最強(qiáng)，G和B都不發(fā)光。因此最紅色的數(shù)值是255,0,0。同理，最綠色就是0,255,0；而最藍(lán)色就是0,0,255。黃色較特殊，是由紅色加綠色而得就是255，255，0。

RGB模式是顯示器的物理色彩模式。這就意味著無論在軟件中使用何種色彩模式，只要是在顯示器上顯示的，圖像最終就是以RGB方式出現(xiàn)。

■ HSB
　　
是顏色分為色相、飽和度、明度三個(gè)因素。英文為H(Hue)、S（Saturation）B（Brightness)飽和度高色彩較艷麗。飽和度低色彩就接近灰色。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。一般淺色的飽和度較低，亮度較高，而深色的飽和度高而亮度低

顏色的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。但是對于剛開始學(xué)習(xí)制作網(wǎng)頁的人來說，往往不容易駕馭好網(wǎng)頁的顏色搭配。除了學(xué)習(xí)各種色彩理論和方法之外，筆者認(rèn)為多學(xué)習(xí)一些著名網(wǎng)站的用色方法，對于我們制作美麗的網(wǎng)頁可以起到事半功倍的作用。所以，筆者總結(jié)了一些著名網(wǎng)站的顏色搭配方法，這些方法可以讓我們的學(xué)習(xí)少走彎路，快速提高我們的網(wǎng)頁制作水平。

一、網(wǎng)頁顏色原理和象征意義

我們所有網(wǎng)頁上顏色，在HTML下看到的是以顏色英文單詞或者十六進(jìn)制的表示方法（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各種豐富的感覺和聯(lián)想。

紅色：熱情、奔放、喜悅、莊嚴(yán)

黃色：高貴、富有、燦爛、活潑

黑色：嚴(yán)肅、夜晚、沉著

白色：純潔、簡單、潔凈

藍(lán)色：天空、清爽、科技

綠色：植物、生命、生機(jī)

灰色：莊重、沉穩(wěn)

紫色：浪漫、富貴

棕色：大地、厚樸

二、網(wǎng)頁顏色的使用風(fēng)格

不同的網(wǎng)站有著自己不同的風(fēng)格，也有著自己不同的顏色。網(wǎng)站使用顏色大概分為幾種類型：

1、 公司色

在現(xiàn)在企業(yè)中，公司的CI形象顯得尤其重要，每一個(gè)公司的CI設(shè)計(jì)必然要有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色，同時(shí)形象宣傳、海報(bào)、廣告使用的顏色都和網(wǎng)站的顏色一致。再比如國富投資公司的主色調(diào)是C：100%，M：60%，Y：0%，K：0%。這樣的顏色使用到網(wǎng)站上顯得色調(diào)自然、底蘊(yùn)深厚。

2、 風(fēng)格色

許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍(lán)色的較多……這些都是在突出自己的風(fēng)格。

3、 習(xí)慣色

這些網(wǎng)站的顏色使用很大一部分是憑自己的個(gè)人愛好，以個(gè)人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時(shí)候就傾向于這種顏色。每一個(gè)人都有自己喜歡的顏色，因此這種類型稱為習(xí)慣色。

三、設(shè)計(jì)用色十例

以下我將分別介紹十個(gè)配色較好的網(wǎng)站，大家可以學(xué)習(xí)和借鑒一下，培養(yǎng)對色彩的敏感以及獨(dú)到的審美能力。

1）這是個(gè)大型的NBA網(wǎng)站。通常我們經(jīng)常看到的此類網(wǎng)站以白色為背景，但是這個(gè)網(wǎng)站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用RGB表示），文章標(biāo)題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這樣的配色可以顯示獨(dú)特的個(gè)性，又不失大型網(wǎng)站的風(fēng)采。如圖1

圖1

2）下面是一個(gè)娛樂類的綜合性網(wǎng)站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82），字體白色RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍(lán)為主色調(diào)，但是配以漂亮的圖片，給人的感覺是生機(jī)盎然，充滿了互動色彩和青春氣息。如圖2。

圖2

3）下面的這個(gè)網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做的好，連網(wǎng)頁制作也是世界一流。他的每一個(gè)網(wǎng)頁都是制作的樣板。從網(wǎng)頁我們就可以看出微軟公司的風(fēng)格、作風(fēng)，以及雄厚的實(shí)力。背景顏色使用藍(lán)色RGB為（0，151，254），菜單為黑色RGB（0，0，11），菜單為灰色RGB（200，200，200），字體為黑色RGB（0，0，0），如圖3。

圖3

4)現(xiàn)在介紹的網(wǎng)站相對簡單，但是她的用色也別具匠心，現(xiàn)在我們來看一看，整體上使用的是白色RGB（255，255，255），輔助色為RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡單，但顏色搭配非常的科學(xué)合理。如圖4

圖4

5）下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個(gè)性，現(xiàn)在我們就來看一看她的顏色搭配。主色調(diào)為黃色RGB為（255，199，48/#FFC730），輔助色調(diào)為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個(gè)性十足但又不單調(diào)。如圖5

圖5

6）橘紅色如果運(yùn)用得當(dāng)?shù)脑捠且环N非常使用于網(wǎng)頁上的顏色。下面的這個(gè)網(wǎng)站就是一個(gè)非常著名的例子。他的主色調(diào)為RGB（255，151，0）輔助色調(diào)為RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的震懾力較強(qiáng)。如圖6

圖6

7）鮮紅色也是一種震撼感很強(qiáng)的顏色，如果搭配不當(dāng)，也可能使網(wǎng)站沒有風(fēng)格和特點(diǎn)。下面的這個(gè)網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來看看他的顏色搭配。他使用的主色調(diào)是RGB（200，9，0），配以抽象的圖形，文字使用的是RGB（213，229，167）顯得美觀而不失獨(dú)特，大氣而不逼人。如圖7

圖7

8）下面介紹的這種色調(diào)是我們制作網(wǎng)頁的時(shí)候不會經(jīng)常用到的顏色，如果使用到你的網(wǎng)頁中，肯定會給人耳目一新的感覺。他的主色調(diào)為RGB（144，151，97）輔助色調(diào)為RGB（173，168，112）邊飾為黑色RGB（0，0，0）字體為黑色RGB（0，0，0）。這樣的搭配顯得風(fēng)格獨(dú)特，顏色和諧而莊重。如圖8

圖8

9）下面的設(shè)計(jì)更加的簡單化，但是顏色的使用使網(wǎng)頁并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構(gòu)成，分別是RGB（239，200，161）和RGB（201，254，200）。如此簡單，但是卻栩栩如生，躍然網(wǎng)上。如圖9

圖9

10）下面舉出這個(gè)例子是想證明一個(gè)道理——只要你有足夠的想象力，你就能夠設(shè)計(jì)出漂亮的網(wǎng)頁。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁的搭配不要超過四種主要顏色，否則就有雜亂之感。下面的這個(gè)網(wǎng)站遠(yuǎn)遠(yuǎn)的超過了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個(gè)例子的菜單就使用了7種顏色，但是我們看到的網(wǎng)頁并不雜亂，相反感覺作者很有創(chuàng)意。如圖10

圖10

網(wǎng)頁設(shè)計(jì)的顏色搭配需要在實(shí)踐中不斷的摸索和不斷的創(chuàng)新，認(rèn)真學(xué)習(xí)別人的先進(jìn)方法和經(jīng)驗(yàn)，可以快速的提高我們的制作水平�？梢哉f。網(wǎng)頁顏色搭配得當(dāng)，成功也就走了一半。如果大家有什么好的方法，別忘了和別人交流，讓我們共同進(jìn)步！

最后推薦大家一些常用的配色的工具：

 西西整理的合集包 http://www.innovatechautomation.com/soft/53257.html