sass笔记 - 实战中颜色的玩法总结

sass笔记 - 实战中颜色的玩法总结

这篇文章是针对自己封装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级的半透明度。

    来源:【百度百科:alpha通道】

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
#F0F8FF
AntiqueWhite#FAEBD7
#FAEBD7
Aqua#00FFFF
#00FFFF
Aquamarine#7FFFD4
#7FFFD4
Azure#F0FFFF
#F0F8FF
Beige#F5F5DC
#F5F5DC
Bisque#FFE4C4
#FFE4C4
Black#000000
#000000
BlanchedAlmond#FFEBCD
#FFEBCD
Blue#0000FF
#0000FF
BlueViolet#8A2BE2
#8A2BE2
Brown#A52A2A
#A52A2A
BurlyWood#DEB887
#DEB887
CadetBlue#5F9EA0
#5F9EA0
Chartreuse#7FFF00
#7FFF00
Chocolate#D2691E
#D2691E
Coral#FF7F50
#FF7F50
CornflowerBlue#6495ED
#6495ED
Cornsilk#FFF8DC
#FFF8DC
Crimson#DC143C
#DC143C
Cyan#00FFFF
#00FFFF
DarkBlue#00008B
#00008B
DarkCyan#008B8B
#008B8B
DarkGoldenRod#B8860B
#B8860B
DarkGray#A9A9A9
#A9A9A9
DarkGreen#006400
#006400
DarkKhaki#BDB76B
#BDB76B
DarkMagenta#8B008B
#8B008B
DarkOliveGreen#556B2F
#556B2F
Darkorange#FF8C00
#FF8C00
DarkOrchid#9932CC
#9932CC
DarkRed#8B0000
#8B0000
DarkSalmon#E9967A
#E9967A
DarkSeaGreen#8FBC8F
#8FBC8F
DarkSlateBlue#483D8B
#483D8B
DarkSlateGray#2F4F4F
#2F4F4F
DarkTurquoise#00CED1
#00CED1
DarkViolet#9400D3
#9400D3
DeepPink#FF1493
#FF1493
DeepSkyBlue#00BFFF
#00BFFF
DimGray#696969
#696969
DodgerBlue#1E90FF
#1E90FF
Feldspar#D19275
#D19275
FireBrick#B22222
#B22222
FloralWhite#FFFAF0
#FFFAF0
ForestGreen#228B22
#228B22
Fuchsia#FF00FF
#FF00FF
Gainsboro#DCDCDC
#DCDCDC
GhostWhite#F8F8FF
#F8F8FF
Gold#FFD700
#FFD700
GoldenRod#DAA520
#DAA520
Gray#808080
#808080
Green#008000
#008000
GreenYellow#ADFF2F
#ADFF2F
HoneyDew#F0FFF0
#F0FFF0
HotPink#FF69B4
#FF69B4
IndianRed#CD5C5C
#CD5C5C
Indigo#4B0082
#4B0082
Ivory#FFFFF0
#FFFFF0
Khaki#F0E68C
#F0E68C
Lavender#E6E6FA
#E6E6FA
LavenderBlush#FFF0F5
#FFF0F5
LawnGreen#7CFC00
#7CFC00
LemonChiffon#FFFACD
#FFFACD
LightBlue#ADD8E6
#ADD8E6
LightCoral#F08080
#F08080
LightCyan#E0FFFF
#E0FFFF
LightGoldenRodYellow#FAFAD2
#FAFAD2
LightGrey#D3D3D3
#D3D3D3
LightGreen#90EE90
#90EE90
LightPink#FFB6C1
#FFB6C1
LightSalmon#FFA07A
#FFA07A
LightSeaGreen#20B2AA
#20B2AA
LightSkyBlue#87CEFA
#87CEFA
LightSlateBlue#8470FF
#8470FF
LightSlateGray#778899
#778899
LightSteelBlue#B0C4DE
#B0C4DE
LightYellow#FFFFE0
#FFFFE0
Lime#00FF00
#00FF00
LimeGreen#32CD32
#32CD32
Linen#FAF0E6
#FAF0E6
Magenta#FF00FF
#FF00FF
Maroon#800000
#800000
MediumAquaMarine#66CDAA
#66CDAA
MediumBlue#0000CD
#0000CD
MediumOrchid#BA55D3
#BA55D3
MediumPurple#9370D8
#9370D8
MediumSeaGreen#3CB371
#3CB371
MediumSlateBlue#7B68EE
#7B68EE
MediumSpringGreen#00FA9A
#00FA9A
MediumTurquoise#48D1CC
#48D1CC
MediumVioletRed#C71585
#C71585
MidnightBlue#191970
#191970
MintCream#F5FFFA
#F5FFFA
MistyRose#FFE4E1
#FFE4E1
Moccasin#FFE4B5
#FFE4B5
NavajoWhite#FFDEAD
#FFDEAD
Navy#000080
#000080
OldLace#FDF5E6
#FDF5E6
Olive#808000
#808000
OliveDrab#6B8E23
#6B8E23
Orange#FFA500
#FFA500
OrangeRed#FF4500
#FF4500
Orchid#DA70D6
#DA70D6
PaleGoldenRod#EEE8AA
#EEE8AA
PaleGreen#98FB98
#98FB98
PaleTurquoise#AFEEEE
#AFEEEE
PaleVioletRed#D87093
#D87093
PapayaWhip#FFEFD5
#FFEFD5
PeachPuff#FFDAB9
#FFDAB9
Peru#CD853F
#CD853F
Pink#FFC0CB
#FFC0CB
Plum#DDA0DD
#DDA0DD
PowderBlue#B0E0E6
#B0E0E6
Purple#800080
#800080
Red#FF0000
#FF0000
RosyBrown#BC8F8F
#BC8F8F
RoyalBlue#4169E1
#4169E1
SaddleBrown#8B4513
#8B4513
Salmon#FA8072
#FA8072
SandyBrown#F4A460
#F4A460
SeaGreen#2E8B57
#2E8B57
SeaShell#FFF5EE
#FFF5EE
Sienna#A0522D
#A0522D
Silver#C0C0C0
#C0C0C0
SkyBlue#87CEEB
#87CEEB
SlateBlue#6A5ACD
#6A5ACD
SlateGray#708090
#708090
Snow#FFFAFA
#FFFAFA
SpringGreen#00FF7F
#00FF7F
SteelBlue#4682B4
#4682B4
Tan#D2B48C
#D2B48C
Teal#008080
#008080
Thistle#D8BFD8
#D8BFD8
Tomato#FF6347
#FF6347
Turquoise#40E0D0
#40E0D0
Violet#EE82EE
#EE82EE
VioletRed#D02090
#D02090
Wheat#F5DEB3
#F5DEB3
White#FFFFFF
#FFFFFF
WhiteSmoke#F5F5F5
#F5F5F5
Yellow#FFFF00
#FFFF00
YellowGreen#9ACD32
#9ACD32

附录2:第1节中定义的SCSS颜色变量颜色值对照表

颜色名十六进制颜色值颜色展示
black#000000
#000000
navy#000080
#000080
darkblue#00008B
#00008B
mediumblue#0000CD
#0000CD
blue#0000FF
#0000FF
darkgreen#006400
#006400
green#008000
#008000
teal#008080
#008080
darkcyan#008B8B
#008B8B
deepskyblue#00BFFF
#00BFFF
darkturquoise#00CED1
#00CED1
mediumspringgreen#00FA9A
#00FA9A
lime#00FF00
#00FF00
springgreen#00FF7F
#00FF7F
aqua#00FFFF
#00FFFF
cyan#00FFFF
#00FFFF
midnightblue#191970
#191970
dodgerblue#1E90FF
#1E90FF
lightseagreen#20B2AA
#20B2AA
forestgreen#228B22
#228B22
seagreen#2E8B57
#2E8B57
darkslategray#2F4F4F
#2F4F4F
limegreen#32CD32
#32CD32
mediumseagreen#3CB371
#3CB371
turquoise#40E0D0
#40E0D0
royalblue#4169E1
#4169E1
steelblue#4682B4
#4682B4
mediumturquoise#48D1CC
#48D1CC
darkslateblue#483D8B
#483D8B
indigo#4B0082
#4B0082
darkolivegreen#556B2F
#556B2F
cadetblue#5F9EA0
#5F9EA0
cornflowerblue#6495ED
#6495ED
mediumaquamarine#66CDAA
#66CDAA
dimgray#696969
#696969
slateblue#6A5ACD
#6A5ACD
olivedrab#6B8E23
#6B8E23
slategray#708090
#708090
lightslategray#778899
#778899
mediumslateblue#7B68EE
#7B68EE
lawngreen#7CFC00
#7CFC00
chartreuse#7FFF00
#7FFF00
aquamarine#7FFFD4
#7FFFD4
maroon#800000
#800000
purple#800080
#800080
olive#808000
#808000
gray#808080
#808080
lightskyblue#87CEFA
#87CEFA
skyblue#87CEEB
#87CEEB
blueviolet#8A2BE2
#8A2BE2
darkred#8B0000
#8B0000
darkmagenta#8B008B
#8B008B
saddlebrown#8B4513
#8B4513
darkseagreen#8FBC8F
#8FBC8F
lightgreen#90EE90
#90EE90
mediumpurple#9370DB
#9370DB
darkviolet#9400D3
#9400D3
palegreen#98FB98
#98FB98
darkorchid#9932CC
#9932CC
yellowgreen#9ACD32
#9ACD32
sienna#A0522D
#A0522D
brown#A52A2A
#A52A2A
darkgray#A9A9A9
#A9A9A9
lightblue#ADD8E6
#ADD8E6
greenyellow#ADFF2F
#ADFF2F
paleturquoise#AFEEEE
#AFEEEE
lightsteelblue#B0C4DE
#B0C4DE
firebrick#B22222
#B22222
darkgoldenrod#B8860B
#B8860B
mediumorchid#BA55D3
#BA55D3
rosybrown#BC8F8F
#BC8F8F
darkkhaki#BDB76B
#BDB76B
indianred#CD5C5C
#CD5C5C
goldenrod#DAA520
#DAA520
palevioletred#DB7093
#DB7093
crimson#DC143C
#DC143C
lavender#E6E6FA
#E6E6FA
darksalmon#E9967A
#E9967A
palegoldenrod#EEE8AA
#EEE8AA
lightcoral#F08080
#F08080
aliceblue#F0F8FF
#F0F8FF
honeydew#F0FFF0
#F0FFF0
wheat#F5DEB3
#F5DEB3
deeppink#FF1493
#FF1493
darkorange#FF8C00
#FF8C00
gold#FFD700
#FFD700
peachpuff#FFDAB9
#FFDAB9
papayawhip#FFEFD5
#FFEFD5
powderblue#B0E0E6
#B0E0E6
chocolate#D2691E
#D2691E
tan#D2B48C
#D2B48C
lightgray#D3D3D3
#D3D3D3
silver#C0C0C0
#C0C0C0
mediumvioletred#C71585
#C71585
fuchsia#C83293
#C83293
peru#CD853F
#CD853F
thistle#D8BFD8
#D8BFD8
orchid#DA70D6
#DA70D6
gainsboro#DCDCDC
#DCDCDC
plum#DDA0DD
#DDA0DD
burlywood#DEB887
#DEB887
lightcyan#E0FFFF
#E0FFFF
violet#EE82EE
#EE82EE
khaki#F0E68C
#F0E68C
azure#F0FFFF
#F0FFFF
beige#F5F5DC
#F5F5DC
whitesmoke#F5F5F5
#F5F5F5
mintcream#F5FFFA
#F5FFFA
ghostwhite#F8F8FF
#F8F8FF
salmon#FA8072
#FA8072
sandybrown#FAA460
#FAA460
antiquewhite#FAEBD7
#FAEBD7
linen#FAF0E6
#FAF0E6
lightgoldenrodyellow#FAFAD2
#FAFAD2
oldlace#FDF5E6
#FDF5E6
red#FF0000
#FF0000
magenta#FF00FF
#FF00FF
orangered#FF4500
#FF4500
tomato#FF6347
#FF6347
hotpink#FF69B4
#FF69B4
coral#FF7F50
#FF7F50
lightsalmon#FFA07A
#FFA07A
orange#FFA500
#FFA500
lightpink#FFB6C1
#FFB6C1
pink#FFC0CB
#FFC0CB
navajowhite#FFDEAD
#FFDEAD
moccasin#FFE4B5
#FFE4B5
bisque#FFE4C4
#FFE4C4
mistyrose#FFE4E1
#FFE4E1
blanchedalmond#FFEBCD
#FFEBCD
lavenderblush#FFF0F5
#FFF0F5
seashell#FFF5EE
#FFF5EE
cornsilk#FFF8DC
#FFF8DC
lemonchiffon#FFFACD
#FFFACD
floralwhite#FFFAF0
#FFFAF0
snow#FFFAFA
#FFFAFA
yellow#FFFF00
#FFFF00
lightyellow#FFFFE0
#FFFFE0
ivory#FFFFF0
#FFFFF0
white#FFFFFF
#FFFFFF
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jcLee95

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值