在前端开发中，颜色值是必不可少的。LESS 是一种 CSS 预处理器，在 LESS 中可以定义变量、嵌套、函数等特性，而颜色值是 LESS 中最常用的变量之一。在实际开发中，常常需要用到各种颜色，但是常常会因为颜色名称、缩写等容易出错，导致浪费时间。因此，本文将为大家整理 LESS 中常用的颜色值对照表，帮助大家快速找到所需要的颜色值。
LESS 所支持的颜色值格式
LESS 支持 CSS 中所有合法的颜色值格式，包括：
- HEX 格式：通过 3 个或 6 个十六进制数表示颜色值，如
#F60和#FF6600。 - RGB 格式：通过
rgb()函数表示颜色值，如rgb(255, 165, 0)。 - RGBA 格式：通过
rgba()函数表示颜色值，如rgba(255, 165, 0, .5)。 - HSL 格式：通过
hsl()函数表示颜色值，如hsl(39, 100%, 50%)。 - HSLA 格式：通过
hsla()函数表示颜色值，如hsla(39, 100%, 50%, .5)。 - 名称格式：通过名称表示颜色值，如
red、blue等。
在 LESS 中，我们可以定义颜色变量来存储颜色值，如：
@color-primary: #4d4d4d; @color-success: #5cb85c; @color-danger: #d9534f; @color-warning: #f0ad4e;
通过定义变量来存储颜色值，可以大大提高代码的可维护性。在 LESS 中，有一些颜色变量是预定义好的，因此可以直接使用，如：
-- -------------------- ---- ------- ----- -------- ------- -------- -------- -------- ------ -------- ------ -------- ------ -------- -------- -------- -------- -------- -------- ----- ------ ----- ------- ----- ------- -----展开代码
预定义的颜色变量可以免去我们手动定义颜色变量的步骤，而且可以保证预定义的颜色值都是比较合理的。
除了预定义的颜色变量外，LESS 还提供了一些函数来生成颜色变量，其中最常用的是 color 函数。color 函数可以按照 HSL 或 RGB 的方式生成颜色值，提供了非常方便的功能。例如，我们可以通过以下的方式定义一个随机颜色变量：
@random-color: spin(color(#000), 360);
这个变量的值就是一个随机生成的颜色值。同时，也可以使用 darken()、lighten() 等函数来对一个颜色进行深浅调整。
颜色名称对照表
在 LESS 中，除了预定义的颜色变量和 color 函数之外，还可以通过内置的颜色名称来表示颜色值。下面是 LESS 中常用的颜色名称对照表：
| 名称 | 颜色值 | 描述 |
|---|---|---|
| aliceblue | #f0f8ff | 淡蓝色 |
| antiquewhite | #faebd7 | 古董白 |
| aqua | #00ffff | 青色 |
| aquamarine | #7fffd4 | 蓝绿 |
| azure | #f0ffff | 蔚蓝色 |
| beige | #f5f5dc | 米色 |
| bisque | #ffe4c4 | 橘黄色 |
| black | #000000 | 黑色 |
| blanchedalmond | #ffebcd | 白杏色 |
| blue | #0000ff | 蓝色 |
| blueviolet | #8a2be2 | 蓝紫色 |
| brown | #a52a2a | 褐色 |
| burlywood | #deb887 | 褐土色 |
| cadetblue | #5f9ea0 | 军服蓝 |
| chartreuse | #7fff00 | 黄绿色 |
| chocolate | #d2691e | 巧克力色 |
| coral | #ff7f50 | 珊瑚色 |
| cornflowerblue | #6495ed | 矢车菊蓝 |
| cornsilk | #fff8dc | 玉米穗黄 |
| crimson | #dc143c | 深红色 |
| cyan | #00ffff | 青色 |
| darkblue | #00008b | 深蓝色 |
| darkcyan | #008b8b | 深青色 |
| darkgoldenrod | #b8860b | 深金黄 |
| darkgray | #a9a9a9 | 暗灰色 |
| darkgrey | #a9a9a9 | 暗灰色 |
| darkgreen | #006400 | 深绿色 |
| darkkhaki | #bdb76b | 深卡其色 |
| darkmagenta | #8b008b | 深品红 |
| darkolivegreen | #556b2f | 暗橄榄绿 |
| darkorange | #ff8c00 | 暗橙色 |
| darkorchid | #9932cc | 暗兰紫色 |
| darkred | #8b0000 | 深红色 |
| darksalmon | #e9967a | 暗肉色 |
| darkseagreen | #8fbc8f | 暗海绿色 |
| darkslateblue | #483d8b | 暗灰蓝色 |
| darkslategray | #2f4f4f | 暗灰色 |
| darkslategrey | #2f4f4f | 暗灰色 |
| darkturquoise | #00ced1 | 暗宝石绿 |
| darkviolet | #9400d3 | 暗紫色 |
| deeppink | #ff1493 | 深粉色 |
| deepskyblue | #00bfff | 深天蓝色 |
| dimgray | #696969 | 暗淡灰色 |
| dimgrey | #696969 | 暗淡灰色 |
| dodgerblue | #1e90ff | 道奇蓝 |
| firebrick | #b22222 | 火砖色 |
| floralwhite | #fffaf0 | 花白色 |
| forestgreen | #228b22 | 森林绿 |
| fuchsia | #ff00ff | 紫红色 |
| gainsboro | #dcdcdc | 淡灰色 |
| ghostwhite | #f8f8ff | 幽灵白 |
| gold | #ffd700 | 金色 |
| goldenrod | #daa520 | 金麒麟色 |
| gray | #808080 | 灰色 |
| grey | #808080 | 灰色 |
| green | #008000 | 绿色 |
| greenyellow | #adff2f | 黄绿色 |
| honeydew | #f0fff0 | 蜜色 |
| hotpink | #ff69b4 | 热粉色 |
| indianred | #cd5c5c | 印第安红 |
| indigo | #4b0082 | 靛蓝色 |
| ivory | #fffff0 | 象牙色 |
| khaki | #f0e68c | 卡其色 |
| lavender | #e6e6fa | 薰衣草紫 |
| lavenderblush | #fff0f5 | 淡紫红 |
| lawngreen | #7cfc00 | 草绿色 |
| lemonchiffon | #fffacd | 柠檬绸色 |
| lightblue | #add8e6 | 淡蓝色 |
| lightcoral | #f08080 | 淡珊瑚色 |
| lightcyan | #e0ffff | 淡青色 |
| lightgoldenrodyellow | #fafad2 | 淡金色 |
| lightgray | #d3d3d3 | 淡灰色 |
| lightgrey | #d3d3d3 | 淡灰色 |
| lightgreen | #90ee90 | 淡绿色 |
| lightpink | #ffb6c1 | 淡粉色 |
| lightsalmon | #ffa07a | 淡肉色 |
| lightseagreen | #20b2aa | 淡海绿色 |
| lightskyblue | #87cefa | 淡天蓝色 |
| lightslategray | #778899 | 淡暗灰色 |
| lightslategrey | #778899 | 淡暗灰色 |
| lightsteelblue | #b0c4de | 淡钢蓝色 |
| lightyellow | #ffffe0 | 浅黄色 |
| lime | #00ff00 | 青柠色 |
| limegreen | #32cd32 | 青柠绿色 |
| linen | #faf0e6 | 亚麻色 |
| magenta | #ff00ff | 洋红色 |
| maroon | #800000 | 栗色 |
| mediumaquamarine | #66cdaa | 中蓝绿色 |
| mediumblue | #0000cd | 中蓝色 |
| mediumorchid | #ba55d3 | 中兰紫色 |
| mediumpurple | #9370db | 中紫色 |
| mediumseagreen | #3cb371 | 中海绿色 |
| mediumslateblue | #7b68ee | 中暗蓝色 |
| mediumspringgreen | #00fa9a | 中春绿色 |
| mediumturquoise | #48d1cc | 中宝石绿 |
| mediumvioletred | #c71585 | 中紫罗兰色 |
| midnightblue | #191970 | 午夜蓝 |
| mintcream | #f5fffa | 薄荷乳白色 |
| mistyrose | #ffe4e1 | 浅玫瑰色 |
| moccasin | #ffe4b5 | 鹿皮色 |
| navajowhite | #ffdead | 纳瓦白 |
| navy | #000080 | 海军蓝 |
| oldlace | #fdf5e6 | 老花色 |
| olive | #808000 | 橄榄色 |
| olivedrab | #6b8e23 | 深橄榄绿色 |
| orange | #ffa500 | 橙色 |
| orangered | #ff4500 | 橙红色 |
| orchid | #da70d6 | 兰花紫色 |
| palegoldenrod | #eee8aa | 浅金色 |
| palegreen | #98fb98 | 苍绿色 |
| paleturquoise | #afeeee | 苍宝石绿 |
| palevioletred | #db7093 | 苍紫罗兰色 |
| papayawhip | #ffefd5 | 番木色 |
| peachpuff | #ffdab9 | 桃色 |
| peru | #cd853f | 秘鲁色 |
| pink | #ffc0cb | 粉红色 |
| plum | #dda0dd | 洋李色 |
| powderblue | #b0e0e6 | 淡粉蓝色 |
| purple | #800080 | 紫色 |
| red | #ff0000 | 红色 |
| rosybrown | #bc8f8f | 褐玫瑰红 |
| royalblue | #4169e1 | 皇家蓝 |
| saddlebrown | #8b4513 | 重褐色 |
| salmon | #fa8072 | 鲑鱼色 |
| sandybrown | #f4a460 | 沙褐色 |
| seagreen | #2e8b57 | 海绿色 |
| seashell | #fff5ee | 珊瑚白 |
| sienna | #a0522d | 黄土赭色 |
| silver | #c0c0c0 | 银色 |
| skyblue | #87ceeb | 天蓝色 |
| slateblue | #6a5acd | 石蓝色 |
| slategray | #708090 | 石板灰 |
| slategrey | #708090 | 石板灰 |
| snow | #fffafa | 雪白色 |
| springgreen | #00ff7f | 春绿色 |
| steelblue | #4682b4 | 钢蓝色 |
| tan | #d2b48c | 茶色 |
| teal | #008080 | 青色 |
| thistle | #d8bfd8 | 蓟色 |
| tomato | #ff6347 | 番茄红 |
| turquoise | #40e0d0 | 宝石绿 |
| violet | #ee82ee | 紫罗兰色 |
| wheat | #f5deb3 | 褐麦色 |
| white | #ffffff | 白色 |
| whitesmoke | #f5f5f5 | 烟白色 |
| yellow | #ffff00 | 黄色 |
| yellowgreen | #9acd32 | 黄绿色 |
示例代码
下面是一个 LESS 示例代码片段，展示了如何使用颜色变量以及如何使用 color 函数：
-- -------------------- ---- ------- --------------- -------- ----------------- ----- --------------- -------- -------------- -------- ------------ - ----------------- --------------- ------ --------------------- -------------- - -------------- - ----------------- ----------------- ------ ----------------------- ------------- - ------------ - ----------------- --------------- ------ --------------------- -------------- - ----------- - ----------------- -------------- ------ -------------------- -------------- -展开代码
在这个代码片段中，我们定义了四个颜色变量，分别用于指定不同按钮的主要颜色。在 .btn-primary 类样式中，我们使用了 @color-primary 变量作为背景色，同时使用 color 函数生成了一个稍微亮一点的颜色用于文字颜色。在其他类样式中，我们也使用了类似的方式。
通过这种方式，我们可以方便地管理颜色值，并且可以在一个地方对整个网站的颜色进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b69f2c306f20b3a62b4c6c
