前端Wiki/工具/CSS 颜色对照表

CSS 颜色对照表

本页收录W3C 规范定义的 140 个 CSS 命名颜色，按红、橙、黄、绿、蓝青、紫、粉、棕、灰白黑九大色系分组，每色附 色块预览、HEX、RGB、HSL 数值与中文备注。

搜索过滤

点击任意行可复制其 HEX 色值；颜色名采用美式拼写（gray 而非 grey），aqua 与 magenta 为 cyan、fuchsia 的常用等价名。

红色系 14 色

颜色名	中文备注	HEX	RGB	HSL
lightcoral	浅珊瑚色	`#f08080`	`rgb(240, 128, 128)`	`hsl(0, 79%, 72%)`
indianred	印第安红	`#cd5c5c`	`rgb(205, 92, 92)`	`hsl(0, 53%, 58%)`
red	红色	`#ff0000`	`rgb(255, 0, 0)`	`hsl(0, 100%, 50%)`
firebrick	耐火砖红	`#b22222`	`rgb(178, 34, 34)`	`hsl(0, 68%, 42%)`
brown	棕色	`#a52a2a`	`rgb(165, 42, 42)`	`hsl(0, 59%, 41%)`
darkred	深红色	`#8b0000`	`rgb(139, 0, 0)`	`hsl(0, 100%, 27%)`
maroon	栗色（褐红）	`#800000`	`rgb(128, 0, 0)`	`hsl(0, 100%, 25%)`
salmon	鲑鱼粉	`#fa8072`	`rgb(250, 128, 114)`	`hsl(6, 93%, 71%)`
tomato	番茄红	`#ff6347`	`rgb(255, 99, 71)`	`hsl(9, 100%, 64%)`
darksalmon	深鲑鱼色	`#e9967a`	`rgb(233, 150, 122)`	`hsl(15, 72%, 70%)`
coral	珊瑚色	`#ff7f50`	`rgb(255, 127, 80)`	`hsl(16, 100%, 66%)`
crimson	绯红色	`#dc143c`	`rgb(220, 20, 60)`	`hsl(348, 83%, 47%)`
pink	粉色	`#ffc0cb`	`rgb(255, 192, 203)`	`hsl(350, 100%, 88%)`
lightpink	浅粉色	`#ffb6c1`	`rgb(255, 182, 193)`	`hsl(351, 100%, 86%)`

橙色系 4 色

颜色名	中文备注	HEX	RGB	HSL
orangered	橙红色	`#ff4500`	`rgb(255, 69, 0)`	`hsl(16, 100%, 50%)`
lightsalmon	浅鲑鱼色	`#ffa07a`	`rgb(255, 160, 122)`	`hsl(17, 100%, 74%)`
darkorange	深橙色	`#ff8c00`	`rgb(255, 140, 0)`	`hsl(33, 100%, 50%)`
orange	橙色	`#ffa500`	`rgb(255, 165, 0)`	`hsl(39, 100%, 50%)`

黄色系 8 色

颜色名	中文备注	HEX	RGB	HSL
gold	金色	`#ffd700`	`rgb(255, 215, 0)`	`hsl(51, 100%, 50%)`
lemonchiffon	柠檬雪纺色	`#fffacd`	`rgb(255, 250, 205)`	`hsl(54, 100%, 90%)`
khaki	卡其色	`#f0e68c`	`rgb(240, 230, 140)`	`hsl(54, 77%, 75%)`
palegoldenrod	苍金菊黄	`#eee8aa`	`rgb(238, 232, 170)`	`hsl(55, 67%, 80%)`
darkkhaki	深卡其色	`#bdb76b`	`rgb(189, 183, 107)`	`hsl(56, 38%, 58%)`
lightyellow	浅黄色	`#ffffe0`	`rgb(255, 255, 224)`	`hsl(60, 100%, 94%)`
lightgoldenrodyellow	浅金菊黄	`#fafad2`	`rgb(250, 250, 210)`	`hsl(60, 80%, 90%)`
yellow	黄色	`#ffff00`	`rgb(255, 255, 0)`	`hsl(60, 100%, 50%)`

绿色系 19 色

颜色名	中文备注	HEX	RGB	HSL
olive	橄榄色	`#808000`	`rgb(128, 128, 0)`	`hsl(60, 100%, 25%)`
yellowgreen	黄绿色	`#9acd32`	`rgb(154, 205, 50)`	`hsl(80, 61%, 50%)`
olivedrab	橄榄褐	`#6b8e23`	`rgb(107, 142, 35)`	`hsl(80, 60%, 35%)`
darkolivegreen	深橄榄绿	`#556b2f`	`rgb(85, 107, 47)`	`hsl(82, 39%, 30%)`
greenyellow	绿黄色	`#adff2f`	`rgb(173, 255, 47)`	`hsl(84, 100%, 59%)`
chartreuse	查特酒绿	`#7fff00`	`rgb(127, 255, 0)`	`hsl(90, 100%, 50%)`
lawngreen	草坪绿	`#7cfc00`	`rgb(124, 252, 0)`	`hsl(90, 100%, 49%)`
palegreen	苍绿色	`#98fb98`	`rgb(152, 251, 152)`	`hsl(120, 93%, 79%)`
lightgreen	浅绿色	`#90ee90`	`rgb(144, 238, 144)`	`hsl(120, 73%, 75%)`
darkseagreen	深海绿色	`#8fbc8f`	`rgb(143, 188, 143)`	`hsl(120, 25%, 65%)`
lime	青柠色（亮绿）	`#00ff00`	`rgb(0, 255, 0)`	`hsl(120, 100%, 50%)`
limegreen	青柠绿	`#32cd32`	`rgb(50, 205, 50)`	`hsl(120, 61%, 50%)`
forestgreen	森林绿	`#228b22`	`rgb(34, 139, 34)`	`hsl(120, 61%, 34%)`
green	绿色	`#008000`	`rgb(0, 128, 0)`	`hsl(120, 100%, 25%)`
darkgreen	深绿色	`#006400`	`rgb(0, 100, 0)`	`hsl(120, 100%, 20%)`
seagreen	海绿色	`#2e8b57`	`rgb(46, 139, 87)`	`hsl(146, 50%, 36%)`
mediumseagreen	中海绿色	`#3cb371`	`rgb(60, 179, 113)`	`hsl(147, 50%, 47%)`
springgreen	春绿色	`#00ff7f`	`rgb(0, 255, 127)`	`hsl(150, 100%, 50%)`
mediumspringgreen	中春绿色	`#00fa9a`	`rgb(0, 250, 154)`	`hsl(157, 100%, 49%)`

蓝 · 青色系 36 色

颜色名	中文备注	HEX	RGB	HSL
aquamarine	海蓝宝石色	`#7fffd4`	`rgb(127, 255, 212)`	`hsl(160, 100%, 75%)`
mediumaquamarine	中海蓝绿色	`#66cdaa`	`rgb(102, 205, 170)`	`hsl(160, 51%, 60%)`
turquoise	绿松石色	`#40e0d0`	`rgb(64, 224, 208)`	`hsl(174, 72%, 56%)`
lightseagreen	浅海绿色	`#20b2aa`	`rgb(32, 178, 170)`	`hsl(177, 70%, 41%)`
mediumturquoise	中绿松石色	`#48d1cc`	`rgb(72, 209, 204)`	`hsl(178, 60%, 55%)`
azure	蔚蓝色	`#f0ffff`	`rgb(240, 255, 255)`	`hsl(180, 100%, 97%)`
lightcyan	浅青色	`#e0ffff`	`rgb(224, 255, 255)`	`hsl(180, 100%, 94%)`
paleturquoise	苍绿松石色	`#afeeee`	`rgb(175, 238, 238)`	`hsl(180, 65%, 81%)`
aqua	水色（青）	`#00ffff`	`rgb(0, 255, 255)`	`hsl(180, 100%, 50%)`
darkcyan	深青色	`#008b8b`	`rgb(0, 139, 139)`	`hsl(180, 100%, 27%)`
darkslategray	深板岩灰	`#2f4f4f`	`rgb(47, 79, 79)`	`hsl(180, 25%, 25%)`
teal	青色（靛青）	`#008080`	`rgb(0, 128, 128)`	`hsl(180, 100%, 25%)`
darkturquoise	深绿松石色	`#00ced1`	`rgb(0, 206, 209)`	`hsl(181, 100%, 41%)`
cadetblue	军服蓝	`#5f9ea0`	`rgb(95, 158, 160)`	`hsl(182, 25%, 50%)`
powderblue	粉蓝色	`#b0e0e6`	`rgb(176, 224, 230)`	`hsl(187, 52%, 80%)`
lightblue	浅蓝色	`#add8e6`	`rgb(173, 216, 230)`	`hsl(195, 53%, 79%)`
deepskyblue	深天蓝色	`#00bfff`	`rgb(0, 191, 255)`	`hsl(195, 100%, 50%)`
skyblue	天蓝色	`#87ceeb`	`rgb(135, 206, 235)`	`hsl(197, 71%, 73%)`
lightskyblue	浅天蓝色	`#87cefa`	`rgb(135, 206, 250)`	`hsl(203, 92%, 75%)`
steelblue	钢蓝色	`#4682b4`	`rgb(70, 130, 180)`	`hsl(207, 44%, 49%)`
dodgerblue	道奇蓝	`#1e90ff`	`rgb(30, 144, 255)`	`hsl(210, 100%, 56%)`
lightslategray	浅板岩灰	`#778899`	`rgb(119, 136, 153)`	`hsl(210, 14%, 53%)`
slategray	板岩灰	`#708090`	`rgb(112, 128, 144)`	`hsl(210, 13%, 50%)`
lightsteelblue	浅钢蓝色	`#b0c4de`	`rgb(176, 196, 222)`	`hsl(214, 41%, 78%)`
cornflowerblue	矢车菊蓝	`#6495ed`	`rgb(100, 149, 237)`	`hsl(219, 79%, 66%)`
royalblue	皇家蓝	`#4169e1`	`rgb(65, 105, 225)`	`hsl(225, 73%, 57%)`
blue	蓝色	`#0000ff`	`rgb(0, 0, 255)`	`hsl(240, 100%, 50%)`
mediumblue	中蓝色	`#0000cd`	`rgb(0, 0, 205)`	`hsl(240, 100%, 40%)`
darkblue	深蓝色	`#00008b`	`rgb(0, 0, 139)`	`hsl(240, 100%, 27%)`
midnightblue	午夜蓝	`#191970`	`rgb(25, 25, 112)`	`hsl(240, 64%, 27%)`
navy	海军蓝（藏青）	`#000080`	`rgb(0, 0, 128)`	`hsl(240, 100%, 25%)`
slateblue	板岩蓝	`#6a5acd`	`rgb(106, 90, 205)`	`hsl(248, 53%, 58%)`
darkslateblue	深板岩蓝	`#483d8b`	`rgb(72, 61, 139)`	`hsl(248, 39%, 39%)`
mediumslateblue	中板岩蓝	`#7b68ee`	`rgb(123, 104, 238)`	`hsl(249, 80%, 67%)`
mediumpurple	中紫色	`#9370db`	`rgb(147, 112, 219)`	`hsl(260, 60%, 65%)`
indigo	靛蓝色	`#4b0082`	`rgb(75, 0, 130)`	`hsl(275, 100%, 25%)`

紫色系 10 色

颜色名	中文备注	HEX	RGB	HSL
lavender	薰衣草色	`#e6e6fa`	`rgb(230, 230, 250)`	`hsl(240, 67%, 94%)`
rebeccapurple	丽贝卡紫	`#663399`	`rgb(102, 51, 153)`	`hsl(270, 50%, 40%)`
blueviolet	蓝紫色	`#8a2be2`	`rgb(138, 43, 226)`	`hsl(271, 76%, 53%)`
darkorchid	深兰花紫	`#9932cc`	`rgb(153, 50, 204)`	`hsl(280, 61%, 50%)`
darkviolet	深紫罗兰色	`#9400d3`	`rgb(148, 0, 211)`	`hsl(282, 100%, 41%)`
mediumorchid	中兰花紫	`#ba55d3`	`rgb(186, 85, 211)`	`hsl(288, 59%, 58%)`
thistle	蓟色	`#d8bfd8`	`rgb(216, 191, 216)`	`hsl(300, 24%, 80%)`
plum	梅紫色（洋李色）	`#dda0dd`	`rgb(221, 160, 221)`	`hsl(300, 47%, 75%)`
darkmagenta	深洋红	`#8b008b`	`rgb(139, 0, 139)`	`hsl(300, 100%, 27%)`
orchid	兰花紫色	`#da70d6`	`rgb(218, 112, 214)`	`hsl(302, 59%, 65%)`

粉 · 洋红色系 10 色

颜色名	中文备注	HEX	RGB	HSL
mistyrose	雾玫瑰色	`#ffe4e1`	`rgb(255, 228, 225)`	`hsl(6, 100%, 94%)`
violet	紫罗兰色	`#ee82ee`	`rgb(238, 130, 238)`	`hsl(300, 76%, 72%)`
fuchsia	紫红色（品红）	`#ff00ff`	`rgb(255, 0, 255)`	`hsl(300, 100%, 50%)`
magenta	洋红色（品红）	`#ff00ff`	`rgb(255, 0, 255)`	`hsl(300, 100%, 50%)`
purple	紫色	`#800080`	`rgb(128, 0, 128)`	`hsl(300, 100%, 25%)`
mediumvioletred	中紫罗兰红	`#c71585`	`rgb(199, 21, 133)`	`hsl(322, 81%, 43%)`
deeppink	深粉色	`#ff1493`	`rgb(255, 20, 147)`	`hsl(328, 100%, 54%)`
hotpink	热粉色	`#ff69b4`	`rgb(255, 105, 180)`	`hsl(330, 100%, 71%)`
lavenderblush	薰衣草红	`#fff0f5`	`rgb(255, 240, 245)`	`hsl(340, 100%, 97%)`
palevioletred	苍紫罗兰红	`#db7093`	`rgb(219, 112, 147)`	`hsl(340, 60%, 65%)`

棕 · 土色系 15 色

颜色名	中文备注	HEX	RGB	HSL
rosybrown	玫瑰棕	`#bc8f8f`	`rgb(188, 143, 143)`	`hsl(0, 25%, 65%)`
sienna	赭石色	`#a0522d`	`rgb(160, 82, 45)`	`hsl(19, 56%, 40%)`
chocolate	巧克力色	`#d2691e`	`rgb(210, 105, 30)`	`hsl(25, 75%, 47%)`
saddlebrown	马鞍棕	`#8b4513`	`rgb(139, 69, 19)`	`hsl(25, 76%, 31%)`
peachpuff	桃肉色	`#ffdab9`	`rgb(255, 218, 185)`	`hsl(28, 100%, 86%)`
sandybrown	沙棕色	`#f4a460`	`rgb(244, 164, 96)`	`hsl(28, 87%, 67%)`
peru	秘鲁棕	`#cd853f`	`rgb(205, 133, 63)`	`hsl(30, 59%, 53%)`
bisque	饼干色	`#ffe4c4`	`rgb(255, 228, 196)`	`hsl(33, 100%, 88%)`
burlywood	实木色	`#deb887`	`rgb(222, 184, 135)`	`hsl(34, 57%, 70%)`
tan	棕褐色（茶色）	`#d2b48c`	`rgb(210, 180, 140)`	`hsl(34, 44%, 69%)`
navajowhite	纳瓦霍白	`#ffdead`	`rgb(255, 222, 173)`	`hsl(36, 100%, 84%)`
moccasin	鹿皮色	`#ffe4b5`	`rgb(255, 228, 181)`	`hsl(38, 100%, 85%)`
wheat	小麦色	`#f5deb3`	`rgb(245, 222, 179)`	`hsl(39, 77%, 83%)`
goldenrod	金菊黄	`#daa520`	`rgb(218, 165, 32)`	`hsl(43, 74%, 49%)`
darkgoldenrod	深金菊黄	`#b8860b`	`rgb(184, 134, 11)`	`hsl(43, 89%, 38%)`

灰 / 白 / 黑（中性色） 24 色

颜色名	中文备注	HEX	RGB	HSL
white	白色	`#ffffff`	`rgb(255, 255, 255)`	`hsl(0, 0%, 100%)`
snow	雪白色	`#fffafa`	`rgb(255, 250, 250)`	`hsl(0, 100%, 99%)`
whitesmoke	白烟色	`#f5f5f5`	`rgb(245, 245, 245)`	`hsl(0, 0%, 96%)`
gainsboro	亮灰色	`#dcdcdc`	`rgb(220, 220, 220)`	`hsl(0, 0%, 86%)`
lightgray	浅灰色	`#d3d3d3`	`rgb(211, 211, 211)`	`hsl(0, 0%, 83%)`
silver	银色	`#c0c0c0`	`rgb(192, 192, 192)`	`hsl(0, 0%, 75%)`
darkgray	深灰色	`#a9a9a9`	`rgb(169, 169, 169)`	`hsl(0, 0%, 66%)`
gray	灰色	`#808080`	`rgb(128, 128, 128)`	`hsl(0, 0%, 50%)`
dimgray	暗灰色	`#696969`	`rgb(105, 105, 105)`	`hsl(0, 0%, 41%)`
black	黑色	`#000000`	`rgb(0, 0, 0)`	`hsl(0, 0%, 0%)`
seashell	海贝白	`#fff5ee`	`rgb(255, 245, 238)`	`hsl(25, 100%, 97%)`
linen	亚麻色	`#faf0e6`	`rgb(250, 240, 230)`	`hsl(30, 67%, 94%)`
antiquewhite	古董白	`#faebd7`	`rgb(250, 235, 215)`	`hsl(34, 78%, 91%)`
blanchedalmond	杏仁白	`#ffebcd`	`rgb(255, 235, 205)`	`hsl(36, 100%, 90%)`
papayawhip	木瓜白	`#ffefd5`	`rgb(255, 239, 213)`	`hsl(37, 100%, 92%)`
oldlace	旧蕾丝色	`#fdf5e6`	`rgb(253, 245, 230)`	`hsl(39, 85%, 95%)`
floralwhite	花白色	`#fffaf0`	`rgb(255, 250, 240)`	`hsl(40, 100%, 97%)`
cornsilk	玉米丝色	`#fff8dc`	`rgb(255, 248, 220)`	`hsl(48, 100%, 93%)`
ivory	象牙白	`#fffff0`	`rgb(255, 255, 240)`	`hsl(60, 100%, 97%)`
beige	米色	`#f5f5dc`	`rgb(245, 245, 220)`	`hsl(60, 56%, 91%)`
honeydew	蜜瓜色	`#f0fff0`	`rgb(240, 255, 240)`	`hsl(120, 100%, 97%)`
mintcream	薄荷奶油色	`#f5fffa`	`rgb(245, 255, 250)`	`hsl(150, 100%, 98%)`
aliceblue	爱丽丝蓝	`#f0f8ff`	`rgb(240, 248, 255)`	`hsl(208, 100%, 97%)`
ghostwhite	幽灵白	`#f8f8ff`	`rgb(248, 248, 255)`	`hsl(240, 100%, 99%)`

回到前端Wiki 首页 · 更多工具见前端开发工具箱