这篇文章是针对自己封装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

相关文章推荐：

• Sass 内置函数总结
• sass 自定义函数
• sass 混入（mixin）

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 颜色设置

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 颜色获取

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 颜色操作

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内置颜色名

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