这篇文章是针对自己封装UI组件库的读者的,旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。
jack lee 的 个人 博客
CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/123350343
相关文章推荐:
1. 定义颜色变量
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;
2. Sass 颜色相关函数
2.1 Sass 颜色设置
函数 | 描述 |
---|---|
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) | 返回一个反相色,红、绿、蓝色值倒过来,而透明度不变 |
2.1.1 rgb
(red, green, blue)
创建一个 Red-Green-Blue (RGB) 色。其中 R 是 “red” 表示红色,而 G 是 “green” 绿色,B 是 “blue” 蓝色。例如:
rgb(0, 0, 255);
2.1.2 rgba
(red, green, blue, alpha)
根据红、绿、蓝和透明度值创建一个颜色。
例如:
rgba(0, 0, 255, 0.3);
2.1.3 hsl
(hue, saturation, lightness)
通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色,例如:
hsl(120, 100%, 50%); // 绿色
hsl(120, 100%, 75%); // 浅绿色
hsl(120, 100%, 25%); // dark green
hsl(120, 60%, 70%); // 柔和的绿色
再入scss:
p {
color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); // 这里使用了 “关键词参数”
}
编译成的CSS为:
p {
color: red; }
/*# sourceMappingURL=test.css.map */
2.1.4 hsla
(hue, saturation, lightness, alpha)
通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色。例如:
hsl(120, 100%, 50%, 0.3); // 绿色带有透明度
hsl(120, 100%, 75%, 0.3); // 浅绿色带有透明度
2.1.5 grayscale
(color)
将一个颜色变成灰色,相当于 desaturate( color,100%)
。例如:
grayscale(#7fffd4) // #c6c6c6
2.1.6 complement
(color)
返回一个补充色,相当于adjust-hue($color,180deg)
。例如:
complement(#7fffd4) // #ff7faa
2.1.7 invert
(color, weight)
返回一个反相色,红、绿、蓝色值倒过来,而透明度不变。例如:
invert(white) // black
2.2 Sass 颜色获取
函数 | 描述 |
---|---|
red (color) | 从一个颜色中获取其中红色值(0-255) |
green (color) | 从一个颜色中获取其中绿色值(0-255) |
blue (color) | 从一个颜色中获取其中蓝色值(0-255) |
hue (color) | 返回颜色在 HSL 色值中的角度值 (0deg - 255deg) |
saturation (color) | 获取一个颜色的饱和度值(0% - 100%) |
lightness (color) | 获取一个颜色的亮度值(0% - 100%) |
alpha (color) | 以0到1之间的数字返回 color 的 alpha 通道 |
opacity (color) | 获取颜色透明度值(0-1) |
2.2.1 red
(color)
从一个颜色中获取其中红色值(0-255),例如SASS/SCSS:
red(#c7793e) /** 199 */
2.2.2 green
(color)
从一个颜色中获取其中绿色值(0-255),例如SASS/SCSS:
green(#8c9918) /** 153 */
2.2.3 blue
(color)
从一个颜色中获取其中蓝色值(0-255),例如SASS/SCSS:
blue(#007fd3) /** 211 */
2.2.4 hue
(color)
返回颜色在 HSL 色值中的角度值 (0deg - 255deg),例如SASS/SCSS:
hue(#7544c4) /** 262.96875deg */
【注】
HSL 色彩模式通过对色相
(H)、饱和度
(Saturation)、亮度
(Lightness)三个颜色通道 的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色相,饱和度,亮度三个通道的颜色。
2.2.5 saturation
(color)
获取一个颜色的饱和度值(0% - 100%),例如SASS/SCSS:
saturation(#736191) /** 19.8347107438% */
2.2.6 lightness
(color)
获取一个颜色的亮度值(0% - 100%),例如SASS/SCSS:
lightness(#ab98c9) /** 69.2156862745% */
2.2.7 alpha
(color)
以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级的半透明度。
2.2.8 opacity
(color)
获取颜色透明度值(0-1),例如SASS/SCSS:
alpha(rgba(blue, .7)) /** 0.7 */
alpha(rgba(blue)) /** 0 */
2.3 Sass 颜色操作
函数 | 描述 |
---|---|
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) |
2.3.1 mix
(color1, color2, weight)
把两种颜色混合起来。参数必须是 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);
}
2.3.2 adjust-hue
(color, degrees)
通过改变一个颜色的色相值(-360deg - 360deg),创建一个新的颜色。例如:
adjust-hue(#7fffd4, 80deg) // #8080ff
2.3.3 adjust-color
(color, red, green, blue, hue, saturation, lightness, alpha)
这个函数能够调整给定色彩的一个或多个属性值,包括 RGB 和 HSL 色彩的各项色值参数,另外还有 alpha 通道的取值。这些属性值的调整依赖传入的关键值参数,通过这些参数再与给定颜色相应的色彩值做加减运算。
例如:
adjust-color(#6b717f, $red: 15) // #7a717f
2.3.4 change-color
(color, red, green, blue, hue, saturation, lightness, alpha)
跟上面 adjust-color 类似,只是在该函数中传入的参数将直接替换原来的值,而不做任何的运算。例如:
change-color(#7fffd4, red: 255) // #ffffd4
2.3.5 scale-color
(color, red, green, blue, saturation, lightness, alpha)
另一种实用的颜色调节函数。adjust-color
通过传入的参数简单的与本身的色值参数做加减,有时候可能会导致累加值溢出,当然,函数会把结果控制在有效的阈值内。而 scale-color
函数则避免了这种情况,可以不必担心溢出,让参数在阈值范围内进行有效的调节。
举个例子,一个颜色的亮度 lightness 取值在 0% ~ 100% 之间,假如执行 scale-color
($color, $lightness: 40%),表明该颜色的亮度将有 (100 - 原始值) × 40% 的增幅。
另一个例子,执行scale-color
($color, $lightness: -40%),表明这个颜色的亮度将减少 (原始值 - 0) × 40% 这么多的值。
所有传参的取值范围都在 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)
2.3.6 desaturate
(color, amount)
降低
一个颜色的**饱和度
**后产生一个新的色值。同样,饱和度的取值区间在 0% ~ 100%。等同于 adjust-color
(color, saturation: -amount)。
desaturate(#965f34, 20%) /** #826148 */
2.3.7 opacify
(color, amount)
降低
颜色的透明度
,取值在 0-1 之。等价于 adjust-color
(color, alpha: amount)
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 */
2.3.8 fade-in
(color, amount)
降低
颜色的 透明度
,取值在 0-1 之。等价于 adjust-color
(color, alpha: amount)
2.3.9 transparentize
(color, amount)
提升
颜色的 透明度
,取值在 0-1 之间。等价于 adjust-color
(color, alpha: -amount)
2.3.10 fade-out
(color, amount)
提升
颜色的 透明度
,取值在 0-1 之间。等价于 adjust-color
(color, alpha: -amount)
3. 混合颜色
/** 用一个颜色着色: 将一个颜色与白色混合 */
@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)
}
附录1:CSS内置颜色名
颜色名 | 十六进制颜色值 | 颜色展示 | |
---|---|---|---|
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 |
|
附录2:第1节中定义的SCSS颜色变量颜色值对照表
颜色名 | 十六进制颜色值 | 颜色展示 | |
---|---|---|---|
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 |
|