| 此條目需要更新。 (2022年4月24日) 請更新本文以反映近況和新增内容。完成修改時,請移除本模板。 |
网页颜色是在全球資訊網上設計網頁时,表示各种颜色的方法。颜色可以用三组十六进制数字表示,部分常用颜色或和上下文相关的内容也可以用英语名称的“关键字”来表示。此外还有直接使用多组十进制表示的方法。
十六进制数字表示方法[编辑]
在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,所以可以表示的颜色数总共有:2563 = 16,777,216 种。[1]
CSS颜色模块第四版引入了#RRGGBBAA和#RGBA的表示方式。
十进制“函数”表示[编辑]
从CSS 2.1开始,提供有rgb(red,green,blue)
的十进制颜色代码。
从CSS 3开始,网页颜色支持RGBA和HSLA颜色表示法:
rgba(255,0,0,0.5)
- 半透明的红色。
hsla(120,100%,50%,0.3)
- 半透明 (0.3) 的绿色。
这样的语法提供了使用透明色的可能性。[1]
颜色名称[编辑]
在HTML 4.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
|
用來悼念埃里克·邁耶的女兒。[2]
|
除此之外,CSS3(CSS颜色模块版本3)接纳了绝大部分X11颜色(或称SVG颜色)。
X11名称[编辑]
网景导航者和Internet Explorer又增加了一些颜色的名称,是由X窗口系统制定的。SVG 1.0把这些颜色标准化,逐渐被大多数HTML用户接受。
實名
|
16進制
|
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
|
紫色系
|
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
|
|
實名
|
16進制
|
10進制
|
綠色系
|
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 64 00 |
0 100 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 淺青 |
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
|
|
實名
|
16進制
|
10進制
|
褐色系
|
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 天藍白 |
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
|
|
網頁安全颜色[编辑]
当开发網頁安全颜色(Web-safe colors)调色板时,大部分显示方式是8位元的,只能显示256种颜色。要显示某种硬件预先定义的颜色以外的颜色,要么使用最接近的颜色替代,要么多用一些时间,通过抖动混合颜色显示。
David Lehn和Hadley Stern发现在更换16位元显示后,只有22种颜色是「真正安全」(really safe)的,可以不会在更换显示后出现不协调的畸变。
下面列出所有網頁安全颜色,其中以粗體下划线表示的为“真正安全”颜色:
網頁安全颜色
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
|
網頁最安全顏色[编辑]
真正安全用於網頁的22種顏色
|
0
|
3
|
6
|
9
|
C
|
F
|
00
|
#000(Black)
|
|
|
|
|
#F00(Red)
|
03
|
#003
|
|
|
|
|
#F03
|
0F
|
#00F(Blue)
|
|
|
|
|
#F0F(Fuchsia)
|
F0
|
#0F0(Lime)
|
|
#6F0
|
|
|
#FF0(Yellow)
|
F3
|
|
#3F3
|
#6F3
|
|
|
#FF3
|
F6
|
#0F6
|
#3F6
|
|
|
#CF6
|
#FF6
|
FC
|
#0FC
|
#3FC
|
|
|
|
|
FF
|
#0FF(Aqua)
|
#3FF
|
#6FF
|
|
|
#FFF(White)
|
8個括弧內的是「HTML基本16色」的色名。[3][4]
基本16色[编辑]
基本16色或标准16色(Basic 16 Colors)是指在HTML中直接指定颜色的英语名称就可以显示出来的16中颜色。
- 上方:指定的颜色名或RGB值(16进制)
- 下方:指定字符的显示效果。
HTML4.0中color属性可以指定的16色
|
Red |
Maroon |
Fuchsia |
Purple
|
|
|
|
|
#FF0000 |
#800000 |
#FF00FF |
#800080
|
|
|
|
|
Lime |
Green |
Yellow |
Olive
|
|
|
|
|
#00FF00 |
#008000 |
#FFFF00 |
#808000
|
|
|
|
|
Blue |
Navy |
Aqua |
Teal
|
|
|
|
|
#0000FF |
#000080 |
#00FFFF |
#008080
|
|
|
|
|
White |
Silver |
Gray |
Black
|
|
|
|
|
#FFFFFF |
#C0C0C0 |
#808080 |
#000000
|
|
|
|
|
渐变色[编辑]
CSS3引入了渐变色,分为线性渐变(如linear-gradient(#D1EEFC, #81F3FD);
)和圆心渐变(如radial-gradient(#FEFD58, #71FCA6, #52EDC7);
)两种。线性渐变支持方向设定,圆心渐变支持形状设定。[1]
参考文献[编辑]
外部链接[编辑]