網站配色方案實例顏色的利用在網頁制作中起著超級關鍵的作用，有很多網站以其成功的色彩搭配令人過目成誦?？墒菍τ趧傞_始學習制作網頁的人來講，往往不容易駕馭好網頁的顏色搭配。除學習各類色彩理論和方式之外筆者以為多學習一些著名網站的用色方式，對于咱們制作美麗的網頁能夠起到事半功倍的作用。所以，筆者總結了一些著名網站的顏色搭配方式，這些方式能夠讓咱們的學習少走彎路，快速提高咱們的網頁制作水平。一、網頁顏色原理和象征意義咱們所有網頁上顏色，在HTML下看到的是以顏色英文單詞或十六進制的表示方式（如#000000表示為黑色）。不同的顏色有著不同的含義，給人各類豐碩的感覺和聯想。紅色：熱情、奔放、喜悅、莊重黃色：高貴、富有、燦爛、活潑黑色：嚴肅、夜晚、沉著白色：純潔、簡單、干凈藍色：天空、清爽、科技綠色：植物、生命、生機灰色：莊重、沉穩紫色：浪漫、富貴棕色：大地、厚樸二、網頁顏色的利用風格不同的網站有著自己不同的風格，也有著自己不同的顏色。網站利用顏色可能分為幾種類型：一、公司色在此刻企業中，公司的CI形象顯得尤其重要，每一個公司的CI設計必然要有標準的顏色。比如新浪網的主色調是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告利用的顏色都和網站的顏色一致。再比如國富投資公司的主色調是C：100%,M：60%,Y：0%,K：0%。如此的顏色利用到網站上顯得色調自然、底蘊深厚。二、 風格色許多網站利用顏色秉承的是公司的風格。比如海爾利用的顏色是一種中性的綠色,即充滿朝氣有不失自己的創新精神。女性網站利用粉紅色的較多，大公司利用藍色的較多……這些都是在突出自己的風格。3、適應色這些網站的顏色利用專門大一部份是憑自己的個人愛好,以個人網站較多利用,比如自己喜歡紅色、紫色、黑色等,在做網站的時候就偏向于這種顏色。每一個人都有自己喜歡的顏色,因此這種類型稱為適應色。三、 設計用色十例以下我將別離介紹十個配色較好的網站,大家能夠學習和借鑒一下,培育對色彩的敏感和獨到的審美能力。1）這是個大型的NBA網站。通常咱們常?？吹降拇祟惥W站以白色為背景,可是那個網站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用RGB表示），文章題目用色為RGB為（203，201，153/#CCCC99），菜單利用的RGB為（112，119，112/#707770）。如此的配色能夠顯示獨特的個性，又不失大型網站的風度。如圖1圖12）下面是一個娛樂類的綜合性網站UG0,他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82），字體白色RGB（255,255,255），菜單為RGB（77,114,159）。如此的雖以黑藍為主色調，可是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。如圖2。圖2

下面的那個網站是赫赫出名的微軟公司網站，微軟不僅軟件做的好，連網頁制作也是世界一流。他的每一個網頁都是制作的樣板。從網頁咱們就可以夠看出微軟公司的風格、作風，和雄厚的實力。背景顏色利用藍色RGB為(0,151,254)，菜單為黑色RGB(0,0,11)，菜單為灰色RGB(200,200,200),字體為黑色RGB(0,0,0),如圖3。iWTHm一 not..iWTHm一 not..UIVaiKL5*rm呻WIJfr審圖3此刻介紹的網站相對簡單，可是她的用色也別具匠心，此刻咱們來看一看，整體上利用的是白色RGB(255,255,255)，輔助色為RGB(79,88,95)，菜單色為RGB(48,64,64)和RGB(0,81,111)字體利用的是RGB(83,86,91)。雖然簡單，但顏色搭配超級的科學合理。如圖4圖4下面的網站采用黃色調為主,很表現公司的個性,此刻咱們就來看一看她的顏色搭配。主色調為黃色RGB為(255,199,48/#FFC730)，輔助色調為RGB(49,102,46)字體為棕色RGB(153,103,0),中間再配以抽象的圖片,顯得個性十足但又不單調。如圖5圖5橘紅色若是運用適當的話是一種超級利用于網頁上的顏色。下面的那個網站就是一個超級著名的例子。他的主色調為RGB(255,151,0)輔助色調為RGB(255,103,4),菜單RGB為(252,200,0)。字體利用黑色RGB為(0,0,0)。此種配色顯得主人較為前衛，色彩烈火，給人的震懾力較強。如圖6

圖6鮮紅色也是一種震撼感很強的顏色，若是搭配不妥，也可能使網站沒有風格和特點。下面的那個網站就是利用紅色比較好的網站。咱們來看看他的顏色搭配。他利用的主色調是RGB(200,9,0),配以抽象的圖形，文字利用的是RGB(213,229,167)顯得美觀而不失獨特，大氣而不逼人。如圖7圖7下面介紹的這種色調是咱們制作網頁的時候不會經常常利用到的顏色,若是利用到你的網頁中,肯定會給人線人一新的感覺。他的主色調為RGB(144,151,97)輔助色調為RGB(173,168,112)邊飾為黑色RGB(0,0,0)字體為黑色RGB(0,0,0)。如此的搭配顯得風格獨特，顏色和諧而莊重。如圖8圖8下面的設計加倍的簡單化,可是顏色的利用使網頁并非呆板,反而讓人感覺到一股濃濃的生活和家庭氣氛，令人置身于美麗和愛中。他的主體是由兩種顏色組成，別離是RGB(239,200,161)和RGB(201,254,200)。如此簡單,可是卻栩栩如生,躍然網上。如圖9

圖910）下面舉出那個例子是想證明一個道理——只要你有足夠的想象力，你就可以夠設計出漂亮的網頁。目前在網上超級流行一句話就是網頁的搭配不要超過四種主要顏色，不然就有雜亂之感。下面的那個網站遠遠的超過了三種顏色，可是她并非失美麗。因此重要的仍是色彩的駕馭能力。下面那個例子的菜單就利用了7種顏色，可是咱們看到的網頁并非雜亂，相反感覺作者很有創意。如圖10）下面舉出那個例子是想證明一個道理——只要你有足夠的想象力，你就可以夠設計出漂亮的網頁。目前在網上超級流行一句話就是網頁的搭配不要超過四種主要顏色，不然就有雜亂之感。下面的那個網站遠遠的超過了三種顏色，可是她并非失美麗。因此重要的仍是色彩的駕馭能力。下面那個例子的菜單就利用了7種顏色，可是咱們看到的網頁并非雜亂，相反感覺作者很有創意。如圖10if翩站設計圖10網站設計中配色方案的利用不論你做什么樣的設計，色彩都是一個不容輕忽的問題。色彩以一種“隱蔽”的方式轉達的各類信息，這些信息會影響觀看者的心理和感受，左右他們的判斷和選擇，色彩對于設計而言實在過重要。這篇文章就要比較系統地介紹一些在網頁設計中如何利用色彩的入門知識。色彩是設計者的得力助手，前提是應用適當。對于網站設計而言，色彩的重要性尤其突出，不過常常被粗心的站長輕忽。咱們常常說“第一映像最重要”，于是設計網站時，設計者常常會花很多精力制作一個“富于沖擊力”的LOG0或BANNER,固然，它們很重要。可是，訪問者訪問網站時的第一映像實際上并非來自這些LOGO或BANNER，而是——色彩！好了，在了解了色彩對于網站設計的重要性以后，咱們開始探訪色彩的奧秘。色彩入門第一讓咱們熟悉一下色彩的一些大體概念。三原色一切顏色都來自三原色：紅、黃、藍。

在那個圓環中，相鄰的兩個原色相混合能夠取得另外三個比較重要的顏色（下文將其稱為二級原色）：紅+黃=橙，紅+藍=紫，藍+黃=綠廠貝百呎和隕豈羽口廠貝百呎和隕豈羽口讓咱們再深切一步，三原色和三種二級原色能夠進一步混合取得更多的顏色，別離是橙紅色、紫紅色、藍紫色、藍綠色、橘黃色和黃綠色。這六種顏色能夠稱為三級原色。橘黃橘黃依照一樣的方式不斷進行下去，那個圓環中顏色之間的分隔線就會消失，取得下圖所示的“色彩圓環”，在一些畫圖程序的調色板中咱們能夠看到如此的色彩圓環。的“色彩圓環”，在一些畫圖程序的調色板中咱們能夠看到如此的色彩圓環?？墒悄莻€圓環仍然沒有涵蓋所有的顏色，對于圓環中的每一種顏色還有飽和度、亮度和灰度等的轉變。也就是說，將上述圓環中的任意一種顏色和黑色、白色、灰色依照不同比例混合就可以夠取得更多的顏色，下面將詳細介紹。常用的色彩術語飽和度某種顏色的飽和度是指這種顏色所包括的大體顏色的多少。例如RGB值為（0，0，255）的藍色是純藍色，他的飽和度是100%。隨著飽和度的降低，顏色會愈來愈接近灰色。□□3sa?」」加上門□□3sa?」」加上門OK2O&40&60S80%100?□□阜0%30%40K60%809.100K灰度大體色彩和黑色進行不同程度的混合能夠取得不同的灰度，例如OK20K40%OK20K40%604t304t100%亮度大體顏色和白色進行不同程度的混合能夠取得不同的亮度，例如：:0%30%40%604tSOK100%色調大體顏色和灰色進行不同程度的混合能夠取得不同的色調，例如色彩方案的種類不同網站應當利用不同的色彩方案，與站點的主題相吻合的色彩方案決不單單能夠讓網站“加倍好看”，更重要的是在訪問者心目中成立對那個網站的感性熟悉。所以，色彩方案的選擇決不能輕率，而且色彩方案絕對是網站建設的第一個步驟。若是選擇色彩方案時過于輕率，乃至根本不對網站進行色彩方案的整體計劃，你將不可能制作出一個真正優秀的網站。例如，一個銷售嬰兒用品的網站應當利用比較活潑的色彩方案，而一個藝術網站則應當利用比較執重的方案。依照色彩方案中色彩利用方式的不同，咱們能夠將色彩方案劃分成多種類型，單色方案、相似色方案、補色方案和三合一色方案。單色方案單色方案是指在網站設計中終止利用一種大體顏色，為避免單調，咱們能夠通過調整這種大體顏色的灰度和亮度來取得更多的顏色，由于整個顏色方案中事實上只有一種基色，因此這種方案稱為單色方案。例如：

逍掛甫*削:廠貝百呎曲預邑逍掛甫*削:廠貝百呎曲預邑在Photoshop的色彩選擇窗口中，咱們能夠如此進行成立單色方案。第一調整H（也就是Hue的縮寫）后面的值來調整色調。注意，H的單位是度，也就是大體顏色在顏色環上所處位置的角度。設置好H的值以后，再調整B后面的數字調整亮度和S后面的數字調整飽和度。注意,其中B和S的單位是百分比，也就是向大體顏色中添加白色和黑色的百分比。如此就可以夠取得一個單色方案了。下面來看兩個利用單色方案的成功實例。單色方案實例之一：這是一個女性網站，因此其大體顏色為粉紅色，并通過調整粉紅色的飽和度取得了其余幾種顏色。整體顏色趨于淡雅，訪問者的注意力會很自然地被吸引到幾幅展示其產品的圖片上。單色方案實例之二：那個色彩方案利用的基色顏色較深，并通過修改其亮度取得其他兩種顏色，并用最淺的顏色作為主體部份的背景，使其突出出來?？偟膩碇v，單色方案是一種比較穩重的方案，或說比較保守的方案。單色方案給人整潔、經典的感覺，最適合于內容比較嚴肅的網站，比如政府網站，學術網站，企業網站，高雅藝術網站。特別值得一提的是，商業網站也比較適合利用此種顏色方案，因為這種方案能夠給人一種穩固感，使訪問者容易成立對網站的信賴感。固然，這種方案也有其靈活的一面，當利用較淺的基色時，這種顏色方案也能夠用于時尚類網站，轉達簡約清雅的觀念。相似色方案在色彩圓環上選擇彼此相鄰的幾種顏色組成的配色方案就是相似色方案。例如橙色、橙紅色和橙黃色就可以夠組成一個相似色方案。由于相似色方案中包括了多種基色，若是再加上亮度和飽和度的轉變，能夠組成的顏色就超級多?！酢鮯snn■KQS□II■■區圍□口面是相似色方案的實例。bWJM4l^IIWmWW咋-mbwj+Vi俱rvrw-'ifrlasiwiwMiiiBUIUEVF-miminainnbWJM4l^IIWmWW咋-mbwj+Vi俱rvrw-'ifrlasiwiwMiiiBUIUEVF-miminainnmOHtAJH :倍前w"r err?gJTHlitiMfiAWM1■Mo?■■拔HUr>邛松as?t_J力盤ijn_r?u de」l d」丹JU J■■tiEUHhi*亦當枕■禮心芹cjEk 百—^a-O—￡>.”巒：?卜*5 耳■exnx“h"1驢曲千寸■--isa曲瞬Hirevhskhititsim相似色方案實例一：那個網站利用了由橙黃色、