十六進制數字表示方法
在HTML和CSS中使用3位元組共6個十六進制數字表示一種顏色,每位元組從00到FF,相當十進位數字從0到255,按順序前兩位是紅色的值,中間兩位是綠色的值,最後兩位是藍色的值。
由於網頁是基於計算機瀏覽器開發的媒體,所以顏色以光學顏色RGB(紅、綠、藍)為主。 網頁顏色是以16進制代碼表示,一般以“#”號開頭,後面分別為R、G、B的16位進制數。 FF為最大數,代表十進制255。比如白色是R、G、B三個顏色最大,在網頁代碼便是:#FFFFFF。黑色是三個顏色為0,在網頁代碼便是:#000000。當顏色代碼為#XXYYZZ時,可以用#XYZ表示,如#135與#113355表示同樣的顏色。在CSS中,也可以使用rgb(127,127,127)代替#7F7F7F(十進制表示)。
例如一種顏色在十進位中紅、綠、藍的比例分別是36、104、160(■),在十六進位制中則分別為24、68、A0,所以十六進位制數字表示方法就為:2468A0,如果數字小於16,在十六進位中就會小於10,前面就要加0,如在十進位中分別為0、1、2,在十六進位制數字表示方法中就為:000102,所以可以表示的顏色數總共有:256= 16,777,216 種。
CSS顏色模組第四版引入了#RRGGBBAA和#RGBA的表示方式。
十進制“函式”表示
從CSS2.1開始,提供有rgb(red,green,blue)的十進制顏色代碼。
從CSS3開始,網頁顏色支持RGBA和HSLA顏色表示法:
•rgba(255,0,0,0.5)- 半透明的紅色。
•hsla(120,100%,50%,0.3)- 半透明 (0.3) 的綠色。
這樣的語法提供了使用透明色的可能性。
顏色名稱
在HTML4.01版本中,確定了16種顏色的英語名稱與16進制代碼:
中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 |
黑色 | black | #000000 | 銀色 | silver | #c0c0c0 | 栗色 | maroon | #800000 | 紅色 | red | #ff0000 |
深藍色 | navy | #000080 | 藍色 | blue | #0000ff | 紫色 | purple | #800080 | 品紅色 | fuchsia | #ff00ff |
綠色 | green | #008000 | 萊姆色 | lime | #00ff00 | 橄欖色 | olive | #808000 | 黃色 | yellow | #ffff00 |
墨綠色 | teal | #008080 | 青色 | cyan | #00ffff | 灰色 | gray | #808080 | 白色 | white | #ffffff |
後來加入的名稱如下所列:
CSS 顏色模組版本 | 中文 | 英文 | 代碼&顏色 | 注釋 |
2.1 | 橙色 | orange | #ffa500 | |
3 | 透明 | transparent | #00000000 | 此處的RGBA十六進制值只適用於CSS顏色模組版本4。 |
4 | 麗貝卡紫 | rebeccapurple | #663399 | 用來悼念埃里克·邁耶的女兒。 |
除此之外,CSS3(CSS顏色模組版本3)接納了絕大部分X11顏色(或稱SVG顏色)。
網頁安全顏色
當開發網頁安全顏色(Web-safe colors)調色板時,大部分顯示方式是8比特的,只能顯示256種顏色。要顯示某種硬體預先定義的顏色以外的顏色,要么使用最接近的顏色替代,要么多用一些時間,通過抖動混合顏色顯示。
David Lehn和Hadley Stern發現在更換16位顯示後,只有22種顏色是“真正安全”(really safe)的,可以不會在更換顯示後出現不協調的畸變。
漸變色
CSS3引入了漸變色,分為線性漸變(如linear-gradient(#D1EEFC, #81F3FD);)和圓心漸變(如radial-gradient(#FEFD58, #71FCA6, #52EDC7);)兩種。線性漸變支持方向設定,圓心漸變支持形狀設定。