跳到主要内容

HTML 和 CSS 颜色名称

所有浏览器都能识别的命名颜色，例如 tomato 或 rebeccapurple，附可直接复制的 HEX、RGB、HSL 和 OKLCH 代码。

复制为

CSS 和 HTML 的 148 种命名颜色

在任何浏览器中只需写出名称即可使用，例如 color: tomato;。不区分大小写。

红色10

查看详情

  • IndianRed

    #CD5C5C

  • LightCoral

    #F08080

  • Salmon

    #FA8072

  • DarkSalmon

    #E9967A

  • LightSalmon

    #FFA07A

  • Crimson

    #DC143C

  • Red

    #FF0000

  • FireBrick

    #B22222

  • DarkRed

    #8B0000

  • Maroon

    #800000

橙色5

查看详情

  • Coral

    #FF7F50

  • Tomato

    #FF6347

  • OrangeRed

    #FF4500

  • DarkOrange

    #FF8C00

  • Orange

    #FFA500

黄色11

查看详情

  • Gold

    #FFD700

  • Yellow

    #FFFF00

  • LightYellow

    #FFFFE0

  • LemonChiffon

    #FFFACD

  • LightGoldenrodYellow

    #FAFAD2

  • PapayaWhip

    #FFEFD5

  • Moccasin

    #FFE4B5

  • PeachPuff

    #FFDAB9

  • PaleGoldenrod

    #EEE8AA

  • Khaki

    #F0E68C

  • DarkKhaki

    #BDB76B

绿色23

查看详情

  • GreenYellow

    #ADFF2F

  • Chartreuse

    #7FFF00

  • LawnGreen

    #7CFC00

  • Lime

    #00FF00

  • LimeGreen

    #32CD32

  • PaleGreen

    #98FB98

  • LightGreen

    #90EE90

  • MediumSpringGreen

    #00FA9A

  • SpringGreen

    #00FF7F

  • MediumSeaGreen

    #3CB371

  • SeaGreen

    #2E8B57

  • ForestGreen

    #228B22

  • Green

    #008000

  • DarkGreen

    #006400

  • YellowGreen

    #9ACD32

  • OliveDrab

    #6B8E23

  • Olive

    #808000

  • DarkOliveGreen

    #556B2F

  • MediumAquamarine

    #66CDAA

  • DarkSeaGreen

    #8FBC8F

  • LightSeaGreen

    #20B2AA

  • DarkCyan

    #008B8B

  • Teal

    #008080

青色8

查看详情

  • Aqua

    #00FFFF

  • Cyan

    #00FFFF

  • LightCyan

    #E0FFFF

  • PaleTurquoise

    #AFEEEE

  • Aquamarine

    #7FFFD4

  • Turquoise

    #40E0D0

  • MediumTurquoise

    #48D1CC

  • DarkTurquoise

    #00CED1

蓝色17

查看详情

  • CadetBlue

    #5F9EA0

  • SteelBlue

    #4682B4

  • LightSteelBlue

    #B0C4DE

  • PowderBlue

    #B0E0E6

  • LightBlue

    #ADD8E6

  • SkyBlue

    #87CEEB

  • LightSkyBlue

    #87CEFA

  • DeepSkyBlue

    #00BFFF

  • DodgerBlue

    #1E90FF

  • CornflowerBlue

    #6495ED

  • MediumSlateBlue

    #7B68EE

  • RoyalBlue

    #4169E1

  • Blue

    #0000FF

  • MediumBlue

    #0000CD

  • DarkBlue

    #00008B

  • Navy

    #000080

  • MidnightBlue

    #191970

紫色18

查看详情

  • Lavender

    #E6E6FA

  • Thistle

    #D8BFD8

  • Plum

    #DDA0DD

  • Violet

    #EE82EE

  • Orchid

    #DA70D6

  • Fuchsia

    #FF00FF

  • Magenta

    #FF00FF

  • MediumOrchid

    #BA55D3

  • MediumPurple

    #9370DB

  • RebeccaPurple

    #663399

  • BlueViolet

    #8A2BE2

  • DarkViolet

    #9400D3

  • DarkOrchid

    #9932CC

  • DarkMagenta

    #8B008B

  • Purple

    #800080

  • Indigo

    #4B0082

  • SlateBlue

    #6A5ACD

  • DarkSlateBlue

    #483D8B

粉色6

查看详情

  • Pink

    #FFC0CB

  • LightPink

    #FFB6C1

  • HotPink

    #FF69B4

  • DeepPink

    #FF1493

  • MediumVioletRed

    #C71585

  • PaleVioletRed

    #DB7093

棕色16

查看详情

  • Cornsilk

    #FFF8DC

  • BlanchedAlmond

    #FFEBCD

  • Bisque

    #FFE4C4

  • NavajoWhite

    #FFDEAD

  • Wheat

    #F5DEB3

  • BurlyWood

    #DEB887

  • Tan

    #D2B48C

  • RosyBrown

    #BC8F8F

  • SandyBrown

    #F4A460

  • Goldenrod

    #DAA520

  • DarkGoldenrod

    #B8860B

  • Peru

    #CD853F

  • Chocolate

    #D2691E

  • SaddleBrown

    #8B4513

  • Sienna

    #A0522D

  • Brown

    #A52A2A

白色17

查看详情

  • White

    #FFFFFF

  • Snow

    #FFFAFA

  • HoneyDew

    #F0FFF0

  • MintCream

    #F5FFFA

  • Azure

    #F0FFFF

  • AliceBlue

    #F0F8FF

  • GhostWhite

    #F8F8FF

  • WhiteSmoke

    #F5F5F5

  • Seashell

    #FFF5EE

  • Beige

    #F5F5DC

  • OldLace

    #FDF5E6

  • FloralWhite

    #FFFAF0

  • Ivory

    #FFFFF0

  • AntiqueWhite

    #FAEBD7

  • Linen

    #FAF0E6

  • LavenderBlush

    #FFF0F5

  • MistyRose

    #FFE4E1

灰色17

查看详情

  • Gainsboro

    #DCDCDC

  • LightGray

    #D3D3D3

  • LightGrey

    #D3D3D3

  • Silver

    #C0C0C0

  • DarkGray

    #A9A9A9

  • DarkGrey

    #A9A9A9

  • Gray

    #808080

  • Grey

    #808080

  • DimGray

    #696969

  • DimGrey

    #696969

  • LightSlateGray

    #778899

  • LightSlateGrey

    #778899

  • SlateGray

    #708090

  • SlateGrey

    #708090

  • DarkSlateGray

    #2F4F4F

  • DarkSlateGrey

    #2F4F4F

  • Black

    #000000

什么是 CSS 颜色名称

CSS 能识别 148 个颜色名称，例如 tomato、cornflowerblue 或 rebeccapurple。每个名称都对应一个固定的 HEX 代码，无需额外定义，在所有浏览器中效果一致。

它们比代码更易读，适合原型、示例和个别颜色。对于需要精确、一致色调的设计系统，最好还是使用 HEX、RGB 或 OKLCH。

CSS 颜色名称的趣闻

这份列表背后有一些历史，也有一些值得了解的怪异之处。

  • 最初只有 16 个

    HTML 4 只定义了 16 个名称，例如 navy、teal 或 olive。其余的后来才加入，继承自 X11 图形系统的颜色。

  • 148 个名称，139 种颜色

    有九对名称是同一种颜色：gray 和 grey（及其变体）、aqua 和 cyan，以及 fuchsia 和 magenta。

  • darkgray 比 gray 还浅

    由于继承自 X11，darkgray（#A9A9A9）反而比 gray（#808080）更浅。想要深灰色，请使用 dimgray。

  • rebeccapurple 的由来

    它于 2014 年加入，以纪念 CSS 领军人物 Eric Meyer 的女儿 Rebecca Meyer。这是近年来唯一新增的名称。

  • 不区分大小写

    tomato、Tomato 和 TOMATO 是同一种颜色。按惯例使用小写。

  • transparent 和 currentColor

    它们不在列表中，但同样是颜色关键字：transparent 完全透明，currentColor 使用元素的文字颜色。

常见问题

148 个名称，对应 139 种不同颜色，因为其中有九对别名（如 gray 和 grey）。从 red、blue 等基础色，到 mediumseagreen、rebeccapurple 等都有。

可以，直接写在任何颜色属性中即可，例如 color: tomato;，无需先转换为 HEX 或 RGB。

一样。CSS 对所有灰色都接受两种拼写（gray/grey、darkgray/darkgrey……），颜色完全相同。

因为名称来源不同：gray（#808080）来自最初的 HTML 列表，而 darkgray（#A9A9A9）继承自 X11 颜色，在 X11 中“gray”更浅。想要深灰色，请使用 dimgray（#696969）。

它是颜色 #663399，于 2014 年加入 CSS，以纪念 CSS 社区领军人物 Eric Meyer 的女儿 Rebecca Meyer。

不区分。Tomato、tomato 和 TOMATO 效果相同，不过通常写成小写。

是的，它们是 CSS 标准的一部分，所有现代浏览器都支持。

相关工具