sass:color

Dart Sass: since 1.23.0
LibSass: ✗
Ruby Sass: ✗

Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead.

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

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

将 $color 的一项或多项属性增加或减少固定量。

¥Increases or decreases one or more properties of $color by fixed amounts.

将为每个关键字参数传递的值添加到颜色的相应属性，并返回调整后的颜色。同时指定 RGB 属性（$red、$green 和/或 $blue）与 HSL 属性（$hue、$saturation 和/或 $lightness），或者同时指定其中任何一个属性与 HWB 属性（ $hue、$whiteness 和/或 $blackness)。

¥Adds the value passed for each keyword argument to the corresponding property of the color, and returns the adjusted color. It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($hue, $saturation, and/or $lightness), or either of those at the same time as an HWB property ($hue, $whiteness, and/or $blackness).

所有可选参数都必须是数字。$red、$green 和 $blue 参数必须是无单位的且介于 -255 和 255（含）之间。$hue 参数必须有单位 deg 或没有单位。$saturation、$lightness、$whiteness 和 $blackness 参数必须介于 -100% 和 100%（含）之间，并且不能是无单位的。$alpha 参数必须是无单位的且介于 -1 和 1（含）之间。

¥All optional arguments must be numbers. The $red, $green, and $blue arguments must be unitless and between -255 and 255 (inclusive). The $hue argument must have either the unit deg or no unit. The $saturation, $lightness, $whiteness, and $blackness arguments must be between -100% and 100% (inclusive), and may not be unitless. The $alpha argument must be unitless and between -1 and 1 (inclusive).

也可以看看：

¥See also:

color.scale() 用于流畅缩放颜色属性。

¥color.scale() for fluidly scaling a color’s properties.
color.change() 用于设置颜色的属性。

¥color.change() for setting a color’s properties.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

@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)

  Sass Syntax@use 'sass:color'

@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($color, $degrees) //=> color

增加或减少 $color 的色调。

¥Increases or decreases $color’s hue.

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

¥The $hue must be a number between -360deg and 360deg (inclusive) to add to $color’s hue. It may be unitless but it may not have any unit other than deg.

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

¥See also color.adjust(), which can adjust any property of a color.

⚠️ Heads up!

Because `adjust-hue()` is redundant with [`adjust()`](#adjust), it's not
included directly in the new module system. Instead of `adjust-hue($color,
$amount)`, you can write [`color.adjust($color, $hue: $amount)`](#adjust).

  SCSS

  Sass

  SCSS Syntax// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066

  Sass Syntax// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066

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

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

¥Returns the alpha channel of $color as a number between 0 and 1.

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

¥As a special case, this supports the Internet Explorer syntax alpha(opacity=20), for which it returns an unquoted string.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

@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) //=> number

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

以 0% 和 100% 之间的数字形式返回 $color 的 HWB 黑度。

¥Returns the HWB blackness of $color as a number between 0% and 100%.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

以 0 到 255 之间的数字形式返回 $color 的蓝色通道。

¥Returns the blue channel of $color as a number between 0 and 255.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

将颜色的一个或多个属性设置为新值。

¥Sets one or more properties of a color to new values.

使用为每个关键字参数传递的值代替颜色的相应属性，并返回更改后的颜色。同时指定 RGB 属性（$red、$green 和/或 $blue）与 HSL 属性（$hue、$saturation 和/或 $lightness），或者同时指定其中任何一个属性与 HWB 属性（ $hue、$whiteness 和/或 $blackness)。

¥Uses the value passed for each keyword argument in place of the corresponding property of the color, and returns the changed color. It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($hue, $saturation, and/or $lightness), or either of those at the same time as an HWB property ($hue, $whiteness, and/or $blackness).

所有可选参数都必须是数字。$red、$green 和 $blue 参数必须是无单位的并且介于 0 和 255（含）之间。$hue 参数必须有单位 deg 或没有单位。$saturation、$lightness、$whiteness 和 $blackness 参数必须介于 0% 和 100%（含）之间，并且不能是无单位的。$alpha 参数必须无单位且介于 0 和 1（含）之间。

¥All optional arguments must be numbers. The $red, $green, and $blue arguments must be unitless and between 0 and 255 (inclusive). The $hue argument must have either the unit deg or no unit. The $saturation, $lightness, $whiteness, and $blackness arguments must be between 0% and 100% (inclusive), and may not be unitless. The $alpha argument must be unitless and between 0 and 1 (inclusive).

也可以看看：

¥See also:

color.scale() 用于流畅缩放颜色属性。

¥color.scale() for fluidly scaling a color’s properties.
color.adjust() 用于按固定量调整颜色的属性。

¥color.adjust() for adjusting a color’s properties by fixed amounts.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

@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)

  Sass Syntax@use 'sass:color'

@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) //=> color

返回 $color 的 RGB 补充。

¥Returns the RGB complement of $color.

这与 color.adjust($color, $hue: 180deg) 相同。

¥This is identical to color.adjust($color, $hue: 180deg).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// 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

  Sass Syntax@use 'sass:color'

// 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($color, $amount) //=> color

使 $color 变暗。

¥Makes $color darker.

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

¥The $amount must be a number between 0% and 100% (inclusive). Decreases the HSL lightness of $color by that amount.

⚠️ Heads up!

The `darken()` function decreases lightness by a fixed amount, which is
often not the desired effect. To make a color a certain percentage darker
than it was before, use [`color.scale()`](#scale) instead.
Because darken() is usually not the best way to make a color darker, it's
not included directly in the new module system. However, if you have to
preserve the existing behavior, darken($color, $amount) can be written
color.adjust($color, $lightness: -$amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// #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

  Sass Syntax@use 'sass:color'

// #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

  SCSS

  Sass

  SCSS Syntax// 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

  Sass Syntax// 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($color, $amount) //=> color

使 $color 的饱和度降低。

¥Makes $color less saturated.

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

¥The $amount must be a number between 0% and 100% (inclusive). Decreases the HSL saturation of $color by that amount.

⚠️ Heads up!

The `desaturate()` function decreases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage less
saturated than it was before, use [`color.scale()`](#scale) instead.
Because desaturate() is usually not the best way to make a color less
saturated, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, desaturate($color, $amount)
can be written color.adjust($color, $saturation: -$amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// #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

  Sass Syntax@use 'sass:color'

// #6b717f 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

  SCSS

  Sass

  SCSS Syntax// 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

  Sass Syntax// 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) //=> color

返回与 $color 具有相同亮度的灰色。

¥Returns a gray color with the same lightness as $color.

这与 color.change($color, $saturation: 0%) 相同。

¥This is identical to color.change($color, $saturation: 0%).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

以 0 到 255 之间的数字形式返回 $color 的绿色通道。

¥Returns the green channel of $color as a number between 0 and 255.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

以 0deg 和 360deg 之间的数字形式返回 $color 的色调。

¥Returns the hue of $color as a number between 0deg and 360deg.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

返回具有给定色相、白度和黑度和给定 alpha 通道的颜色。

¥Returns a color with the given hue, whiteness, and blackness and the given alpha channel.

色调是 0deg 到 360deg（含）之间的数字。白度和黑度是 0% 和 100%（含）之间的数字。色调可以是无单位的，但白度和黑度必须具有单位 %。Alpha 通道可以指定为 0 到 1（含）之间的无单位数字，或者 0% 到 100%（含）之间的百分比。

¥The hue is a number between 0deg and 360deg (inclusive). The whiteness and blackness are numbers between 0% and 100% (inclusive). The hue may be unitless, but the whiteness and blackness must have unit %. The alpha channel can be specified as either a unitless number between 0 and 1 (inclusive), or a percentage between 0% and 100% (inclusive).

⚠️ Heads up!

Sass's [special parsing rules][] for slash-separated values make it
difficult to pass variables for `$blackness` or `$alpha` when using the
`color.hwb($hue $whiteness $blackness / $alpha)` signature. Consider using
`color.hwb($hue, $whiteness, $blackness, $alpha)` instead.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

@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)

  Sass Syntax@use 'sass:color'

@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) //=> unquoted string

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

¥Returns an unquoted string that represents $color in the #AARRGGBB format expected by Internet Explorer’s -ms-filter property.

  SCSS

  Sass

  SCSS Syntax@use 'sass: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

  Sass Syntax@use 'sass: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, $weight: 100%)
invert($color, $weight: 100%) //=> color

返回 $color 的倒数或消极的。

¥Returns the inverse or negative of $color.

$weight 必须是介于 0% 和 100%（含）之间的数字。权重越高意味着结果越接近负数，权重越低意味着结果越接近 $color。重量 50% 总是会产生 #808080。

¥The $weight must be a number between 0% and 100% (inclusive). A higher weight means the result will be closer to the negative, and a lower weight means it will be closer to $color. Weight 50% will always produce #808080.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

使 $color 更轻。

¥Makes $color lighter.

$amount 必须是介于 0% 和 100%（含）之间的数字。将 $color 的 HSL 亮度增加相应数量。

¥The $amount must be a number between 0% and 100% (inclusive). Increases the HSL lightness of $color by that amount.

⚠️ Heads up!

The `lighten()` function increases lightness by a fixed amount, which is
often not the desired effect. To make a color a certain percentage lighter
than it was before, use [`scale()`](#scale) instead.
Because lighten() is usually not the best way to make a color lighter,
it's not included directly in the new module system. However, if you have to
preserve the existing behavior, lighten($color, $amount) can be written
adjust($color, $lightness: $amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// #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

  Sass Syntax@use 'sass:color'

// #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

  SCSS

  Sass

  SCSS Syntax// 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

  Sass Syntax// 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) //=> number

以 0% 和 100% 之间的数字形式返回 $color 的 HSL 亮度。

¥Returns the HSL lightness of $color as a number between 0% and 100%.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

返回 $color1 和 $color2 的混合颜色。

¥Returns a color that’s a mixture of $color1 and $color2.

$weight 和每种颜色的相对不透明度决定了每种颜色在结果中的含量。$weight 必须是介于 0% 和 100%（含）之间的数字。重量越大，表示应使用较多的 $color1，重量越小，表示应使用较多的 $color2。

¥Both the $weight and the relative opacity of each color determines how much of each color is in the result. The $weight must be a number between 0% and 100% (inclusive). A larger weight indicates that more of $color1 should be used, and a smaller weight indicates that more of $color2 should be used.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

@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)

  Sass Syntax@use 'sass:color'

@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($color, $amount)
fade-in($color, $amount) //=> color

使 $color 更加不透明。

¥Makes $color more opaque.

$amount 必须是介于 0 和 1（含）之间的数字。将 $color 的 Alpha 通道增加相应数量。

¥The $amount must be a number between 0 and 1 (inclusive). Increases the alpha channel of $color by that amount.

⚠️ Heads up!

The `opacify()` function increases the alpha channel by a fixed amount,
which is often not the desired effect. To make a color a certain percentage
more opaque than it was before, use [`scale()`](#scale) instead.
Because opacify() is usually not the best way to make a color more opaque,
it's not included directly in the new module system. However, if you have to
preserve the existing behavior, opacify($color, $amount) can be written
adjust($color, $alpha: -$amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// 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)

  Sass Syntax@use 'sass:color'

// 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)

  SCSS

  Sass

  SCSS Syntax@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

  Sass Syntax@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) //=> number

以 0 到 255 之间的数字形式返回 $color 的红色通道。

¥Returns the red channel of $color as a number between 0 and 255.

也可以看看：

¥See also:

color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

使 $color 更加饱和。

¥Makes $color more saturated.

$amount 必须是介于 0% 和 100%（含）之间的数字。将 $color 的 HSL 饱和度增加相应数量。

¥The $amount must be a number between 0% and 100% (inclusive). Increases the HSL saturation of $color by that amount.

⚠️ Heads up!

The `saturate()` function increases saturation by a fixed amount, which is
often not the desired effect. To make a color a certain percentage more
saturated than it was before, use [`scale()`](#scale) instead.
Because saturate() is usually not the best way to make a color more
saturated, it's not included directly in the new module system. However, if
you have to preserve the existing behavior, saturate($color, $amount) can
be written adjust($color, $saturation: $amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// #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

  Sass Syntax@use 'sass:color'

// #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

  SCSS

  Sass

  SCSS Syntax// 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

  Sass Syntax// 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) //=> number

以 0% 和 100% 之间的数字形式返回 $color 的 HSL 饱和度。

¥Returns the HSL saturation of $color as a number between 0% and 100%.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.blue() 用于获取颜色的蓝色通道。

¥color.blue() for getting a color’s blue channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.whiteness() 用于获取颜色的白度。

¥color.whiteness() for getting a color’s whiteness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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

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

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

流畅地缩放 $color 的一个或多个属性。

¥Fluidly scales one or more properties of $color.

每个关键字参数必须是 -100% 和 100%（含）之间的数字。这指示相应的属性应从其原始位置向最大值（如果参数为正）或最小值（如果参数为负）移动多远。这意味着，例如，$lightness: 50% 将使所有颜色 50% 更接近最大亮度，而不会使它们完全变成白色。

¥Each keyword argument must be a number between -100% and 100% (inclusive). This indicates how far the corresponding property should be moved from its original position towards the maximum (if the argument is positive) or the minimum (if the argument is negative). This means that, for example, $lightness: 50% will make all colors 50% closer to maximum lightness without making them fully white.

同时指定 RGB 属性（$red、$green 和/或 $blue）与 HSL 属性（$saturation 和/或 $lightness），或者同时指定其中任一属性与 HWB 属性（$whiteness、和/或 $blackness)。

¥It’s an error to specify an RGB property ($red, $green, and/or $blue) at the same time as an HSL property ($saturation, and/or $lightness), or either of those at the same time as an HWB property ($whiteness, and/or $blackness).

也可以看看：

¥See also:

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

¥color.adjust() for changing a color’s properties by fixed amounts.
color.change() 用于设置颜色的属性。

¥color.change() for setting a color’s properties.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

@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)

  Sass Syntax@use 'sass:color'

@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($color, $amount)
fade-out($color, $amount) //=> color

使 $color 更加透明。

¥Makes $color more transparent.

$amount 必须是介于 0 和 1（含）之间的数字。将 $color 的 Alpha 通道减少相应的量。

¥The $amount must be a number between 0 and 1 (inclusive). Decreases the alpha channel of $color by that amount.

⚠️ Heads up!

The `transparentize()` function decreases the alpha channel by a fixed
amount, which is often not the desired effect. To make a color a certain
percentage more transparent than it was before, use
[`color.scale()`](#scale) instead.
Because transparentize() is usually not the best way to make a color more
transparent, it's not included directly in the new module system. However,
if you have to preserve the existing behavior, transparentize($color, $amount) can be written color.adjust($color, $alpha: -$amount).

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

// 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)

  Sass Syntax@use 'sass:color'

// 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)

  SCSS

  Sass

  SCSS Syntax@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)

  Sass Syntax@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) //=> number

Dart Sass: since 1.28.0
LibSass: ✗
Ruby Sass: ✗

以 0% 和 100% 之间的数字形式返回 $color 的 HWB 白度。

¥Returns the HWB whiteness of $color as a number between 0% and 100%.

也可以看看：

¥See also:

color.red() 用于获取颜色的红色通道。

¥color.red() for getting a color’s red channel.
color.green() 用于获取颜色的绿色通道。

¥color.green() for getting a color’s green channel.
color.hue() 用于获取颜色的色调。

¥color.hue() for getting a color’s hue.
color.saturation() 用于获取颜色的饱和度。

¥color.saturation() for getting a color’s saturation.
color.lightness() 用于获取颜色的亮度。

¥color.lightness() for getting a color’s lightness.
color.blackness() 用于获取颜色的黑度。

¥color.blackness() for getting a color’s blackness.
color.alpha() 用于获取颜色的 Alpha 通道。

¥color.alpha() for getting a color’s alpha channel.

  SCSS

  Sass

  SCSS Syntax@use 'sass:color';

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

  Sass Syntax@use 'sass:color'

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