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

置顶 jcLee95

已于 2023-06-09 21:12:29 修改

阅读量663

点赞数 1

分类专栏： css、sass 前端、桌面端、移动端、UI、构建工具文章标签： color sass scss UI CSS

于 2022-03-18 22:15:31 首次发布

本文链接：https://blog.csdn.net/qq_28550263/article/details/123460308

版权

前端、桌面端、移动端、UI、构建工具同时被 2 个专栏收录

173 篇文章 11 订阅

订阅专栏

css、sass

15 篇文章 3 订阅

订阅专栏

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

相关文章推荐：

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

函数	描述
`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 */

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

#F0F8FF

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

jcLee95

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
sass笔记 - 实战中颜色的玩法总结

sass实战 - 规范化颜色处理这篇文章是针对自己封装UI组件库的读者的，旨在为项目提供通用的颜色方案本文需要读者拥有CSS、SASS/SCSS相关基础知识。李俊才的 CSDN 博客CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343邮箱：291148484@163.com本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343相关文章推
复制链接

扫一扫