網頁配色方法探討

平麵教程：網頁配色方法探討

教程思路

1.合理安排網站顏色

2.學習網頁製作的一些關於顏色方麵的參考
3.幾種典型配色方案

4.在線配色器

5.培養網頁設計色感

一.合理安排網站顏色
        很多網站設計者忽視了網站顏色的重要性，其實顏色應該成為網站設計需要考慮的首要因素。如果沒有認真考慮顏色設計，網站會很沒有特色，並且可能會很混亂，讓用戶感到厭煩。網站顏色一定要精心挑選。
        然而，很多瀏覽器隻能呈現256種顏色，並且不同的瀏覽器，呈現出的256種顏色也不同，通常這些瀏覽器隻能共享216種顏色。設計網站重要內容時，應該運用這216種顏色。

        如果利用瀏覽器中不存在的顏色（此216種顏色以外的顏色），瀏覽器會混合這些顏色，這些顏色會出現小圓點，瀏覽器會顯示出一種與其相近的顏色，這種現象稱為抖動。一些顯示器會扭曲這些圓點，圖片就會失真。如果出現這種情況，文章就會難以閱讀，所以利用純色作為設計元素時，使用瀏覽器安全色（216種顏色）。有時，即使是網絡安全色，也要謹慎利用。

        眼睛使用時間太長，容易產生視覺疲勞。眼睛後方，存在一種包含數百萬感光神經細胞的薄層組織，我們稱之為杆狀細胞、圓錐細胞。圓錐細胞可以對特殊波長的光產生反應，當觀看紅盒子時，眼睛容易產生疲勞感，這時，與其相對的圓錐細胞就會出現，因此會看到藍綠光。這個原理可以應用於網站設計中。

        警告標誌通常為黃色的，因為黃色光首先進入視線，所以瀏覽者會首先關注黃色。利用這種顏色設計的廣告，會吸引用戶的注意，但是，建議不要過多使用此種顏色。訪問者登錄後，網站沒有必要采用明亮的顏色，否則用戶會產生反感。如果訪問者已經在瀏覽網站，這就證明設計很成功。
        網站中避免出現太多的黃色、紅色內容，這些顏色應該隻出現在需要用戶關注的內容中，否則用戶會感到視覺疲勞，他們就不會長時間瀏覽網站。顏色不應該成為訪問者離開網站的原因。

二.顏色參考
        在HTML裏，顏色有兩種表示方式。一種是用顏色名稱表示，比如blue表示藍色。另外一種是用16進製的數值表示RGB的顏色值。RGB是Red，Green，Blue意思，RGB每個原色的最小值是0，最大值是255，如果換算成16進製表示，就是(#00)，(#FF)。比如白色的RGB(255,255,255)，就用#FFFFFF表示；還有黑色的RGB(0,0,0)，就用#000000表示。
注：在W3C製定的HTML 4.0標準中，隻有16種顏色可以用顏色名稱表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)，其它的顏色都要用16進製RGB顏色值表示。

        當然，現在的瀏覽器支持更多的顏色名稱。不過為保險起見，建議還是采用16進製RGB顏色值來表示顏色。並且在值前加上#這個符號。
為了方便大家找到合適的顏色，我們在這裏列了一些顏色說明，以供大家參考，不妨作為一種速查工具。

1. Web安全顏色
        以前，很多電腦顯示器最多支持256色，因此出現了216種Web安全顏色，以保證網頁的顏色能夠正確顯示。
        那為什麼不是256種Web安全顏色呢？因為Microsoft和Mac操作係統有40種不同的係統保留顏色。
        以下為216種Web安全顏色：

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

三.幾種典型配色方案
        這裏以韓國網站為例來說明。韓國網站的配色多以藍色、桔黃色為多，原因是這2個顏色的組合最為豐富。

四.在線配色器
        在web站點設計中，對網頁進行配色通常是設計師的直覺感受或者多次反複實驗：例如對網頁顏色主色彩的選擇，考慮各種顏色的色調、飽和度，等等...，最終才能達到比較好的配色效果。
        現在，網絡上有一些專用於配色設計的調色板工具，對網頁配色設計都很有價值。
使用方法的簡要說明如下：
1. 選擇基色
        在配色前，在左側的調色板中先選擇一個基色（Base color），選擇基色也很有講究，調色版為我們劃分了暖色(warm)和冷色(cold)兩種色調，並依此進行了更精確的數值區分（直接對基色微調按鈕進行操作）。

2. 選擇配色方案
        在Scheme的選擇菜單中可以選擇多種方案進行配色，具體有：單色配色、對比色配色（基色加補色）、可調整的對比色配色（可以調整Distance參數對補色進行微調）、雙對比色（兩個比較接近的顏色及它們所對應的補色）、類似色（基色和它相接近的顏色）。
a. 單色配色方案(monochromatic)：如果整個網頁配色由一些單一顏色漸變組成，這個方案是不錯的選擇。
b. 對比色配色（contrast）:原理是為基色增加與其色差比較大的幾種對比色。如果整個網頁的色彩反差比較大，並且形成反差的顏色數量不是很多，推薦用這種方案。
c. 可調整的對比色配色（soft contrast）：參照b方案，可以進一步調整各對比色與基色的色差，方法是調節Distance參數。
d. 雙對比色（double contrast）：兩個比較接近的顏色及它們所對應的對比色（4個一組），為基色增加一個相近顏色，同時調節出這兩種顏色的對比色，如果將Distance調節至0，將隻看到2個一組的對比色，隨著Distance的增加，會逐漸顯現4個一組 － 兩對對比色。
e. 類似色（analogic)：與基色比較接近的各種顏色，推薦色彩比較柔和、反差不明顯的網頁使用。
3.自定義基色的色調（Hue）、飽和度(Saturation)、亮度(Brightness)
對這些選項進行微調後，所配置的方案顏色會起到相應變化。
4.在最底部的select選擇器中，可以特別地為色盲設計的相應的配色方案。

五.培養網頁設計色感

        許多網站做不好，原因是在配色問題上，假如自己的繪圖藝術能力不高，要突破的是在顏色和內容的運用上,至少看起來要專業一些，工整一些，務實一些。做站的第一步，通常是要先確定所要運用的顏色。怎麼去確定，做自己的個站一般設計者會依心情來頂，用顏色去表達心情，當然，這是在積累了一定經驗以後的，大膽想象和運用自己所確定的顏色。確定好顏色，再者就是繪製界麵。
        下麵介紹一些培養網頁設計色感的方法：
1.多看網站