網路色彩的表示法

當我們在編輯網頁時,若是使用 FrontPage 或是 Dreamweaver 來修改字體的顏色,只要到上面的工具列中點選顏色即可。但是對於撰寫網頁程式的人來說,應該要知道網頁的程式碼是如何來表示顏色的,這樣在做網頁設計的時候,才方便調整顏色。

我們知道顏色有所謂的「色彩三源色」以及「色光三源色」,印刷時所使用的顏料CMYB(Cyan洋藍, Magenta洋紅, Yellow洋黃, Black黑色)就是色彩三源色加上黑色(用三源色混成黑色成本太高,所以黑色獨立出來以降低成本),而電腦則是使用RGB(Red紅色, Green綠色, Blue藍色)色光三源色來混成顏色。有了這個基本常識之後,接下來我們來看看在網頁中該如何表示顏色。

1. 英文色名

第一種方法是直接輸入顏色的英文名稱,除了上面提到的幾個英文字外,像White(白色)Gray(灰色)Purple(紫色)等等也都是很常見的名字。這種方法的優點是很直覺,缺點是變化比較少,而且英文不是我們的母語,懂的單字可能不是很多。

2. 16進位表示法

第二種方法是最常見的16進位表示法,它將紅、綠、藍用00~FF的16進位數值來表示,以10進位來說就是0~255的數值。每個顏色都固定有二位數的16進位數值,所以它的表示方法為「#RRGGBB」。「#」是固定的,前二位代表紅色,中間二位代表綠色,最後二位代表藍色,以這樣的數值來進行調色。

大家可能不太熟悉16進位,所以在此說明一下。我們可以看到下面的表格就是16進位與10進位的對照表,也就是當你看到16進位的 E 時,表示10進位的14,依此類推。

10進位 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
16進位 1 2 3 4 5 6 7 8 9 A B C D E F

通常在繪圖軟體中,它們也都會提供16進位的顏色碼,所以看到這裡不用擔心自己看不懂,反正在軟體裡直接用選的就可以了。但是當我們了解這些色碼的意義後,如果有一天你突然看到一個色碼,至少你大概可以猜出它是什麼顏色。

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

3. 10進位表示法

看到上面一堆16進位的數值之後,是否有讓你感到退縮呢?如果不習慣16進位也沒關係,因為近年來已經增加了10進位表示法,主要用於CSS顏色表示。10進位表示法是用0~255來表示一個顏色的數值,它的表示方式為「rgb(紅色, 綠色, 藍色)」。我們可以直接看下面的顏色參考表。

Black Olive Purple Teal
rgb(0, 0, 0) rgb(128, 128, 0) rgb(128, 0, 128) rgb(0, 128, 128)
Gray Maroon Green Navy
rgb(128, 128, 128) rgb(128, 0, 0) rgb(0, 128, 0) rgb(0, 0, 128)
Silver Yellow Fuchsia Aqua
rgb(192, 192, 192) rgb(255, 255, 0) rgb(255, 0, 255) rgb(0, 255, 255)
White Red Lime Blue
rgb(255, 255, 255) rgb(255, 0, 0) rgb(0, 255, 0) rgb(0, 0, 255)

4. 百分比表示法 (2010.12.19新增)

百分比表示法和10進位表示法差不多,只是將中間的數值換成0%-100%,變成用濃度的方式來表示。

網頁安全色

當你在設計網站時,必需要了解一件事情:每個人的螢幕都是不同的,因此每台電腦所顯示的顏色都會不太一樣。有在拍照的人就會知道,數位相機上看的照片總是比電腦上看漂亮許多,這是一樣的道理。然而在網頁這麼多種顏色中,有某些顏色是不會有色差的,就是所謂的網頁安全色。網頁安全色有那些呢?只要RGB三個數值是由 00、33、66、99、CC、FF 所組成的,就是網頁安全色了。

#000000 #999900 #990099 #009999
#999999 #990000 #009900 #000099
#CCCCCC #FFFF00 #FF00FF #00FFFF
#FFFFFF #FF0000 #00FF00 #0000FF