网页颜色
网页颜色是在万维网上显示网页时使用的颜色,可以用三种方法表示: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值。
颜色名称 编辑
颜色名称是指通过颜色的英文名称定义的颜色。在W3C标准中,颜色名称分为基本颜色和扩展颜色[7]。除了transparent
之外,所有的颜色都是完全不透明的。
中文名 | 英文名 | 对应十六进制值 |
---|---|---|
黑色 | 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 / aqua | #00ffff |
灰色 | gray | #808080 |
白色 | white | #ffffff |
在后来的CSS版本中,加入了橙色和透明色。
CSS颜色模块版本 | 中文 | 英文 | 代碼、顏色 | 注释 |
---|---|---|---|---|
2.1 | 橙色 | orange | #ffa500 | |
3 | 透明 | transparent | #00000000 | |
4 | 丽碧卡紫 | rebeccapurple | #663399 | 用來悼念埃里克·邁耶的女兒。[8] |
除此之外,CSS3(CSS颜色模块版本3)接纳绝大部分X11颜色(或称SVG色)。
扩展颜色 编辑
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 |
名称 | 十六进制 | 十進制 |
---|---|---|
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 |
名称 | 十六进制 | 十進制 |
---|---|---|
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 |
名称 | 十六进制 | 十進制 |
---|---|---|
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 |
網頁安全颜色 编辑
在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) (英语).
- ^ . 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. . [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) (英语).
- ^ . asc.ohio-state.edu. [3 March 2021]. (原始内容存档于3 March 2021) (英语).
- ^ . 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).