Visual Studio Code中CSS可用颜色列表查询

VS Code里的CSS颜色提示完全遵循W3C官方的CSS颜色标准，找颜色名称的规律和列表可以直接参考这套规范，具体如下：

颜色命名规律 #

• 基础色（16个）：CSS1标准定义的核心颜色，都是单词的简单名称，比如red、blue、yellow，是最容易通过IntelliSense筛选到的。
• 扩展色（139个）：CSS3新增的颜色，命名大多有规律：
  • 深浅修饰：比如lightblue、darkgreen、mediumpurple，用light/dark/medium这类词描述明度
  • 自然物关联：比如gold、seagreen、coral，用自然界的事物名称对应颜色
  • 色调组合：比如mediumvioletred、darkslategray，用多个色调词组合描述精准颜色
• 功能性颜色：transparent（全透明）、currentColor（继承当前文字颜色），这两个是特殊用途的颜色值

完整颜色列表 #

基础色 #

• aqua、black、blue、fuchsia、gray、green、lime、maroon
• navy、olive、purple、red、silver、teal、white、yellow

扩展色 #

• aliceblue、antiquewhite、aquamarine、azure、beige、bisque、blanchedalmond、blueviolet
• brown、burlywood、cadetblue、chartreuse、chocolate、coral、cornflowerblue、cornsilk
• crimson、cyan、darkblue、darkcyan、darkgoldenrod、darkgray、darkgreen、darkgrey
• darkkhaki、darkmagenta、darkolivegreen、darkorange、darkorchid、darkred、darksalmon、darkseagreen
• darkslateblue、darkslategray、darkslategrey、darkturquoise、darkviolet、deeppink、deepskyblue、dimgray
• dimgrey、dodgerblue、firebrick、floralwhite、forestgreen、gainsboro、ghostwhite、gold
• goldenrod、greenyellow、grey、honeydew、hotpink、indianred、indigo、ivory
• khaki、lavender、lavenderblush、lawngreen、lemonchiffon、lightblue、lightcoral、lightcyan
• lightgoldenrodyellow、lightgray、lightgreen、lightgrey、lightpink、lightsalmon、lightseagreen、lightskyblue
• lightslategray、lightslategrey、lightsteelblue、lightyellow、limegreen、linen、magenta、mediumaquamarine
• mediumblue、mediumorchid、mediumpurple、mediumseagreen、mediumslateblue、mediumspringgreen、mediumturquoise、mediumvioletred
• midnightblue、mintcream、mistyrose、moccasin、navajowhite、oldlace、olivedrab、orange
• orangered、orchid、palegoldenrod、palegreen、paleturquoise、palevioletred、papayawhip、peachpuff
• peru、pink、plum、powderblue、rosybrown、royalblue、saddlebrown、salmon
• sandybrown、seagreen、seashell、sienna、skyblue、slateblue、slategray、slategrey
• snow、springgreen、steelblue、tan、thistle、tomato、turquoise、violet
• wheat、whitesmoke、yellowgreen

实用小技巧 #

如果通过名称筛选找不到想要的颜色，直接输入十六进制（比如#ff0000）、RGB/RGBA（比如rgb(255,0,0)）值，VS Code会实时显示颜色预览；也可以点击编辑器中出现的颜色小方块，打开内置颜色拾取器直接选择，比搜名称更高效。

内容的提问来源于stack exchange，提问作者Octo Palm Tree