CSS颜色代码大全

最后修改时间：2026年5月23日

本页整理了常用 CSS 颜色关键字，并提供对应的 HEX 与 RGB 数值，适合前端开发、UI 设计和网页配色参考。

你可以直接复制颜色关键字或代码，用于文字颜色、背景色和边框色设置。

  • 按颜色名称查询：保留英文关键字，例如 red、skyblue，可直接写入 CSS。
  • 按 HEX 查询：适合从设计稿、取色器或品牌色规范中复制颜色值。
  • 按 RGB 查询：适合需要透明度、脚本计算或与设计工具数值核对的场景。

CSS颜色格式说明

CSS 颜色常用三种写法：

十六进制：#RRGGBB

RGB：rgb(255, 165, 0)

关键字：orange

设置文字颜色

单个元素：

<p style="color:#FF0000;">一些文字...</p>

同类元素：

<style>
  p { color:#FF0000; }
</style>

效果预览：

一些文字...

设置背景颜色

单个元素：

<p style="background:#FF0000;">一些文字...</p>

同类元素：

<style>
  p { background:#FF0000; }
</style>

效果预览：

一些文字...

设置边框颜色

可按上、右、下、左四个方向分别设置：

selector { border-color: #FF0000 #00FF00 #0000FF #000000; }

示例：

<p style="border-style:solid;border-color:#FF0000 #00FF00 #0000FF #000000;">一些文字...</p>

效果预览：

一些文字...

红色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  lightsalmon #FFA07A rgb(255,160,122)
  salmon #FA8072 rgb(250,128,114)
  darksalmon #E9967A rgb(233,150,122)
  lightcoral #F08080 rgb(240,128,128)
  indianred #CD5C5C rgb(205,92,92)
  crimson #DC143C rgb(220,20,60)
  firebrick #B22222 rgb(178,34,34)
  red #FF0000 rgb(255,0,0)
  darkred #8B0000 rgb(139,0,0)

橙色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  coral #FF7F50 rgb(255,127,80)
  tomato #FF6347 rgb(255,99,71)
  orangered #FF4500 rgb(255,69,0)
  gold #FFD700 rgb(255,215,0)
  orange #FFA500 rgb(255,165,0)
  darkorange #FF8C00 rgb(255,140,0)

黄色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  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)
  yellow #FFFF00 rgb(255,255,0)

绿色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  lawngreen #7CFC00 rgb(124,252,0)
  chartreuse #7FFF00 rgb(127,255,0)
  limegreen #32CD32 rgb(50,205,50)
  lime #00FF00 rgb(0,255,0)
  forestgreen #228B22 rgb(34,139,34)
  green #008000 rgb(0,128,0)
  darkgreen #006400 rgb(0,100,0)
  greenyellow #ADFF2F rgb(173,255,47)
  yellowgreen #9ACD32 rgb(154,205,50)
  springgreen #00FF7F rgb(0,255,127)
  mediumspringgreen #00FA9A rgb(0,250,154)
  lightgreen #90EE90 rgb(144,238,144)
  palegreen #98FB98 rgb(152,251,152)
  darkseagreen #8FBC8F rgb(143,188,143)
  mediumseagreen #3CB371 rgb(60,179,113)
  seagreen #2E8B57 rgb(46,139,87)
  olive #808000 rgb(128,128,0)
  darkolivegreen #556B2F rgb(85,107,47)
  olivedrab #6B8E23 rgb(107,142,35)

青色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  lightcyan #E0FFFF rgb(224,255,255)
  cyan #00FFFF rgb(0,255,255)
  aqua #00FFFF rgb(0,255,255)
  aquamarine #7FFFD4 rgb(127,255,212)
  mediumaquamarine #66CDAA rgb(102,205,170)
  paleturquoise #AFEEEE rgb(175,238,238)
  turquoise #40E0D0 rgb(64,224,208)
  mediumturquoise #48D1CC rgb(72,209,204)
  darkturquoise #00CED1 rgb(0,206,209)
  lightseagreen #20B2AA rgb(32,178,170)
  cadetblue #5F9EA0 rgb(95,158,160)
  darkcyan #008B8B rgb(0,139,139)
  teal #008080 rgb(0,128,128)

蓝色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  powderblue #B0E0E6 rgb(176,224,230)
  lightblue #ADD8E6 rgb(173,216,230)
  lightskyblue #87CEFA rgb(135,206,250)
  skyblue #87CEEB rgb(135,206,235)
  deepskyblue #00BFFF rgb(0,191,255)
  lightsteelblue #B0C4DE rgb(176,196,222)
  dodgerblue #1E90FF rgb(30,144,255)
  cornflowerblue #6495ED rgb(100,149,237)
  steelblue #4682B4 rgb(70,130,180)
  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)
  mediumslateblue #7B68EE rgb(123,104,238)
  slateblue #6A5ACD rgb(106,90,205)
  darkslateblue #483D8B rgb(72,61,139)

紫色系列

颜色 HTML / CSS
 颜色名称		 十六进制代码
 #RRGGBB		 RGB 十进制代码
(R, G, B)
  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)
  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)

粉色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  pink #FFC0CB rgb(255,192,203)
  lightpink #FFB6C1 rgb(255,182,193)
  hotpink #FF69B4 rgb(255,105,180)
  deeppink #FF1493 rgb(255,20,147)
  palevioletred #DB7093 rgb(219,112,147)
  mediumvioletred #C71585 rgb(199,21,133)

白色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  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)

灰色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  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)

棕色系列

颜色 HTML / CSS
颜色关键字		 十六进制代码
#RRGGBB		 RGB 十进制代码
(R, G, B)
  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)
  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)

常见问题

  • CSS 颜色关键字可以直接用于样式吗？ 可以，示例：color:red; 或 background:skyblue;。
  • 为什么同时提供 HEX 和 RGB？ 两种写法都常用：HEX 更简洁，RGB 在与设计稿或脚本联动时更直观。
  • 页面里的颜色名称为什么保留英文？ 这些是 CSS 标准关键字，保留英文可直接复制使用，避免翻译歧义。

提示：如果需要透明度，可在 RGB 的基础上改用 rgba(255,0,0,.5) 或现代 CSS 的 rgb(255 0 0 / 50%) 写法。

提示：移动端可左右滑动表格查看完整颜色列。

相关CSS教程

广告

CSS教程
站点信息