HTML – 關於色彩

基本上,網頁色彩是透過計算RGB的比例而產生,因此網頁上所看得到的顏色其實都有對應的色碼,這就是我們所說的網頁色碼表。目前大部分的網頁色彩都可以達到256色的精緻度,這256種變化,其實是來自於RGB的排列組合;網頁的色彩,在早期是以#RGB的編碼規則,也就是#3FF的色碼型態,R代表的是紅色光,G代表的是綠色光,B代表的是藍色光,請特別注意,我這裡使用的是色光,而不是色彩。每一種色光都可以有16種變化,因此早期的網頁色彩是16色。後來因為需求增加,因此顏色的變化度也必須要提高,因此就產生了#RRGGBB的色彩編碼,這樣一來,每種色光都可以有16*16,也就是256種變化,也就是我們今天較為常用的網頁256色。

通常來講,色碼的組成若是屬於0、3、6、9、C、F的話,我們就會說這是屬於網頁安全色,也就是說,在各種瀏覽器上都可以正常顯示不至於有太大的問題,例如:#0033CC、#6699FF、#3C3C3C…等;其他不屬於網頁安全色範疇當中的顏色,就必須視每個使用者的瀏覽工具顯示狀況而定,但大體上,以目前的科技配備而言,應不至於有太大問題。

有時,你也可以直接使用Black、White等表意文字直接設定顏色,下面是W3C所列舉出來可以表意的色彩及其對應的色碼:

Black = “#000000” Green = “#008000”
Silver = “#C0C0C0” Lime = “#00FF00”
Gray = “#808080” Olive = “#808000”
White = “#FFFFFF” Yellow = “#FFFF00”
Maroon = “#800000” Navy = “#000080”
Red = “#FF0000” Blue = “#0000FF”
Purple = “#800080” Teal = “#008080”
Fuchsia = “#FF00FF” Aqua = “#00FFFF”

雖然色彩可以有助於閱讀,但是在使用色彩的時候,還是盡量依照以下的規則來使用色彩:

  1. 不要在HTML標籤當中,使用color屬性來設定顏色,應該使用CSS來設定顏色
  2. 不要在表單等需要透過色彩來強調的內容處,使用色盲使用者無法分辨的色彩
  3. 如果有使用背景圖或是背景色,請注意讓文字內容不會受到背景的影響而難以閱讀
  4. 在BODY和FONT標籤,或是在表格當中使用bgcolor指定顏色,在不同的平台上,會產生不同的顯示狀況,所以你不該完全依賴這樣的設定來產生特殊效果。在未來,支援sRGB色彩模組與ICC色彩檔案應該可以有效減輕這樣的問題。
  5. 實際應用時,依循著約定成俗的使用者習慣可以減少使用者的困擾

基本上,網頁設計師不該只把注意力放在色彩以及字元間距,而應該把注意力放在如何讓網頁內容在各種情況以及瀏覽器之下都能夠讓使用者順利閱讀;設計感及藝術感是一種輔助或是為網站加分的工具,但必須是在不影響網站效能、且不影響使用者閱讀的前提之下。僅僅把「看得到」的使用者當成理所當然的網路用戶,是一種非常錯誤而且欠缺深度的作法;或者以後的網頁設計課程,都該讓這些只重排版排出來卻完全不管程式碼怎麼樣亂七八糟的網頁設計師用耳朵聽聽看,自己的網站有多麼鳥。

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s