網頁顏色
![](http://images.weserv.nl/?url=//upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Web_Color_Charts.svg/220px-Web_Color_Charts.svg.png)
HTML |
---|
比較 |
網頁顏色是在萬維網上顯示網頁時使用的顏色,可以用三種方法表示:RGB、十六進制格式或者在一些情況下根據其常見的英文名稱。十六進制的顏色通常是以井號(#)開頭的[1][2]。顏色是根據其紅色、綠色和藍色成分的強度指定的,每一成分呈現為八個比特。這樣,在sRGB色域內,指定一個網頁顏色共有24比特,共有16777216種顏色可以表示。一些網頁顏色可能還有透明度,默認情況下顏色是完全不透明的,即不透明度為1。
在CSS中,不在sRGB色域內的顏色也可以表示,其紅色、綠色和藍色成分可能是負數或者超過100%,這樣的顏色空間在理論上是沒有邊界的[3]。指定非RGB的顏色需要在CSS中調用rgb()
函數,無法使用十六進制語法表示。
網頁顏色有明確的色度定義,sRGB[4],選擇這個是因為它與現實的計算機顯示器和視覺條件相似,以儘可能渲染出與指定值相似的顏色而不需要進行特定的顏色管理,但一些高級的用戶代理會需要顏色管理以提供更廣的色域。
十六進制數字表示法
RGB顏色可以使用以井號開頭的六位(或八位)十六進制數字(0-F)表示,相當於三個或者四個字節,每個字節相當於十進制數的0至255。三個字節分別表示紅色、綠色和藍色,第四個字節是可選的,表示Alpha通道。
例如,白色的十產主進制表示方法是#ffffff
,表示其紅、綠、藍三種成分的值均為最大值255,相當於rgb(255 255 255)
。又如,一種顏色在十進位中紅、綠、藍的成分分別是36、104、160( ),在十六進制中則相當於24、68、A0因此這個顏色的表示方法為#2468A0
[5]。
部分六位或八位的十六進制顏色可以簡寫為三位或者四位[6],部分軟件可能並不支持簡寫形式的顏色。例如,#09c
相當於簡化的#0099cc
,#09c8
相當於簡化的#0099cc88
。簡寫的顏色形式可以表示4096種顏色(不考慮alpha通道)。
CSS函數表示法
在CSS中,顏色可以使用函數來表示。在CSS顏色模型3中,函數有兩種表示方法:rgb()
和hsl
,這兩個函數也可以寫為rgba()
和hsla()
。
rgb顏色是由紅(英語:red)、綠(英語:green)、藍(英語:blue)三個成分以及一個可選的alpha通道指定的,其語法為:
rgb(red green blue)
或rgb(red, green, blue)
(沒有alpha通道)rgb(red green blue / alpha)
或rgb(red, green, blue, alpha)
(有alpha通道)
例如,rgb(255 0 0)
和rgb(100% 0% 0%)
可以表示紅色( ),而rgb(255 0 0 / 50%)
和rgb(100% 0% 0% / 50%)
則表示半透明的紅色( )。
hsl顏色是由色相(英語:hue)、飽和度(英語:saturation)和明度(英語:lightness)表示的,其語法為:
hsl(hue saturation lightness)
或hsl(hue, saturation, lightness)
(沒有alpha通道)hsl(hue saturation lightness / alpha)
或hsl(hue, saturation, lightness, alpha)
(有alpha通道)
例如,hsl(120 100% 50%)
表示綠色( ),hsl(120 100% 50% / 60%)
則表示不透明度僅為40%的綠色( )。
CSS顏色模型4中還引入了一些依賴於設備的函數:
lab(lightness a b)
:在直角坐標模式下的CIELAB色彩空間中的顏色lch(lightness chromaticity hue)
:在極坐標模式下的CIELAB色彩空間中的顏色oklab(lightness a b)
和lch(lightness chromaticity hue)
:在CIELAB顏色基礎上進行了改進的顏色表示,以更好地擬合視覺效果xyz()
color()
:自定義色彩空間函數
上述函數表示方式均允許添加/ alpha
以指定alpha值。
顏色名稱
![](http://images.weserv.nl/?url=//upload.wikimedia.org/wikipedia/commons/thumb/2/2b/SVG_Recognized_color_keyword_names.svg/220px-SVG_Recognized_color_keyword_names.svg.png)
顏色名稱是指通過顏色的英文名稱定義的顏色。在W3C標準中,顏色名稱分為基本顏色和擴展顏色[7]。除了transparent
之外,所有的顏色都是完全不透明的。
中文名 | 英文名 | 對應十六進制值 |
---|---|---|
黑色 | black | #000000 |
銀色 | silver | #c0c0c0 |
栗色 | maroon | #800000 |
紅色 | red | #ff0000 |
藏青色 | navy | #000080 |
藍色 | blue | #0000ff |
紫色 | purple | #800080 |
品紅色 / 洋紅色 | fuchsia / magenta | #ff00ff |
綠色 | green | #008000 |
鮮綠色 / 萊姆色 / 青檸色 | lime | #00ff00 |
橄欖綠 | olive | #808000 |
黃色 | yellow | #ffff00 |
藍綠色 | teal | #008080 |
青色或水色 | cyan / aqua | #00ffff |
灰色 | gray | #808080 |
白色 | white | #ffffff |
在後來的CSS版本中,加入了橙色和透明色。
CSS顏色模塊版本 | 中文 | 英文 | 代碼、顏色 | 注釋 |
---|---|---|---|---|
2.1 | 橙色 | orange | #ffa500 | |
3 | 透明 | transparent | #00000000 | |
4 | 麗碧卡紫 | rebeccapurple | #663399 | 用來悼念埃里克·邁耶的女兒。[8] |
除此之外,CSS3(CSS顏色模塊版本3)接納絕大部分X11顏色(或稱SVG色)。
擴展顏色
![](http://images.weserv.nl/?url=//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/SVG1.1_Color_Swatch.svg/220px-SVG1.1_Color_Swatch.svg.png)
HTML 4.01、CSS 2.0、SVG 1.0和CSS 3加入了擴展顏色,有些顏色是由網頁瀏覽器定義的。部分瀏覽器可能不支持所有的顏色顏色,但是在2005年,大多數瀏覽器已完成全面支持。其中這些顏色很多都是來自X11顏色名稱。
下面的表格列舉出了CSS3規範中的所有X11顏色,以及其對應的十六進制值。這個列表中包含了一些常見的同義詞,如aqua和cyan(均表示青色)、fuchsia和magenta(均表示品紅色)、gray和grey(均表示灰色)[9][10]。
名稱 | 十六進制 | 十進制 |
---|---|---|
Red 純紅 | FF 00 00 | 255 0 0 |
LightSalmon 淺鮭魚色 | FF A0 7A | 255 160 122 |
Salmon 鮭魚色 | FA 80 72 | 250 128 114 |
DarkSalmon 深鮭魚色 | E9 96 7A | 233 150 122 |
LightCoral 淡珊瑚色 | F0 80 80 | 240 128 128 |
IndianRed 印度紅 | CD 5C 5C | 205 92 92 |
Crimson 猩紅 | DC 14 3C | 220 20 60 |
FireBrick 火磚色 | B2 22 22 | 178 34 34 |
DarkRed 深紅 | 8B 00 00 | 139 0 0 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Pink 粉紅 | FF C0 CB | 255 192 203 |
LightPink 淺粉 | FF B6 C1 | 255 182 193 |
HotPink 熱情粉紅 | FF 69 B4 | 255 105 180 |
DeepPink 深粉 | FF 14 93 | 255 20 147 |
PaleVioletRed 蒼紫羅蘭紅 | DB 70 93 | 219 112 147 |
MediumVioletRed 中紫羅蘭紅 | C7 15 85 | 199 21 133 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Orange 橙色 | FF A5 00 | 255 165 0 |
DarkOrange 深橙 | FF 8C 00 | 255 140 0 |
Coral 珊瑚色 | FF 7F 50 | 255 127 80 |
Tomato 番茄色 | FF 63 47 | 255 99 71 |
OrangeRed 橙紅 | FF 45 00 | 255 69 0 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Yellow 純黃 | FF FF 00 | 255 255 0 |
LightYellow 淺黃 | FF FF E0 | 255 255 224 |
LemonChiffon 檸檬薄紗 | FF FA CD | 255 250 205 |
LightGoldenrodYellow 淺秋麒麟黃 | FA FA D2 | 250 250 210 |
PapayaWhip 番木瓜色 | FF EF D5 | 255 239 213 |
Moccasin 鹿皮鞋色 | FF E4 B5 | 255 228 181 |
PeachPuff 桃色 | FF DA B9 | 255 218 185 |
PaleGoldenrod 灰秋麒麟色 | EE E8 AA | 238 232 170 |
Khaki 卡其布色 | F0 E6 8C | 240 230 140 |
DarkKhaki 深卡其布色 | BD B7 6B | 189 183 107 |
Gold 金色 | FF D7 00 | 255 215 0 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Patriarch Purple 宗主教紫 | 80 00 80 | 128 0 128 |
Lavender 淡薰衣草紫 | E6 E6 FA | 230 230 250 |
Thistle 薊色 | D8 BF D8 | 216 191 216 |
Plum 李子色 | DD A0 DD | 221 160 221 |
Violet 紫羅蘭色 | EE 82 EE | 238 130 238 |
Orchid 蘭花紫 | DA 70 D6 | 218 112 214 |
Fuchsia 品紅色 | FF 00 FF | 255 0 255 |
Magenta 洋紅色 | FF 00 FF | 255 0 255 |
MediumOrchid 中蘭花紫 | BA 55 D3 | 186 85 211 |
MediumPurple 中紫 | 93 70 DB | 147 112 219 |
Amethyst 紫水晶色 | 99 66 CC | 153 102 204 |
BlueViolet 深紫羅蘭藍 | 8A 2B E2 | 138 43 226 |
DarkViolet 深紫羅蘭色 | 94 00 D3 | 148 0 211 |
DarkOrchid 深蘭花紫 | 99 32 CC | 153 50 204 |
DarkMagenta 深洋紅 | 8B 00 8B | 139 0 139 |
MediumSlateBlue 中板岩暗藍灰 | 7B 68 EE | 123 104 238 |
SlateBlue 板岩暗藍灰 | 6A 5A CD | 106 90 205 |
DarkSlateBlue 深岩暗藍灰 | 48 3D 8B | 72 61 139 |
Indigo 靛青 | 4B 00 82 | 75 0 130 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Green 純綠 | 00 80 00 | 0 128 0 |
PaleGreen 蒼綠 | 98 FB 98 | 152 251 152 |
LightGreen 淡綠 | 90 EE 90 | 144 238 144 |
YellowGreen 黃綠 | 9A CD 32 | 154 205 50 |
GreenYellow 綠黃 | AD FF 2F | 173 255 47 |
Chartreuse 查特酒綠 | 7F FF 00 | 127 255 0 |
LawnGreen 草坪綠 | 7C FC 00 | 124 252 0 |
Lime 鮮綠色、萊姆色、青檸色 | 00 FF 00 | 0 255 0 |
LimeGreen 萊姆綠、青檸綠 | 32 CD 32 | 50 205 50 |
MediumSpringGreen 中春綠 | 00 FA 9A | 0 250 154 |
SpringGreen 春綠 | 00 FF 7F | 0 255 127 |
MediumAquamarine 中碧藍 | 66 CD AA | 102 205 170 |
Aquamarine 碧藍 | 7F FF D4 | 127 255 212 |
LightSeaGreen 淺海洋綠 | 20 B2 AA | 32 178 170 |
MediumSeaGreen 中海洋綠 | 3C B3 71 | 60 179 113 |
SeaGreen 海洋綠 | 2E 8B 57 | 46 139 87 |
DarkSeaGreen 深海洋綠 | 8F BC 8F | 143 188 143 |
ForestGreen 森林綠 | 22 8B 22 | 34 139 34 |
DarkGreen 深綠色 | 00 66 00 | 0 102 0 |
OliveDrab 橄欖土褐 | 6B 8E 23 | 107 142 35 |
Olive 橄欖色 | 80 80 00 | 128 128 0 |
DarkOliveGreen 深橄欖綠 | 55 6B 2F | 85 107 47 |
Teal 藍綠色 | 00 80 80 | 0 128 128 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Blue 純藍 | 00 00 FF | 0 0 255 |
LightBlue 淡藍 | AD D8 E6 | 173 216 230 |
PowderBlue 粉藍 | B0 E0 E6 | 176 224 230 |
PaleTurquoise 蒼綠松石色 | AF EE EE | 175 238 238 |
MediumTurquoise 中綠松石色 | 48 D1 CC | 72 209 204 |
Turquoise 綠松石色 | 40 E0 D0 | 64 224 208 |
DarkTurquoise 深綠松石色 | 00 CE D1 | 0 206 209 |
LightCyan/LightAqua 淺青色/淺水色 | E0 FF FF | 224 255 255 |
Cyan 青色 | 00 FF FF | 0 255 255 |
Aqua 水色 | 00 FF FF | 0 255 255 |
DarkCyan 深青 | 00 8B 8B | 0 139 139 |
CadetBlue 學員藍 | 5F 9E A0 | 95 158 160 |
LightSteelBlue 淡鋼藍 | B0 C4 DE | 176 196 222 |
SteelBlue 鋼藍 | 46 82 B4 | 70 130 180 |
LightSkyBlue 淡天藍 | 87 CE FA | 135 206 250 |
SkyBlue 天藍 | 87 CE EB | 135 206 235 |
DeepSkyBlue 深天藍 | 00 BF FF | 0 191 255 |
DodgerBlue 道奇藍 | 1E 90 FF | 30 144 255 |
CornflowerBlue 矢車菊藍 | 64 95 ED | 100 149 237 |
RoyalBlue 寶藍 | 41 69 E1 | 65 105 225 |
MediumBlue 中藍 | 00 00 CD | 0 0 205 |
DarkBlue 深藍 | 00 00 8B | 0 0 139 |
Navy 海軍藍 | 00 00 80 | 0 0 128 |
MidnightBlue 午夜藍 | 19 19 70 | 25 25 112 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Brown 純褐 | A5 2A 2A | 165 42 42 |
Cornsilk 玉米絲色 | FF F8 DC | 255 248 220 |
BlanchedAlmond 白杏仁色 | FF EB CD | 255 235 205 |
Bisque 濃湯色 | FF E4 C4 | 255 228 196 |
NavajoWhite 納瓦霍白 | FF DE AD | 255 222 173 |
Wheat 小麥色 | F5 DE B3 | 245 222 179 |
BurlyWood 硬木色 | DE B8 87 | 222 184 135 |
Tan 棕褐 | D2 B4 8C | 210 180 140 |
RosyBrown 玫瑰金 | BC 8F 8F | 188 143 143 |
SandyBrown 沙褐 | F4 A4 60 | 244 164 96 |
Goldenrod 金菊色 | DA A5 20 | 218 165 32 |
DarkGoldenrod 深金菊色 | B8 86 0B | 184 134 11 |
Peru 秘魯色 | CD 85 3F | 205 133 63 |
Chocolate 巧克力色 | D2 69 1E | 210 105 30 |
SaddleBrown 鞍褐色 | 8B 45 13 | 139 69 19 |
Sienna 赭黃 | A0 52 2D | 160 82 45 |
Maroon 栗色 | 80 00 00 | 128 0 0 |
名稱 | 十六進制 | 十進制 |
---|---|---|
White 純白 | FF FF FF | 255 255 255 |
Snow 雪白 | FF FA FA | 255 250 250 |
Honeydew 哈密瓜色 | F0 FF F0 | 240 255 240 |
MintCream 薄荷奶油色 | F5 FF FA | 245 255 250 |
Azure Mist/Pale Cyan 天藍霧/灰青色 | F0 FF FF | 240 255 255 |
AliceBlue 愛麗絲藍 | F0 F8 FF | 240 248 255 |
GhostWhite 幽靈白 | F8 F8 FF | 248 248 255 |
WhiteSmoke 煙燻白 | F5 F5 F5 | 245 245 245 |
Seashell 貝殼白 | FF F5 EE | 255 245 238 |
Beige 米白 | F5 F5 DC | 245 245 220 |
OldLace 舊蕾絲白 | FD F5 E6 | 253 245 230 |
FloralWhite 花白 | FF FA F0 | 255 250 240 |
Ivory 象牙白 | FF FF F0 | 255 255 240 |
AntiqueWhite 古董白 | FA EB D7 | 250 235 215 |
Linen 亞麻白 | FA F0 E6 | 250 240 230 |
LavenderBlush 薰衣草紫紅 | FF F0 F5 | 255 240 245 |
MistyRose 霧玫瑰色 | FF E4 E1 | 255 228 225 |
名稱 | 十六進制 | 十進制 |
---|---|---|
Gray 純灰 | 80 80 80 | 128 128 128 |
Gainsboro 庚斯博羅灰 | DC DC DC | 220 220 220 |
LightGray 淡灰 | D3 D3 D3 | 211 211 211 |
Silver 純銀 | C0 C0 C0 | 192 192 192 |
DarkGray 深灰 | A9 A9 A9 | 169 169 169 |
DimGray 昏灰 | 69 69 69 | 105 105 105 |
LightSlateGray 淡岩灰 | 77 88 99 | 119 136 153 |
SlateGray 岩灰 | 70 80 90 | 112 128 144 |
DarkSlateGray 深岩灰 | 2F 4F 4F | 47 79 79 |
Black 純黑 | 00 00 00 | 0 0 0 |
RGB顏色列表
#FFCCCC | #FFC0C0 | #FF9999 | #FF8080 | #FF6666 | #FF4040 | #FF3333 | #FF0000 |
#FFE5CC | #FFE0C0 | #FFCC99 | #FFC080 | #FFB266 | #FFA040 | #FF9933 | #FF8000 |
#FFFFCC | #FFFFC0 | #FFFF99 | #FFFF80 | #FFFF66 | #FFFF40 | #FFFF33 | #FFFF00 |
#FFFFE5 | #FFFFE0 | #FFFFCC | #FFFFC0 | #FFFFB2 | #FFFFA0 | #FFFF99 | #FFFF80 |
#E5FFCC | #E0FFC0 | #CCFF99 | #C0FFA0 | #B2FF66 | #A0FF40 | #99FF33 | #80FF00 |
#CCFFCC | #C0FFC0 | #99FF99 | #80FF80 | #66FF66 | #40FF40 | #33FF33 | #00FF00 |
#E5FFE5 | #E0FFE0 | #CCFFCC | #C0FFC0 | #B2FFB2 | #A0FFA0 | #99FF99 | #80FF80 |
#CCE5CC | #C0E0C0 | #99CC99 | #80C080 | #66B266 | #40A040 | #339933 | #008000 |
#CCFFE5 | #C0FFE0 | #99FFCC | #80FFC0 | #66FFB2 | #40FFA0 | #33FF99 | #00FF80 |
#CCFFFF | #C0FFFF | #99FFFF | #80FFFF | #66FFFF | #40FFFF | #33FFFF | #00FFFF |
#E5FFFF | #E0FFFF | #CCFFFF | #C0FFFF | #B2FFFF | #A0FFFF | #99FFFF | #80FFFF |
#CCE5E5 | #C0E0E0 | #99CCCC | #80C0C0 | #66B2B2 | #40A0A0 | #339999 | #008080 |
#CCE5FF | #C0E0FF | #99CCFF | #80C0FF | #66B2FF | #40A0FF | #3399FF | #0080FF |
#CCCCFF | #C0C0FF | #9999FF | #8080FF | #6666FF | #4040FF | #3333FF | #0000FF |
#CCCCE5 | #C0C0E0 | #9999CC | #8080C0 | #6666B2 | #4040A0 | #333399 | #000080 |
#E5E5FF | #E0E0FF | #CCCCFF | #C0C0FF | #B2B2FF | #A0A0FF | #9999FF | #8080FF |
#E5CCFF | #E0C0FF | #CC99FF | #C080FF | #B266FF | #A040FF | #9933FF | #8000FF |
#E5CCE5 | #E0C0E0 | #CC99CC | #C080C0 | #B266B2 | #A040A0 | #993399 | #800080 |
#FFCCFF | #FFC0FF | #FF99FF | #FF80FF | #FF66FF | #FF40FF | #FF33FF | #FF00FF |
#FFE5FF | #FFE0FF | #FFCCFF | #FFC0FF | #FFB2FF | #FFA0FF | #FF99FF | #FF80FF |
#FFCCE5 | #FFC0E0 | #FF99CC | #FF80C0 | #FF66B2 | #FF40A0 | #FF3399 | #FF0080 |
#FFE5E5 | #FFE0E0 | #FFCCCC | #FFC0C0 | #FFB2B2 | #FFA0A0 | #FF9999 | #FF8080 |
#E5CCCC | #E0C0C0 | #CC9999 | #C08080 | #B26666 | #A04040 | #993333 | #800000 |
#E5E5CC | #E0E0C0 | #CCCC99 | #C0C080 | #B2B266 | #A0A040 | #999933 | #808000 |
#E5E5E5 | #E0E0E0 | #CCCCCC | #C0C0C0 | #B2B2B2 | #A0A0A0 | #999999 | #808080 |
#FF0000 | #CC0000 | #C00000 | #990000 | #800000 | #660000 | #400000 | #330000 |
#FF8000 | #CC6600 | #C06000 | #994C00 | #804000 | #663300 | #402000 | #331900 |
#FFFF00 | #CCCC00 | #C0C000 | #999900 | #808000 | #666600 | #404000 | #333300 |
#FFFF80 | #CCCC66 | #C0C060 | #99994C | #808040 | #666633 | #404020 | #333319 |
#80FF00 | #66CC00 | #60C000 | #4C9900 | #408000 | #336600 | #204000 | #193300 |
#00FF00 | #00CC00 | #00C000 | #009900 | #008000 | #006600 | #004000 | #003300 |
#80FF80 | #66CC66 | #60C060 | #4C994C | #408040 | #336633 | #204020 | #193319 |
#008000 | #006600 | #006000 | #004C00 | #004000 | #003300 | #002000 | #001900 |
#00FF80 | #00CC66 | #00C060 | #00994C | #008040 | #006633 | #004020 | #003319 |
#00FFFF | #00CCCC | #00C0C0 | #009999 | #008080 | #006666 | #004040 | #003333 |
#80FFFF | #66CCCC | #60C0C0 | #4C9999 | #408080 | #336666 | #204040 | #193333 |
#008080 | #006666 | #006060 | #004C4C | #004040 | #003333 | #002020 | #001919 |
#0080FF | #0066CC | #0060C0 | #004C99 | #004080 | #003366 | #002040 | #001933 |
#0000FF | #0000CC | #0000C0 | #000099 | #000080 | #000066 | #000040 | #000033 |
#000080 | #000066 | #000060 | #00004C | #000040 | #000033 | #000020 | #000019 |
#8080FF | #6666CC | #6060C0 | #4C4C99 | #404080 | #333366 | #202040 | #191933 |
#8000FF | #6600CC | #6000C0 | #4C0099 | #400080 | #330066 | #200040 | #190033 |
#800080 | #660066 | #600060 | #4C004C | #400040 | #330033 | #200020 | #190019 |
#FF00FF | #CC00CC | #C000C0 | #990099 | #800080 | #660066 | #400040 | #330033 |
#FF80FF | #CC66CC | #C060C0 | #994C99 | #804080 | #663366 | #402040 | #331933 |
#FF0080 | #CC0066 | #C00060 | #99004C | #800040 | #660033 | #400020 | #330019 |
#FF8080 | #CC6666 | #C06060 | #994C4C | #804040 | #663333 | #402020 | #331919 |
#800000 | #660000 | #600000 | #4C0000 | #400000 | #330000 | #200000 | #190000 |
#808000 | #666600 | #606000 | #4C4C00 | #404000 | #333300 | #202000 | #191900 |
#808080 | #666666 | #606060 | #4C4C4C | #404040 | #333333 | #202020 | #191919 |
網頁安全顏色
在20世紀90年代中期,很多顯示器只支持顯示256種顏色[11],這些顏色由硬件決定或者可以被「顏色表」改變。如果顏色不可用,就必須使用不同的顏色,通常就是最近的顏色或者抖動。在諸如X11的系統上,顏色圖是在不同之間共享的,瀏覽器會分配一些小的顏色塊。在2000年左右,由於24位顏色的普及,256色的顯示銳減[12],「網頁安全顏色」的實際使用減少。
「網頁安全」顏色並非全都擁有標準的名稱,但是每個顏色都可以以RGB十六進制的形式顯示,每個分量(紅、綠、藍)都會接收以下表中的6個值之一:
鍵 | 十六進制值 | 十進制值 | 小數形式 |
---|---|---|---|
0 | 00 | 0 | 0 |
3 | 33 | 51 | 0.2 |
6 | 66 | 102 | 0.4 |
9 | 99 | 153 | 0.6 |
C (12) | CC | 204 | 0.8 |
F (15) | FF | 255 | 1 |
下面這個表顯示了所有的網頁安全顏色。
顏色表
*000* | 300 | 600 | 900 | C00 | *F00* |
*003* | 303 | 603 | 903 | C03 | *F03* |
006 | 306 | 606 | 906 | C06 | F06 |
009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C |
*00F* | 30F | 60F | 90F | C0F | *F0F* |
030 | 330 | 630 | 930 | C30 | F30 |
033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 |
039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C |
03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 |
063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 |
069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C |
06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 |
093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 |
099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C |
09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC |
0CF | 3CF | 6CF | 9CF | CCF | FCF |
*0F0* | 3F0 | *6F0* | 9F0 | CF0 | *FF0* |
0F3 | *3F3* | *6F3* | 9F3 | CF3 | *FF3* |
*0F6* | *3F6* | 6F6 | 9F6 | *CF6* | *FF6* |
0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
*0FC* | *3FC* | 6FC | 9FC | CFC | FFC |
*0FF* | *3FF* | *6FF* | 9FF | CFF | *FFF* |
網頁最安全顏色
設計者會被鼓勵在網頁中使用這216個網頁最安全的顏色,216色顏色表開發時還有許多的8位顏色,只有22種顏色會被可靠地顯示而不需要重新映射。這22個顏色被稱為「真正安全的顏色」,包含一系列亮度的綠色、黃色和青色[13][14]
R-- -GB
|
0 | 3 | 6 | 9 | C | F |
---|---|---|---|---|---|---|
00 | *000* | *F00* | ||||
03 | *003* | *F03* | ||||
06 | ||||||
09 | ||||||
0C | ||||||
0F | *00F* | *F0F* | ||||
⋮ | ⋮ | |||||
F0 | *0F0* | *6F0* | *FF0* | |||
F3 | *3F3* | *6F3* | *FF3* | |||
F6 | *0F6* | *3F6* | *CF6* | *FF6* | ||
F9 | ||||||
FC | *0FC* | *3FC* | ||||
FF | *0FF* | *3FF* | *6FF* | *FFF* |
無障礙
顏色選擇
一些網頁瀏覽器和設備不支持顏色,對於這些顯示,以及對於失明或者色盲的用於,依賴於顏色的網頁內容會難以顯示或者無法顯示。
顏色一般不應該被指定(而應該調用瀏覽器的默認顏色),或者背景和前景應該同時指定,例如純文本顏色、未訪問鏈接的顏色、已訪問鏈接的顏色等。這樣是為了避免在特定的背景上顯示與背景顏色非常相似顏色的文本[15]。
顏色對比度
網頁內容無障礙指南要求文本的背景色與前景色具有一定的對比度,常規的文本對比度不小於4.5:1,大文本的對比度不小於3:1[16]。增強的無障礙需要對比度要超過7:1。但是,解決無障礙問題並非像增加對比度那樣簡單。根據網頁無障礙倡議的報告,失讀症的讀者最適合閱讀在最大值之下的對比度的文本[17]。
參考文獻
- ^ Niederst Robbins, Jennifer. Appendix D: Specifying Color. Web Design in a Nutshell. O'Reilly. February 2006: 830. ISBN 978-0-596-00987-8 (英語).
- ^ York, Richard. Beginning CSS, pp. 71–72.
- ^ Pemberton, Steven; Pettit, Brad. Çelik, Tantek; Lilley, Chris; Baron, L. David , 編. CSS Color Module Level 3 [CSS顏色模型級別3]. W3C. section 4.2.1. RGB color values. 7 June 2011 [2023-09-13]. (原始內容存檔於2010-11-30).
- ^ Sharma, Gaurav; Bala, Raja. Digital Color Imaging Handbook. CRC Press. 19 December 2017 [2023-09-13]. ISBN 978-1-4200-4148-4. (原始內容存檔於2023-04-08) (英語).
- ^ <color>. Web Technology For Developers: CSS. MDN. [2016-08-16]. (原始內容存檔於2017-07-05).
- ^ Pemberton, Steven; Pettit, Brad. Çelik, Tantek; Lilley, Chris; Baron, L. David , 編. 4.2.1. RGB color values [4.2.1. RGB顏色值]. CSS Color Module Level 3. W3C. 7 June 2011 [19 March 2013]. (原始內容存檔於2017-11-29) (英語).
- ^ CSS Color Module Level 3. W3c. [19 July 2020]. (原始內容存檔於2023-05-25).
- ^ Trezy. Honoring a great man. [2016-08-26]. (原始內容存檔於2016-08-27).
- ^ Pemberton, Steven; Pettit, Brad. Çelik, Tantek; Lilley, Chris; Baron, L. David , 編. 4.3. Extended color keywords [4.3. 擴展顏色關鍵詞]. CSS Color Module Level 3. W3C. 7 June 2011 [19 March 2013]. (原始內容存檔於2017-11-29) (英語).
- ^ W3C TR SVG 1.0, recognized color keyword names. W3.org. 16 August 2011 [1 Feb 2019]. (原始內容存檔於2022-12-02).
- ^ Jenkins, Sue. Web Design All-in-One For Dummies. John Wiley & Sons. 2012-12-27. ISBN 9781118404119 (英語).
- ^ Browser Display Statistics [瀏覽器顯示統計]. W3schools.com. [8 July 2013]. (原始內容存檔於2023-09-20) (英語).
- ^ Death of the Websafe Color Palette?. asc.ohio-state.edu. [3 March 2021]. (原始內容存檔於3 March 2021) (英語).
- ^ Web Color Reference - HTML with Style | 4 | WebReference [網頁顏色索引 - HTML 和樣式 4 WebReference]. www.webreference.com. [2016-01-05]. (原始內容存檔於23 November 2016) (英語).
- ^ If You Pick One Color, Pick Them All [選擇了一個顏色,就應該選擇全部]. W3.org. [8 July 2013]. (原始內容存檔於2023-04-14) (英語).
- ^ WCAG 2.0 guideline 1.4. [2023-09-14]. (原始內容存檔於2023-09-20).
- ^ Optimal Colors to Improve Readability for People with Dyslexia. [2023-09-14]. (原始內容存檔於2023-04-09).
參見
外部連結
- MDN上的CSS顏色參考 (英文) (頁面存檔備份,存於網際網路檔案館)
- MDN上的CSS顏色參考 (頁面存檔備份,存於網際網路檔案館) (簡體中文)
- kuler (頁面存檔備份,存於網際網路檔案館)
- 網頁顏色參考
- 網頁安全調色板的末日, David Lehn和Hadley Stern寫的一篇論文
- 安全顏色的一種排列
- 前景顏色表 (頁面存檔備份,存於網際網路檔案館)
- X11顏色表
- HTML顏色
- 十六進位制介紹
- 各種模式顏色
- HTML Color Spectrum Chart
- HTML顏色 (頁面存檔備份,存於網際網路檔案館)
- HTML顏色代碼 (頁面存檔備份,存於網際網路檔案館)
- ws Color Scheme Generator 2 (頁面存檔備份,存於網際網路檔案館)
- ColorBlender.com | Your free online color matching toolbox
|