2024 年 9 月 27 日 • 阅读 2 分钟

颜色名称(color names)

根据颜色规则，现代浏览器支持 140 种颜色名称。这些颜色名称可以在浏览器 HTML 和 CSS 中使用，显示渲染出想要的颜色。下面列出这些颜色名称与其对应的 Hex 颜色编码和 RGB 颜色编码。

红色系颜色名称

IndianRed: #CD5C5C; RGB(205, 92, 92)

LightCoral: #F08080; RGB(240, 128, 128)

Salmon: #FA8072; RGB(250, 128, 114)

DarkSalmon: #E9967A; RGB(233, 150, 122)

LightSalmon: #FFA07A; RGB(255, 160, 122)

Crimson: #DC143C; RGB(220, 20, 60)

Red: #FF0000; RGB(255, 0, 0)

FireBrick: #B22222; RGB(178, 34, 34)

DarkRed: #8B0000; RGB(139, 0, 0)

粉红色系颜色名称

Pink: #FFC0CB; RGB(255, 192, 203)

LightPink: #FFB6C1; RGB(255, 182, 193)

HotPink: #FF69B4; RGB(255, 105, 180)

DeepPink: #FF1493; RGB(255, 20, 147)

MediumVioletRed: #C71585; RGB(199, 21, 133)

PaleVioletRed: #DB7093; RGB(219, 112, 147)

橙色系颜色名称

LightSalmon: #FFA07A; RGB(255, 160, 122)

Coral: #FF7F50; RGB(255, 127, 80)

Tomato: #FF6347; RGB(255, 99, 71)

OrangeRed: #FF4500; RGB(255, 69, 0)

DarkOrange: #FF8C00; RGB(255, 140, 0)

Orange: #FFA500; RGB(255, 165, 0)

黄色系颜色名称

Gold: #FFD700; RGB(255, 215, 0)

Yellow: #FFFF00; RGB(255, 255, 0)

LightYellow: #FFFFE0; RGB(255, 255, 224)

LemonChiffon: #FFFACD; RGB(255, 250, 205)

LightGoldenrodYellow: #FAFAD2; RGB(250, 250, 210)

PapayaWhip: #FFEFD5; RGB(255, 239, 213)

Moccasin: #FFE4B5; RGB(255, 228, 181)

PeachPuff: #FFDAB9; RGB(255, 218, 185)

PaleGoldenrod: #EEE8AA; RGB(238, 232, 170)

Khaki: #F0E68C; RGB(240, 230, 140)

DarkKhaki: #BDB76B; RGB(189, 183, 107)

紫色系颜色名称

Lavender: #E6E6FA; RGB(230, 230, 250)

Thistle: #D8BFD8; RGB(216, 191, 216)

Plum: #DDA0DD; RGB(221, 160, 221)

Violet: #EE82EE; RGB(238, 130, 238)

Orchid: #DA70D6; RGB(218, 112, 214)

Fuchsia: #FF00FF; RGB(255, 0, 255)

Magenta: #FF00FF; RGB(255, 0, 255)

MediumOrchid: #BA55D3; RGB(186, 85, 211)

MediumPurple: #9370DB; RGB(147, 112, 219)

RebeccaPurple: #663399; RGB(102, 51, 153)

BlueViolet: #8A2BE2; RGB(138, 43, 226)

DarkViolet: #9400D3; RGB(148, 0, 211)

DarkOrchid: #9932CC; RGB(153, 50, 204)

DarkMagenta: #8B008B; RGB(139, 0, 139)

Purple: #800080; RGB(128, 0, 128)

Indigo: #4B0082; RGB(75, 0, 130)

SlateBlue: #6A5ACD; RGB(106, 90, 205)

DarkSlateBlue: #483D8B; RGB(72, 61, 139)

MediumSlateBlue: #7B68EE; RGB(123, 104, 238)

绿色系颜色名称

GreenYellow: #ADFF2F; RGB(173, 255, 47)

Chartreuse: #7FFF00; RGB(127, 255, 0)

LawnGreen: #7CFC00; RGB(124, 252, 0)

Lime: #00FF00; RGB(0, 255, 0)

LimeGreen: #32CD32; RGB(50, 205, 50)

PaleGreen: #98FB98; RGB(152, 251, 152)

LightGreen: #90EE90; RGB(144, 238, 144)

MediumSpringGreen: #00FA9A; RGB(0, 250, 154)

SpringGreen: #00FF7F; RGB(0, 255, 127)

MediumSeaGreen: #3CB371; RGB(60, 179, 113)

SeaGreen: #2E8B57; RGB(46, 139, 87)

ForestGreen: #228B22; RGB(34, 139, 34)

Green: #008000; RGB(0, 128, 0)

DarkGreen: #006400; RGB(0, 100, 0)

YellowGreen: #9ACD32; RGB(154, 205, 50)

OliveDrab: #6B8E23; RGB(107, 142, 35)

Olive: #808000; RGB(128, 128, 0)

DarkOliveGreen: #556B2F; RGB(85, 107, 47)

MediumAquamarine: #66CDAA; RGB(102, 205, 170)

DarkSeaGreen: #8FBC8B; RGB(143, 188, 139)

LightSeaGreen: #20B2AA; RGB(32, 178, 170)

DarkCyan: #008B8B; RGB(0, 139, 139)

Teal: #008080; RGB(0, 128, 128)

蓝色系颜色名称

Aqua: #00FFFF; RGB(0, 255, 255)

Cyan: #00FFFF; RGB(0, 255, 255)

LightCyan: #E0FFFF; RGB(224, 255, 255)

PaleTurquoise: #AFEEEE; RGB(175, 238, 238)

Aquamarine: #7FFFD4; RGB(127, 255, 212)

Turquoise: #40E0D0; RGB(64, 224, 208)

MediumTurquoise: #48D1CC; RGB(72, 209, 204)

DarkTurquoise: #00CED1; RGB(0, 206, 209)

CadetBlue: #5F9EA0; RGB(95, 158, 160)

SteelBlue: #4682B4; RGB(70, 130, 180)

LightSteelBlue: #B0C4DE; RGB(176, 196, 222)

PowderBlue: #B0E0E6; RGB(176, 224, 230)

LightBlue: #ADD8E6; RGB(173, 216, 230)

SkyBlue: #87CEEB; RGB(135, 206, 235)

LightSkyBlue: #87CEFA; RGB(135, 206, 250)

DeepSkyBlue: #00BFFF; RGB(0, 191, 255)

DodgerBlue: #1E90FF; RGB(30, 144, 255)

CornflowerBlue: #6495ED; RGB(100, 149, 237)

MediumSlateBlue: #7B68EE; RGB(123, 104, 238)

RoyalBlue: #4169E1; RGB(65, 105, 225)

Blue: #0000FF; RGB(0, 0, 255)

MediumBlue: #0000CD; RGB(0, 0, 205)

DarkBlue: #00008B; RGB(0, 0, 139)

Navy: #000080; RGB(0, 0, 128)

MidnightBlue: #191970; RGB(25, 25, 112)

棕色系颜色名称

Cornsilk: #FFF8DC; RGB(255, 248, 220)

BlanchedAlmond: #FFEBCD; RGB(255, 235, 205)

Bisque: #FFE4C4; RGB(255, 228, 196)

NavajoWhite: #FFDEAD; RGB(255, 222, 173)

Wheat: #F5DEB3; RGB(245, 222, 179)

BurlyWood: #DEB887; RGB(222, 184, 135)

Tan: #D2B48C; RGB(210, 180, 140)

RosyBrown: #BC8F8F; RGB(188, 143, 143)

SandyBrown: #F4A460; RGB(244, 164, 96)

Goldenrod: #DAA520; RGB(218, 165, 32)

DarkGoldenrod: #B8860B; RGB(184, 134, 11)

Peru: #CD853F; RGB(205, 133, 63)

Chocolate: #D2691E; RGB(210, 105, 30)

SaddleBrown: #8B4513; RGB(139, 69, 19)

Sienna: #A0522D; RGB(160, 82, 45)

Brown: #A52A2A; RGB(165, 42, 42)

Maroon: #800000; RGB(128, 0, 0)

白色系颜色名称

White: #FFFFFF; RGB(255, 255, 255)

Snow: #FFFAFA; RGB(255, 250, 250)

HoneyDew: #F0FFF0; RGB(240, 255, 240)

MintCream: #F5FFFA; RGB(245, 255, 250)

Azure: #F0FFFF; RGB(240, 255, 255)

AliceBlue: #F0F8FF; RGB(240, 248, 255)

GhostWhite: #F8F8FF; RGB(248, 248, 255)

WhiteSmoke: #F5F5F5; RGB(245, 245, 245)

SeaShell: #FFF5EE; RGB(255, 245, 238)

Beige: #F5F5DC; RGB(245, 245, 220)

OldLace: #FDF5E6; RGB(253, 245, 230)

FloralWhite: #FFFAF0; RGB(255, 250, 240)

Ivory: #FFFFF0; RGB(255, 255, 240)

AntiqueWhite: #FAEBD7; RGB(250, 235, 215)

Linen: #FAF0E6; RGB(250, 240, 230)

LavenderBlush: #FFF0F5; RGB(255, 240, 245)

MistyRose: #FFE4E1; RGB(255, 228, 225)

灰色系颜色名称

Gainsboro: #DCDCDC; RGB(220, 220, 220)

LightGray: #D3D3D3; RGB(211, 211, 211)

Silver: #C0C0C0; RGB(192, 192, 192)

DarkGray: #A9A9A9; RGB(169, 169, 169)

Gray: #808080; RGB(128, 128, 128)

DimGray: #696969; RGB(105, 105, 105)

LightSlateGray: #778899; RGB(119, 136, 153)

SlateGray: #708090; RGB(112, 128, 144)

DarkSlateGray: #2F4F4F; RGB(47, 79, 79)

Black: #000000; RGB(0, 0, 0)

怎样使用颜色名称

与 Hex 颜色编码一样，颜色名称可以用于 HTML 行内样式和单独的 CSS 样式表。

在 HTML 行内文档中：

<!-- 在 HTML 行内文档中 -->
<body>
  <h1 style="color: IndianRed">Indian Red Title Text</h1>
  <p style="color: SlateGray">Slate gray paragraph text</p>
</body>

在 .css 样式表中：

/* 在 .css 样式表中 */
h1 {
  color: IndianRed;
}
p {
  color: SlateGray;
}

本文由吳文俊翻译，原文地址 color names

标签： #css

> 分享并评论 Twitter / Facebook

> cd ..