sass:color

color.adjust()

color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
adjust-color(...) //=> color

按固定数量，增加或减少 $color 的一个或多个属性。
将为每个关键字参数传递的值添加到颜色的相应属性，并返回调整后的颜色。在指定 RGB 属性（ $red 、 $green 和 $blue ）的同时指定 HSL 属性（ $hue 、 $saturation 和 $lightness ），或同时指定 HWB 属性（ $hue 、 $whiteness 和 $blackness ），是错误的。
所有可选参数必须是数字。 $red 、 $green 和 $blue 参数必须是无单位的，并且介于-255 和 255（包括-255 和 255）之间。 $hue 参数必须具有单位或没有单位。 $saturation 、 $lightness 、 $whiteness 和 $blackness 参数必须介于-100%和 100%（包括 100%）之间，并且不能是无单位的。 $alpha 参数必须是无单位的，并且介于-1 和 1（包括-1 和 1）之间。

也可以看看：


        color.scale()

，用于流畅地缩放颜色的属性。


        color.change()

，用于设置颜色的属性。

@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug color.adjust(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

adjust-hue()

adjust-hue($color, $degrees) //=> color

增加或减少 $color 的色调。

$hue 必须是介于-360 度和 360 度（含 360 度）之间的数字，才能添加到 $color 的色调中。它可以是无单位的，但不能有除度以外的任何单位。

另请参见 color.adjust() ，它可以调整颜色的任何属性。

⚠️注意！
因为 adjust-hue() 与 adjust() 是要被遗弃的，因此它没有直接包含在新的模块系统中。代替 adjust-hue ($color,$amount)，你可以写 color.adjust ($color,$hue:$amount) 。

color.alpha()

color.alpha($color)
alpha($color)
opacity($color) //=> number

$color 以 0 到 1 之间的数字的形式返回的 alpha 通道。

作为一种特殊情况，它支持 Internet Explorer 语法 alpha (opacity=20) ，为此它返回一个不带引号的字符串。

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。

@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)

color.blackness()

color.blackness($color) //=> number

将 $color 的 HWB 黑度返回为 0%到 100%之间的数字。

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%

color.blue()

color.blue($color)
blue($color) //=> number

将 $color 的蓝色通道返回为 0 到 255 之间的数字。

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0

color.change()

color.change($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
change-color(...) //=> color

将颜色的一个或多个属性设置为新值。
使用为每个关键字参数传递的值代替颜色的相应属性，并返回更改的颜色。在指定 RGB 属性（ $red 、 $green 和 $blue ）的同时指定 HSL 属性（ $hue 、 $saturation 和 $lightness ），或在指定 HWB 属性（ $hue 、 $whiteness 和 $blackness ）的同时指定其中一个属性是错误的。
所有可选参数必须是数字。 $red 、 $green 和 $blue 参数必须是无单位的，并且必须介于 0 和 255（包括 0 和 255）之间。$ $hue 参数必须具有单位或没有单位。 $saturation 、 $lightness 、 $whiteness 和 $blackness 参数必须介于-100%和 100%（包括 100%）之间，并且不能是无单位的。 $alpha 参数必须是无单位的，并且介于-1 和 1（包括-1 和 1）之间。

也可以看看：

color.adjust() ，用于按固定量更改颜色的属性。
color.change() ，用于设置颜色的属性。

@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug color.change(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)

color.complement()

color.complement($color)
complement($color) //=> color

返回 $color 的 RGB 补码。这与 color.adjust($color,$hue: 180deg) 。

// Hue 222deg becomes 42deg.
@debug color.complement(#6b717f); // #7f796b

// Hue 164deg becomes 344deg.
@debug color.complement(#d2e1dd); // #e1d2d6

// Hue 210deg becomes 30deg.
@debug color.complement(#036); // #663300

darken()

darken($color, $amount)  //=> color

使 $color 颜色更深。 $amount 必须是介于 0%和 100%（含 0%和 100%）之间的数字。将 $color 的 HSL 亮度减少该量。

该 darken() 函数将亮度降低一个固定的量，这通常不是预期的效果。要使颜色比以前暗一定百分比，请 color.scale() 改用。因为 darken() 通常不是使颜色变深的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有的行为， darken($color,$amount) 可以编写 color.adjust($color,$lightness:-$amount) 。

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

// Lightness 92% becomes 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% becomes 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% becomes 0%.
@debug darken(#036, 30%); // black

desaturate()

desaturate($color, $amount)  //=> color

使 $color 饱和度降低。 $amount 必须是介于 0%和 100%（含）之间的数字。将 HSL 饱和度降低 $color 该量。

该 desaturate() 功能将饱和度降低了一个固定量，这通常不是预期的效果。要使颜色的饱和度比以前低一定百分比，请改用 color.scale() 。因为 desaturate() 通常不是降低颜色饱和度的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有的行为， desaturate($color,$amount) 可以编写 color.adjust($color,$saturation:-$amount) 。

// #d2e1dd has saturation 20%, so when desaturate() subtracts 30% it just returns gray.
@debug desaturate(#d2e1dd, 30%); // #dadada

// scale() instead makes it 30% less saturated than it was originally.
@debug color.scale(#6b717f, $saturation: -30%); // #6e727c

// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada

color.grayscale()

color.grayscale($color)
grayscale($color)   //=> color

返回与 $color 具有相同亮度的灰色。这与 color.change($color,$saturation: 0%) 相同。

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(#d2e1dd); // #dadada
@debug color.grayscale(#036); // #333333

color.green()

color.green($color)
green($color)   //=> number

返回 $color

也可以看看：

color.red() ，用于获取颜色的红色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0

color.hue()

color.hue($color)
hue($color)   //=> number

将 $color 的色调作为介于 0 度和 360 度之间的数字返回。

也可以看看：

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg

color.hwb()

color.hwb($hue $whiteness $blackness)
color.hwb($hue $whiteness $blackness / $alpha)
color.hwb($hue, $whiteness, $blackness, $alpha: 1) //=> color

返回具有给定色调、白度和黑度以及给定 alpha 通道的颜色。色调是介于 0 度和 360 度（包括 0 度和 360 度）之间的数字。白度和黑度是介于 0%和 100%（包括 0%和 100%）之间的数字。色调可以是无单位的，但白度和黑度必须有单位%。alpha 通道可以指定为 0 到 1（含）之间的无单位数，或 0%到 100%（含）之间的百分比。

⚠️注意！
Sass 针对斜杠分隔值的特殊解析规则使得在使用颜色时很难传递 $blackness 或 $alpha 的变量。 color.hwb($hue $whiteness $blackness /$alpha) 签名。考虑使用 color.hwb($hue,$whiteness,$blackness,$alpha)

@debug color.hwb(210, 0%, 60%); // #036
@debug color.hwb(34, 89%, 5%); // #f2ece4
@debug color.hwb(210 0% 60% / 0.5); // rgba(0, 51, 102, 0.5)

color.ie-hex-str()

color.ie-hex-str($color)
ie-hex-str($color) //=> unquoted string

返回一个不带引号的字符串，该字符串表示 Internet Explorer 的 -ms-filter 属性所需的 #AARRGGBB 格式的 $color 。

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(#808c99); // #FF808C99
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4

color.invert()

color.invert($color, $weight: 100%)
invert($color, $weight: 100%) //=> color

返回 $color 的倒数或负数。 $weight 必须是介于 0%和 100%（含）之间的数字。权重越高，结果越接近负数；权重越低，结果越接近$color。 $weight 50%将始终产生 #808080 。

@debug color.invert(#b37399); // #4c8c66
@debug color.invert(black); // white
@debug color.invert(#550e0c, 20%); // #663b3a

lighten()

lighten($color, $amount) //=> color

使 $color 颜色更浅。 $amount 必须是介于 0%和 100%之间的数字（包括 0%和 100%）。将 $color 的 HSL 亮度增加该数量。

⚠️注意！
lighten() 函数的作用是增加一定量的亮度，这通常不是理想的效果。要使颜色比以前亮一定百分比，请改用 scale() 。由于 lighten() 通常不是使颜色变浅的最佳方法，因此它没有直接包含在新的模块系统中。但是，如果您必须保留现有行为，则可以将 lighte($color$amount) 写入 adjust($color,$lightness:$amount) 。

// #e1d7d2 has lightness 85%, so when lighten() adds 30% it just returns white.
@debug lighten(#e1d7d2, 30%); // white

// scale() instead makes it 30% lighter than it was originally.
@debug color.scale(#e1d7d2, $lightness: 30%); // #eae3e0

// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%); // white

color.lightness()

color.lightness($color)
lightness($color)  //=> number

将 $color 的 HSL 亮度返回为 0%到 100%之间的数字。

也可以看看：

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.lightness(#e1d7d2); // 85.2941176471%
@debug color.lightness(#f2ece4); // 92.1568627451%
@debug color.lightness(#dadbdf); // 86.4705882353%

color.mix()

color.mix($color1, $color2, $weight: 50%)
mix($color1, $color2, $weight: 50%)  //=> color

返回混合了 $color1 和 $color2 的颜色。每种颜色的 $weight 和相对不透明度都决定了结果中每种颜色的数量。 $weight 必须是一个介于 0%和 100%（包括 0%和 100%）之间的数字。较大的权重表示 $color1 应该使用更多的权重，较小的权重表示 $color2 应该使用更多的权重。

@debug color.mix(#036, #d2e1dd); // #698aa2
@debug color.mix(#036, #d2e1dd, 75%); // #355f84
@debug color.mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug color.mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

opacify()

opacify($color, $amount)
fade-in($color, $amount) //=> color

变得 $color 更加不透明。 $amount 必须是介于 0 和 1（含）之间的数字。将 $color 的 alpha 通道增加该数量。

⚠️注意！
opacify() 函数将 alpha 通道增加固定量，这通常不是理想的效果。要使颜色比以前更不透明，使用百分比，请改用 scale() 。因为 opacify() 通常不是使颜色更不透明的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有的行为， opacify($color,$amount) 可以编写 adjust($color,$alpha:-$amount) 。

// rgba(#036, 0.7) has alpha 0.7, so when opacify() adds 0.3 it returns a fully opaque color.
@debug opacify(rgba(#036, 0.7), 0.3); // #036

// scale() instead makes it 30% more opaque than it was originally.
@debug color.scale(rgba(#036, 0.7), $alpha: 30%); // rgba(0, 51, 102, 0.79)

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

color.red()

color.red($color)
red($color) //=> number

将 $color 的红色通道返回为 0 到 255 之间的数字。

也可以看看：

color.green() ，用于获得颜色的绿色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.red(#e1d7d2); // 225
@debug color.red(white); // 255
@debug color.red(black); // 0

saturate()

saturate($color, $amount) //=> color

使 $color 饱和度更高。 $amount 必须是介于 0%和 100%（包括 0%和 100%）之间的数字。将 HSL 饱和度增加 $color 该量。

⚠️注意！
saturate() 函数的作用是将饱和度增加一个固定的量，这通常不是预期的效果。要使颜色比以前更饱和一定百分比，请改用 scale() 。
因为 saturate() 通常不是使颜色更饱和的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有的行为， saturate($color,$amount) 可以编写 adjust($color,$saturation:$amount) .

// #0e4982 has saturation 80%, so when saturate() adds 30% it just becomes fully saturated.
@debug saturate(#0e4982, 30%); // #004990

// scale() instead makes it 30% more saturated than it was originally.
@debug color.scale(#0e4982, $saturation: 30%); // #0a4986

// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

color.saturation()

color.saturation($color)
saturation($color) //=> number

将 $color 的 HSL 饱和度返回为 0%到 100%之间的数字。

也可以看看：

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.blue() ，用于获取颜色的蓝色通道。
color.hue() ，用于获得颜色的色调。
color.lightness() ，以获得颜色的亮度。
color.whiteness() ，用于获得颜色的白度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.saturation(#e1d7d2); // 20%
@debug color.saturation(#f2ece4); // 30%
@debug color.saturation(#dadbdf); // 7.2463768116%

color.saturation()

color.scale($color,
  $red: null, $green: null, $blue: null,
  $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $alpha: null)
scale-color(...) //=> color

流畅地缩放 $color 的一个或多个属性。每个关键字参数必须是一个介于-100%和 100%（包括 100%）之间的数字。这表示对应属性应从其原始位置向最大值（如果参数为正）或最小值（如果参数为负）移动的距离。这意味着，例如， $lightness:50% ，将使所有颜色接近最大亮度的 50%，而不会使它们完全变白。

将 RGB 属性（ $red 、 $green 和 $blue ）与 HSL 属性（ $saturation 和 $lightness ）同时指定，或将其中任何一个属性与 HWB 属性（ $whiteness 和 $blackness ）同时指定其中任何一个都是错误的。

也可以看看：

color.adjust() ，用于按固定量更改颜色的属性。
color.change() ，用于设置颜色的属性。

@debug color.scale(#6b717f, $red: 15%); // #81717f
@debug color.scale(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
@debug color.scale(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

transparentize()

transparentize($color, $amount)
fade-out($color, $amount) //=> color

使 $color 变得更加透明。 $amount 必须是介于 0 和 1（含）之间的数字。将 $color 的 Alpha 通道减少该数量。

⚠️注意！
该 transparentize() 函数将 Alpha 通道减少一个固定的量，这通常不是我们想要的效果。要使颜色比以前更透明一定百分比，请改用 color.scale() 。
因为 transparentize() 通常不是使颜色更透明的最佳方法，所以它不直接包含在新模块系统中。但是，如果必须保留现有的行为， transparentize($color,$amount) 可以编写 color.adjust($color,$alpha:-$amount) 。

// rgba(#036, 0.3) has alpha 0.3, so when transparentize() subtracts 0.3 it returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)

@debug transparentize(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3)  // rgba(0, 51, 102, 0)

color.whiteness()

color.whiteness($color) //=> number

将 $color 的 HWB 白度返回为 0%到 100%之间的数字。

也可以看看：

color.red() ，用于获取颜色的红色通道。
color.green() ，用于获得颜色的绿色通道。
color.hue() ，用于获得颜色的色调。
color.saturation() ，用于获得颜色的饱和度。
color.lightness() ，以获得颜色的亮度。
color.blackness() ，用于获得颜色的黑度。
color.alpha() ，用于获取颜色的 Alpha 通道。

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

返回SCSS导航

sass:color

color.adjust()

adjust-hue()

color.alpha()

color.blackness()

color.blue()

color.change()

color.complement()

darken()

desaturate()

color.grayscale()

color.green()

color.hue()

color.hwb()

color.ie-hex-str()

color.invert()

lighten()

color.lightness()

color.mix()

opacify()

color.red()

saturate()

color.saturation()

color.saturation()

transparentize()

color.whiteness()