sass笔记 - 实战中颜色的玩法总结
这篇文章是针对自己封装UI组件库的读者的,旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。
目 录
CSS
中已经提供了140 种颜色名称(参考附录一CSS颜色),可以直接作为颜色值。我们也可以自己定义和扩展用于SASS中的颜色变量:
// scss - 定义颜色变量
$black: #000000 !default;
$navy: #000080 !default;
$darkblue: #00008B !default;
$mediumblue: #0000CD !default;
$blue: #0000FF !default;
$darkgreen: #006400 !default;
$green: #008000 !default;
$teal: #008080 !default;
$darkcyan: #008B8B !default;
$deepskyblue: #00BFFF !default;
$darkturquoise: #00CED1 !default;
$mediumspringgreen: #00FA9A !default;
$lime: #00FF00 !default;
$springgreen: #00FF7F !default;
$aqua: #00456b !default;
$cyan: #00FFFF !default;
$midnightblue: #191970 !default;
$dodgerblue: #1E90FF !default;
$lightseagreen: #20B2AA !default;
$forestgreen: #228B22 !default;
$seagreen: #2E8B57 !default;
$darkslategray: #2F4F4F !default;
$limegreen: #32CD32 !default;
$mediumseagreen: #3CB371 !default;
$turquoise: #40E0D0 !default;
$royalblue: #4169E1 !default;
$steelblue: #4682B4 !default;
$mediumturquoise: #48D1CC !default;
$darkslateblue: #483D8B !default;
$indigo: #4B0082 !default;
$darkolivegreen: #556B2F !default;
$cadetblue: #5F9EA0 !default;
$cornflowerblue: #6495ED !default;
$mediumaquamarine: #66CDAA !default;
$dimgray: #696969 !default;
$slateblue: #6A5ACD !default;
$olivedrab: #6B8E23 !default;
$slategray: #708090 !default;
$lightslategray: #778899 !default;
$mediumslateblue: #7B68EE !default;
$lawngreen: #7CFC00 !default;
$chartreuse: #7FFF00 !default;
$aquamarine: #7FFFD4 !default;
$maroon: #800000 !default;
$purple: #800080 !default;
$olive: #808000 !default;
$gray: #808080 !default;
$lightskyblue: #87CEFA !default;
$skyblue: #87CEEB !default;
$blueviolet: #8A2BE2 !default;
$darkred: #8B0000 !default;
$darkmagenta: #8B008B !default;
$saddlebrown: #8B4513 !default;
$darkseagreen: #8FBC8F !default;
$lightgreen: #90EE90 !default;
$mediumpurple: #9370DB !default;
$darkviolet: #9400D3 !default;
$palegreen: #98FB98 !default;
$darkorchid: #9932CC !default;
$yellowgreen: #9ACD32 !default;
$sienna: #A0522D !default;
$brown: #A52A2A !default;
$darkgray: #A9A9A9 !default;
$lightblue: #ADD8E6 !default;
$greenyellow: #ADFF2F !default;
$paleturquoise: #AFEEEE !default;
$lightsteelblue: #B0C4DE !default;
$firebrick: #B22222 !default;
$darkgoldenrod: #B8860B !default;
$mediumorchid: #BA55D3 !default;
$rosybrown: #BC8F8F !default;
$darkkhaki: #BDB76B !default;
$indianred: #CD5C5C !default;
$goldenrod: #DAA520 !default;
$palevioletred: #DB7093 !default;
$crimson: #DC143C !default;
$lavender: #E6E6FA !default;
$darksalmon: #E9967A !default;
$palegoldenrod: #EEE8AA !default;
$lightcoral: #F08080 !default;
$aliceblue: #F0F8FF !default;
$honeydew: #F0FFF0 !default;
$wheat: #F5DEB3 !default;
$deeppink: #FF1493 !default;
$darkorange: #FF8C00 !default;
$gold: #FFD700 !default;
$peachpuff: #FFDAB9 !default;
$papayawhip: #FFEFD5 !default;
$powderblue: #B0E0E6 !default;
$chocolate: #D2691E !default;
$tan: #D2B48C !default;
$lightgray: #D3D3D3 !default;
$silver: #C0C0C0 !default;
$mediumvioletred: #C71585 !default;
$fuchsia: #C83293 !default;
$peru: #CD853F !default;
$thistle: #D8BFD8 !default;
$orchid: #DA70D6 !default;
$gainsboro: #DCDCDC !default;
$plum: #DDA0DD !default;
$burlywood: #DEB887 !default;
$lightcyan: #E0FFFF !default;
$violet: #EE82EE !default;
$khaki: #F0E68C !default;
$azure: #F0FFFF !default;
$beige: #F5F5DC !default;
$whitesmoke: #F5F5F5 !default;
$mintcream: #F5FFFA !default;
$ghostwhite: #F8F8FF !default;
$salmon: #FA8072 !default;
$sandybrown: #FAA460 !default;
$antiquewhite: #FAEBD7 !default;
$linen: #FAF0E6 !default;
$lightgoldenrodyellow: #FAFAD2 !default;
$oldlace: #FDF5E6 !default;
$red: #FF0000 !default;
$magenta: #FF00FF !default;
$orangered: #FF4500 !default;
$tomato: #FF6347 !default;
$hotpink: #FF69B4 !default;
$coral: #FF7F50 !default;
$lightsalmon: #FFA07A !default;
$orange: #FFA500 !default;
$lightpink: #FFB6C1 !default;
$pink: #FFC0CB !default;
$navajowhite: #FFDEAD !default;
$moccasin: #FFE4B5 !default;
$bisque: #FFE4C4 !default;
$mistyrose: #FFE4E1 !default;
$blanchedalmond: #FFEBCD !default;
$lavenderblush: #FFF0F5 !default;
$seashell: #FFF5EE !default;
$cornsilk: #FFF8DC !default;
$lemonchiffon: #FFFACD !default;
$floralwhite: #FFFAF0 !default;
$snow: #FFFAFA !default;
$yellow: #FFFF00 !default;
$lightyellow: #FFFFE0 !default;
$ivory: #FFFFF0 !default;
$white: #FFFFFF !default;
函数 |
描述 |
rgb (red, green, blue) |
创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色,而 G 是 “green” 绿色,B 是 “blue” 蓝色 |
rgba (red, green, blue, alpha) |
根据红、绿、蓝和透明度值创建一个颜色 |
hsl (hue, saturation, lightness) |
通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色 |
hsla (hue, saturation, lightness, alpha) |
通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色 |
grayscale (color) |
将一个颜色变成灰色,相当于 desaturate( color,100%) |
complement (color) |
返回一个补充色,相当于adjust-hue($color,180deg) |
invert (color, weight) |
返回一个反相色,红、绿、蓝色值倒过来,而透明度不变 |
创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色,而 G 是 “green” 绿色,B 是 “blue” 蓝色。例如:
通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色,例如:
hsl(120, 100%, 50%); // 绿色
hsl(120, 100%, 75%); // 浅绿色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔和的绿色
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); // 这里使用了 “关键词参数”
}
p {
color: red; }
/*# sourceMappingURL=test.css.map */
通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色。例如:
hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
将一个颜色变成灰色,相当于 desaturate( color,100%)
。例如:
grayscale(#7fffd4) // #c6c6c6
返回一个补充色,相当于adjust-hue($color,180deg)
。例如:
complement(#7fffd4) // #ff7faa
返回一个反相色,红、绿、蓝色值倒过来,而透明度不变。例如:
从一个颜色中获取其中红色值(0-255),例如SASS/SCSS:
从一个颜色中获取其中绿色值(0-255),例如SASS/SCSS:
green(#8c9918) /** 153 */
从一个颜色中获取其中蓝色值(0-255),例如SASS/SCSS:
返回颜色在 HSL 色值中的角度值 (0deg - 255deg),例如SASS/SCSS:
hue(#7544c4) /** 262.96875deg */
【注】
HSL 色彩模式通过对 色相
(H)、饱和度
(Saturation)、亮度
(Lightness)三个颜色通道 的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,亮度三个通道的颜色。
获取一个颜色的饱和度值(0% - 100%),例如SASS/SCSS:
saturation(#736191) /** 19.8347107438% */
获取一个颜色的亮度值(0% - 100%),例如SASS/SCSS:
lightness(#ab98c9) /** 69.2156862745% */
以0到1之间的数字返回 color 的 alpha 通道,例如SASS/SCSS:
alpha(rgba(#73d09a, .6)) /** 0.6 */
alpha(rgba(189, 174, 38, 0.8)) /** 0.8 */
【注】 阿尔法通道(α Channel或Alpha Channel)是指一张图片的 透明 和 半透明度。
例如 :
- 一个使用16位存储的图片,可能5位表示红色,5位表示绿色,5位表示蓝色,1位是阿尔法。 在这种情况下,它要么表示透明要么不是。
- 一个使用32位存储的图片,每8位表示红绿蓝,和阿尔法通道。在这种情况下,就不光可以表示透明还是不透明,阿尔法通道还可以表示256级的半透明度。
来源:【百度百科:alpha通道】
获取颜色透明度值(0-1),例如SASS/SCSS:
alpha(rgba(blue, .7)) /** 0.7 */
alpha(rgba(blue)) /** 0 */
函数 |
描述 |
mix (color1, color2, weight) |
把两种颜色混合起来。 |
adjust-hue (color, degrees) |
通过改变一个颜色的色相值(-360deg - 360deg),创建一个新的颜色 |
adjust-color (color, red, green, blue, hue, saturation, lightness, alpha) |
用于调整给定色彩的一个或多个属性值,包括 RGB 和 HSL 色彩的各项色值参数,另外还有 alpha 通道的取值。 |
change-color (color, red, green, blue, hue, saturation, lightness, alpha) |
与 adjust-color 类似,只是在该函数中传入的参数将直接替换原来的值,而不做任何的运算 |
scale-color (color, red, green, blue, saturation, lightness, alpha) |
另一种实用的颜色调节函数。
adjust-color 通过传入的参数简单的与本身的色值参数做加减,有时候可能会导致累加值溢出,当然,函数会把结果控制在有效的阈值内。 而 scale-color 函数则避免了这种情况,可以不必担心溢出,让参数在阈值范围内进行有效的调节。 |
desaturate (color, amount) |
调低一个颜色的饱和度后产生一个新的色值。 同样,饱和度的取值区间在 0% ~ 100%。等同于 adjust-color (color, saturation: -amount) |
opacify (color, amount) |
降低颜色的透明度,取值在 0-1 之。等价于 adjust-color(color, alpha: amount) |
fade-in (color, amount) |
降低颜色的透明度,取值在 0-1 之。等价于 adjust-color(color, alpha: amount) |
transparentize (color, amount) |
提升颜色的透明度,取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount) |
fade-out (color, amount) |
提升颜色的透明度,取值在 0-1 之间。等价于 adjust-color(color, alpha: -amount) |
把两种颜色混合起来。参数必须是 0% 到 100%。默认 weight 为 50%,表明新颜色各取 50% color1 和 color2 的色值相加。
如果 weight 为 25%,那表明新颜色为 25% color1 和 75% color2 的色值相加。
// 给一种颜色上色: 将一种颜色与白色混合
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
// 给颜色加阴影:将一种颜色与黑色混合
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
通过改变一个颜色的色相值(-360deg - 360deg),创建一个新的颜色。例如:
adjust-hue(#7fffd4, 80deg) // #8080ff
这个函数能够调整给定色彩的一个或多个属性值,包括 RGB 和 HSL 色彩的各项色值参数,另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数,通过这些参数再与给定颜色相应的色彩值做加减运算。
例如:
adjust-color(#6b717f, $red: 15) // #7a717f
跟上面 adjust-color 类似,只是在该函数中传入的参数将直接替换原来的值,而不做任何的运算。例如:
change-color(#7fffd4, red: 255) // #ffffd4
另一种实用的颜色调节函数。adjust-color
通过传入的参数简单的与本身的色值参数做加减,有时候可能会导致累加值溢出,当然,函数会把结果控制在有效的阈值内。而 scale-color
函数则避免了这种情况,可以不必担心溢出,让参数在阈值范围内进行有效的调节。
所有传参的取值范围都在 0% ~ 100% 之间,并且 RGB 同 HSL 的传参不能冲突。
scale-color(hsl(120, 70%, 80%), $lightness: 50%) => hsl(120, 70%, 90%)
scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229)
scale-color(hsl(200, 70%, 80%), $saturation: -90%, $alpha: -30%) => hsla(200, 7%, 80%, 0.7)
降低
一个颜色的**饱和度
**后产生一个新的色值。同样,饱和度的取值区间在 0% ~ 100%。等同于 adjust-color
(color, saturation: -amount)。
desaturate(#965f34, 20%) /** #826148 */
opacify(rgba(10, 197, 0, 0.6), .1) /** rgba(10, 197, 0, 0.7) */
opacify(rgba(10, 197, 0), .1) /** Error: wrong number of arguments (3 for 4) for `rgba' */
opacify(#cdcdcd, .1) /** 无改变:#cdcdcd */
opacify(red, .1) /** 无改变:red */
/** 用一个颜色着色: 将一个颜色与白色混合 */
@function tint-color($color, $weight) {
@return mix(white, $color, $weight);
}
/** 用一个颜色描影(Shade): 将一个颜色与灰色混合 */
@function shade-color($color, $weight) {
@return mix(black, $color, $weight);
}
用JavaScript / TypeScript 实现:
// element UI中使用就是这个方法
export function calcColorChannels(c: string) {
// 从字符串中移除前导空格和尾随空格以及行终止符,在将#号去掉,得到纯十六进制数字颜色值
let rawColor = c.trim().replace('#', '')
if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
rawColor =
rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2)
}
if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
return {
red: parseInt(rawColor.slice(0, 2), 16),
green: parseInt(rawColor.slice(2, 4), 16),
blue: parseInt(rawColor.slice(4, 6), 16),
}
}
return {
red: 255,
green: 255,
blue: 255,
}
}
export function mixColor(color: string, percent = 0.2) {
let { red, green, blue } = calcColorChannels(color)
if (percent > 0) {
/** 颜色加黑 */
red *= 1 - percent
green *= 1 - percent
blue *= 1 - percent
} else {
/** 颜色加量 */
const value = Math.abs(percent)
red += (255 - red) * Math.abs(percent)
green += (255 - green) * value
blue += (255 - blue) * value
}
return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`
}
/**颜色加亮 20%(混合白色) tint color */
export function lighten(color: string, percent = 0.2) {
return mixColor(color, -percent)
}
/**颜色加黑 20%(混合黑色) shade color */
export function darken(color: string, percent = 0.2) {
return mixColor(color, percent)
}
附录
颜色名 |
十六进制颜色值 |
颜色展示 |
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 |
|
DarkGreen |
#006400 |
|
DarkKhaki |
#BDB76B |
|
DarkMagenta |
#8B008B |
|
DarkOliveGreen |
#556B2F |
|
Darkorange |
#FF8C00 |
|
DarkOrchid |
#9932CC |
|
DarkRed |
#8B0000 |
|
DarkSalmon |
#E9967A |
|
DarkSeaGreen |
#8FBC8F |
|
DarkSlateBlue |
#483D8B |
|
DarkSlateGray |
#2F4F4F |
|
DarkTurquoise |
#00CED1 |
|
DarkViolet |
#9400D3 |
|
DeepPink |
#FF1493 |
|
DeepSkyBlue |
#00BFFF |
|
DimGray |
#696969 |
|
DodgerBlue |
#1E90FF |
|
Feldspar |
#D19275 |
|
FireBrick |
#B22222 |
|
FloralWhite |
#FFFAF0 |
|
ForestGreen |
#228B22 |
|
Fuchsia |
#FF00FF |
|
Gainsboro |
#DCDCDC |
|
GhostWhite |
#F8F8FF |
|
Gold |
#FFD700 |
|
GoldenRod |
#DAA520 |
|
Gray |
#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 |
|
LightGrey |
#D3D3D3 |
|
LightGreen |
#90EE90 |
|
LightPink |
#FFB6C1 |
|
LightSalmon |
#FFA07A |
|
LightSeaGreen |
#20B2AA |
|
LightSkyBlue |
#87CEFA |
|
LightSlateBlue |
#8470FF |
|
LightSlateGray |
#778899 |
|
LightSteelBlue |
#B0C4DE |
|
LightYellow |
#FFFFE0 |
|
Lime |
#00FF00 |
|
LimeGreen |
#32CD32 |
|
Linen |
#FAF0E6 |
|
Magenta |
#FF00FF |
|
Maroon |
#800000 |
|
MediumAquaMarine |
#66CDAA |
|
MediumBlue |
#0000CD |
|
MediumOrchid |
#BA55D3 |
|
MediumPurple |
#9370D8 |
|
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 |
#D87093 |
|
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 |
|
Snow |
#FFFAFA |
|
SpringGreen |
#00FF7F |
|
SteelBlue |
#4682B4 |
|
Tan |
#D2B48C |
|
Teal |
#008080 |
|
Thistle |
#D8BFD8 |
|
Tomato |
#FF6347 |
|
Turquoise |
#40E0D0 |
|
Violet |
#EE82EE |
|
VioletRed |
#D02090 |
|
Wheat |
#F5DEB3 |
|
White |
#FFFFFF |
|
WhiteSmoke |
#F5F5F5 |
|
Yellow |
#FFFF00 |
|
YellowGreen |
#9ACD32 |
|
颜色名 |
十六进制颜色值 |
颜色展示 |
black |
#000000 |
|
navy |
#000080 |
|
darkblue |
#00008B |
|
mediumblue |
#0000CD |
|
blue |
#0000FF |
|
darkgreen |
#006400 |
|
green |
#008000 |
|
teal |
#008080 |
|
darkcyan |
#008B8B |
|
deepskyblue |
#00BFFF |
|
darkturquoise |
#00CED1 |
|
mediumspringgreen |
#00FA9A |
|
lime |
#00FF00 |
|
springgreen |
#00FF7F |
|
aqua |
#00FFFF |
|
cyan |
#00FFFF |
|
midnightblue |
#191970 |
|
dodgerblue |
#1E90FF |
|
lightseagreen |
#20B2AA |
|
forestgreen |
#228B22 |
|
seagreen |
#2E8B57 |
|
darkslategray |
#2F4F4F |
|
limegreen |
#32CD32 |
|
mediumseagreen |
#3CB371 |
|
turquoise |
#40E0D0 |
|
royalblue |
#4169E1 |
|
steelblue |
#4682B4 |
|
mediumturquoise |
#48D1CC |
|
darkslateblue |
#483D8B |
|
indigo |
#4B0082 |
|
darkolivegreen |
#556B2F |
|
cadetblue |
#5F9EA0 |
|
cornflowerblue |
#6495ED |
|
mediumaquamarine |
#66CDAA |
|
dimgray |
#696969 |
|
slateblue |
#6A5ACD |
|
olivedrab |
#6B8E23 |
|
slategray |
#708090 |
|
lightslategray |
#778899 |
|
mediumslateblue |
#7B68EE |
|
lawngreen |
#7CFC00 |
|
chartreuse |
#7FFF00 |
|
aquamarine |
#7FFFD4 |
|
maroon |
#800000 |
|
purple |
#800080 |
|
olive |
#808000 |
|
gray |
#808080 |
|
lightskyblue |
#87CEFA |
|
skyblue |
#87CEEB |
|
blueviolet |
#8A2BE2 |
|
darkred |
#8B0000 |
|
darkmagenta |
#8B008B |
|
saddlebrown |
#8B4513 |
|
darkseagreen |
#8FBC8F |
|
lightgreen |
#90EE90 |
|
mediumpurple |
#9370DB |
|
darkviolet |
#9400D3 |
|
palegreen |
#98FB98 |
|
darkorchid |
#9932CC |
|
yellowgreen |
#9ACD32 |
|
sienna |
#A0522D |
|
brown |
#A52A2A |
|
darkgray |
#A9A9A9 |
|
lightblue |
#ADD8E6 |
|
greenyellow |
#ADFF2F |
|
paleturquoise |
#AFEEEE |
|
lightsteelblue |
#B0C4DE |
|
firebrick |
#B22222 |
|
darkgoldenrod |
#B8860B |
|
mediumorchid |
#BA55D3 |
|
rosybrown |
#BC8F8F |
|
darkkhaki |
#BDB76B |
|
indianred |
#CD5C5C |
|
goldenrod |
#DAA520 |
|
palevioletred |
#DB7093 |
|
crimson |
#DC143C |
|
lavender |
#E6E6FA |
|
darksalmon |
#E9967A |
|
palegoldenrod |
#EEE8AA |
|
lightcoral |
#F08080 |
|
aliceblue |
#F0F8FF |
|
honeydew |
#F0FFF0 |
|
wheat |
#F5DEB3 |
|
deeppink |
#FF1493 |
|
darkorange |
#FF8C00 |
|
gold |
#FFD700 |
|
peachpuff |
#FFDAB9 |
|
papayawhip |
#FFEFD5 |
|
powderblue |
#B0E0E6 |
|
chocolate |
#D2691E |
|
tan |
#D2B48C |
|
lightgray |
#D3D3D3 |
|
silver |
#C0C0C0 |
|
mediumvioletred |
#C71585 |
|
fuchsia |
#C83293 |
|
peru |
#CD853F |
|
thistle |
#D8BFD8 |
|
orchid |
#DA70D6 |
|
gainsboro |
#DCDCDC |
|
plum |
#DDA0DD |
|
burlywood |
#DEB887 |
|
lightcyan |
#E0FFFF |
|
violet |
#EE82EE |
|
khaki |
#F0E68C |
|
azure |
#F0FFFF |
|
beige |
#F5F5DC |
|
whitesmoke |
#F5F5F5 |
|
mintcream |
#F5FFFA |
|
ghostwhite |
#F8F8FF |
|
salmon |
#FA8072 |
|
sandybrown |
#FAA460 |
|
antiquewhite |
#FAEBD7 |
|
linen |
#FAF0E6 |
|
lightgoldenrodyellow |
#FAFAD2 |
|
oldlace |
#FDF5E6 |
|
red |
#FF0000 |
|
magenta |
#FF00FF |
|
orangered |
#FF4500 |
|
tomato |
#FF6347 |
|
hotpink |
#FF69B4 |
|
coral |
#FF7F50 |
|
lightsalmon |
#FFA07A |
|
orange |
#FFA500 |
|
lightpink |
#FFB6C1 |
|
pink |
#FFC0CB |
|
navajowhite |
#FFDEAD |
|
moccasin |
#FFE4B5 |
|
bisque |
#FFE4C4 |
|
mistyrose |
#FFE4E1 |
|
blanchedalmond |
#FFEBCD |
|
lavenderblush |
#FFF0F5 |
|
seashell |
#FFF5EE |
|
cornsilk |
#FFF8DC |
|
lemonchiffon |
#FFFACD |
|
floralwhite |
#FFFAF0 |
|
snow |
#FFFAFA |
|
yellow |
#FFFF00 |
|
lightyellow |
#FFFFE0 |
|
ivory |
#FFFFF0 |
|
white |
#FFFFFF |
|
评论(0)