《阿宝哥的HTML5编程笔记》之13：颜色名和色值

2020-01-28 本文已影响0人 AT阿宝哥

大前端设计（H5+小程序+App）

温馨提示：

本文中可能包含表格，在手机屏幕上竖屏显示时，一行内可显示中文字符数量为20个左右，因部分表格单元格内容过长会导致自动换行，从而使得排版不太美观。

另外，本文中可能包含高清图片，在手机屏幕上预览时，我们需要频繁的进行放大缩小操作，这是相当麻烦的一件事情。

因此，如果条件允许，建议您坐在舒适的办公桌前，冲泡一杯咖啡或者茶，在电脑上阅读以获得更好的体验。

本文提供了被大多数浏览器支持的颜色名。

提示：
W3C 的 HTML 4.0 标准仅支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果使用其它颜色的话，就应该使用十六进制的颜色值，格式如下：

#RRGGBB

颜色名列表

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

颜色名	十六进制颜色值	颜色
AliceBlue	#F0F8FF	$\color{#F0F8FF}{██████}$
AntiqueWhite	#FAEBD7	$\color{#FAEBD7}{██████}$
Aqua	#00FFFF	$\color{#00FFFF}{██████}$
Aquamarine	#7FFFD4	$\color{#7FFFD4}{██████}$
Azure	#F0FFFF	$\color{#F0FFFF}{██████}$
Beige	#F5F5DC	$\color{#F5F5DC}{██████}$
Bisque	#FFE4C4	$\color{#FFE4C4}{██████}$
Black	#000000	$\color{#000000}{██████}$
BlanchedAlmond	#FFEBCD	$\color{#FFEBCD}{██████}$
Blue	#0000FF	$\color{#0000FF}{██████}$
BlueViolet	#8A2BE2	$\color{#8A2BE2}{██████}$
Brown	#A52A2A	$\color{#A52A2A}{██████}$
BurlyWood	#DEB887	$\color{#DEB887}{██████}$
CadetBlue	#5F9EA0	$\color{#5F9EA0}{██████}$
Chartreuse	#7FFF00	$\color{#7FFF00}{██████}$
Chocolate	#D2691E	$\color{#D2691E}{██████}$
Coral	#FF7F50	$\color{#FF7F50}{██████}$
CornflowerBlue	#6495ED	$\color{#6495ED}{██████}$
Cornsilk	#FFF8DC	$\color{#FFF8DC}{██████}$
Crimson	#DC143C	$\color{#DC143C}{██████}$
Cyan	#00FFFF	$\color{#00FFFF}{██████}$
DarkBlue	#00008B	$\color{#00008B}{██████}$
DarkCyan	#008B8B	$\color{#008B8B}{██████}$
DarkGoldenRod	#B8860B	$\color{#B8860B}{██████}$
DarkGray	#A9A9A9	$\color{#A9A9A9}{██████}$
DarkGreen	#006400	$\color{#006400}{██████}$
DarkKhaki	#BDB76B	$\color{#BDB76B}{██████}$
DarkMagenta	#8B008B	$\color{#8B008B}{██████}$
DarkOliveGreen	#556B2F	$\color{#556B2F}{██████}$
Darkorange	#FF8C00	$\color{#FF8C00}{██████}$
DarkOrchid	#9932CC	$\color{#9932CC}{██████}$
DarkRed	#8B0000	$\color{#8B0000}{██████}$
DarkSalmon	#E9967A	$\color{#E9967A}{██████}$
DarkSeaGreen	#8FBC8F	$\color{#8FBC8F}{██████}$
DarkSlateBlue	#483D8B	$\color{#483D8B}{██████}$
DarkSlateGray	#2F4F4F	$\color{#2F4F4F}{██████}$
DarkTurquoise	#00CED1	$\color{#00CED1}{██████}$
DarkViolet	#9400D3	$\color{#9400D3}{██████}$
DeepPink	#FF1493	$\color{#FF1493}{██████}$
DeepSkyBlue	#00BFFF	$\color{#00BFFF}{██████}$
DimGray	#696969	$\color{#696969}{██████}$
DodgerBlue	#1E90FF	$\color{#1E90FF}{██████}$
Feldspar	#D19275	$\color{#D19275}{██████}$
FireBrick	#B22222	$\color{#B22222}{██████}$
FloralWhite	#FFFAF0	$\color{#FFFAF0}{██████}$
ForestGreen	#228B22	$\color{#228B22}{██████}$
Fuchsia	#FF00FF	$\color{#FF00FF}{██████}$
Gainsboro	#DCDCDC	$\color{#DCDCDC}{██████}$
GhostWhite	#F8F8FF	$\color{#F8F8FF}{██████}$
Gold	#FFD700	$\color{#FFD700}{██████}$
GoldenRod	#DAA520	$\color{#DAA520}{██████}$
Gray	#808080	$\color{#808080}{██████}$
Green	#008000	$\color{#008000}{██████}$
GreenYellow	#ADFF2F	$\color{#ADFF2F}{██████}$
HoneyDew	#F0FFF0	$\color{#F0FFF0}{██████}$
HotPink	#FF69B4	$\color{#FF69B4}{██████}$
IndianRed	#CD5C5C	$\color{#CD5C5C}{██████}$
Indigo	#4B0082	$\color{#4B0082}{██████}$
Ivory	#FFFFF0	$\color{#FFFFF0}{██████}$
Khaki	#F0E68C	$\color{#F0E68C}{██████}$
Lavender	#E6E6FA	$\color{#E6E6FA}{██████}$
LavenderBlush	#FFF0F5	$\color{#FFF0F5}{██████}$
LawnGreen	#7CFC00	$\color{#7CFC00}{██████}$
LemonChiffon	#FFFACD	$\color{#FFFACD}{██████}$
LightBlue	#ADD8E6	$\color{#ADD8E6}{██████}$
LightCoral	#F08080	$\color{#F08080}{██████}$
LightCyan	#E0FFFF	$\color{#E0FFFF}{██████}$
LightGoldenRodYellow	#FAFAD2	$\color{#FAFAD2}{██████}$
LightGrey	#D3D3D3	$\color{#D3D3D3}{██████}$
LightGreen	#90EE90	$\color{#90EE90}{██████}$
LightPink	#FFB6C1	$\color{#FFB6C1}{██████}$
LightSalmon	#FFA07A	$\color{#FFA07A}{██████}$
LightSeaGreen	#20B2AA	$\color{#20B2AA}{██████}$
LightSkyBlue	#87CEFA	$\color{#87CEFA}{██████}$
LightSlateBlue	#8470FF	$\color{#8470FF}{██████}$
LightSlateGray	#778899	$\color{#778899}{██████}$
LightSteelBlue	#B0C4DE	$\color{#B0C4DE}{██████}$
LightYellow	#FFFFE0	$\color{#FFFFE0}{██████}$
Lime	#00FF00	$\color{#00FF00}{██████}$
LimeGreen	#32CD32	$\color{#32CD32}{██████}$
Linen	#FAF0E6	$\color{#FAF0E6}{██████}$
Magenta	#FF00FF	$\color{#FF00FF}{██████}$
Maroon	#800000	$\color{#800000}{██████}$
MediumAquaMarine	#66CDAA	$\color{#66CDAA}{██████}$
MediumBlue	#0000CD	$\color{#0000CD}{██████}$
MediumOrchid	#BA55D3	$\color{#BA55D3}{██████}$
MediumPurple	#9370D8	$\color{#9370D8}{██████}$
MediumSeaGreen	#3CB371	$\color{#3CB371}{██████}$
MediumSlateBlue	#7B68EE	$\color{#7B68EE}{██████}$
MediumSpringGreen	#00FA9A	$\color{#00FA9A}{██████}$
MediumTurquoise	#48D1CC	$\color{#48D1CC}{██████}$
MediumVioletRed	#C71585	$\color{#C71585}{██████}$
MidnightBlue	#191970	$\color{#191970}{██████}$
MintCream	#F5FFFA	$\color{#F5FFFA}{██████}$
MistyRose	#FFE4E1	$\color{#FFE4E1}{██████}$
Moccasin	#FFE4B5	$\color{#FFE4B5}{██████}$
NavajoWhite	#FFDEAD	$\color{#FFDEAD}{██████}$
Navy	#000080	$\color{#000080}{██████}$
OldLace	#FDF5E6	$\color{#FDF5E6}{██████}$
Olive	#808000	$\color{#808000}{██████}$
OliveDrab	#6B8E23	$\color{#6B8E23}{██████}$
Orange	#FFA500	$\color{#FFA500}{██████}$
OrangeRed	#FF4500	$\color{#FF4500}{██████}$
Orchid	#DA70D6	$\color{#DA70D6}{██████}$
PaleGoldenRod	#EEE8AA	$\color{#EEE8AA}{██████}$
PaleGreen	#98FB98	$\color{#98FB98}{██████}$
PaleTurquoise	#AFEEEE	$\color{#AFEEEE}{██████}$
PaleVioletRed	#D87093	$\color{#D87093}{██████}$
PapayaWhip	#FFEFD5	$\color{#FFEFD5}{██████}$
PeachPuff	#FFDAB9	$\color{#FFDAB9}{██████}$
Peru	#CD853F	$\color{#CD853F}{██████}$
Pink	#FFC0CB	$\color{#FFC0CB}{██████}$
Plum	#DDA0DD	$\color{#DDA0DD}{██████}$
PowderBlue	#B0E0E6	$\color{#B0E0E6}{██████}$
Purple	#800080	$\color{#800080}{██████}$
Red	#FF0000	$\color{#FF0000}{██████}$
RosyBrown	#BC8F8F	$\color{#BC8F8F}{██████}$
RoyalBlue	#4169E1	$\color{#4169E1}{██████}$
SaddleBrown	#8B4513	$\color{#8B4513}{██████}$
Salmon	#FA8072	$\color{#FA8072}{██████}$
SandyBrown	#F4A460	$\color{#F4A460}{██████}$
SeaGreen	#2E8B57	$\color{#2E8B57}{██████}$
SeaShell	#FFF5EE	$\color{#FFF5EE}{██████}$
Sienna	#A0522D	$\color{#A0522D}{██████}$
Silver	#C0C0C0	$\color{#C0C0C0}{██████}$
SkyBlue	#87CEEB	$\color{#87CEEB}{██████}$
SlateBlue	#6A5ACD	$\color{#6A5ACD}{██████}$
SlateGray	#708090	$\color{#708090}{██████}$
Snow	#FFFAFA	$\color{#FFFAFA}{██████}$
SpringGreen	#00FF7F	$\color{#00FF7F}{██████}$
SteelBlue	#4682B4	$\color{#4682B4}{██████}$
Tan	#D2B48C	$\color{#D2B48C}{██████}$
Teal	#008080	$\color{#008080}{██████}$
Thistle	#D8BFD8	$\color{#D8BFD8}{██████}$
Tomato	#FF6347	$\color{#FF6347}{██████}$
Turquoise	#40E0D0	$\color{#40E0D0}{██████}$
Violet	#EE82EE	$\color{#EE82EE}{██████}$
VioletRed	#D02090	$\color{#D02090}{██████}$
Wheat	#F5DEB3	$\color{#F5DEB3}{██████}$
White	#FFFFFF	$\color{#FFFFFF}{██████}$
WhiteSmoke	#F5F5F5	$\color{#F5F5F5}{██████}$
Yellow	#FFFF00	$\color{#FFFF00}{██████}$
YellowGreen	#9ACD32	$\color{#9ACD32}{██████}$