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

简介: 这篇文章是针对自己封装UI组件库的读者的,旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。

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


这篇文章是针对自己封装UI组件库的读者的,旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。


作者:jcLee95

迁移至☞阿里云博客

邮箱 :291148484@163.com
本文地址
- https://developer.aliyun.com/article/1212456
- 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
目录
相关文章
|
2月前
|
移动开发 JavaScript 前端开发
💻揭秘!如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心,通过随机生成的颜色矩阵和一个变化点,玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能,包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外,作者展示了使用Vue 3和TypeScript开发的代码实现,带领读者一步步深入了解游戏的逻辑与细节。
143 69
|
3月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
267 91
|
6月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
70 1
|
7月前
|
XML 前端开发 数据可视化
《CSS 简易速速上手小册》第4章:视觉美学(2024 最新版)
《CSS 简易速速上手小册》第4章:视觉美学(2024 最新版)
59 1
|
7月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(上)
【CSS进阶】巧用伪元素before和after制作绚丽效果
73 0
|
7月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(中)
【CSS进阶】巧用伪元素before和after制作绚丽效果
54 0
|
7月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
80 0
|
7月前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
44 0
|
7月前
|
前端开发
前端知识笔记(三十一)———css实现水波纹效果(水球图)
前端知识笔记(三十一)———css实现水波纹效果(水球图)
301 0
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh
CSS基础1 | 青训营笔记