sass:color

Dart Sass: 自 1.23.0 版起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支持使用 @use 加载内置模块。其他实现的用户必须使用其全局名称调用函数。

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

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

Dart Sass: 自 1.28.0 版起
LibSass: ✗
Ruby Sass: ✗

将 $color 的一个或多个通道增加或减少固定量。

为每个关键字参数传递的值添加到颜色的相应通道，并返回调整后的颜色。默认情况下，这只能调整 $color 空间中的通道，但可以将不同的颜色空间作为 $space 传递以改为调整那里的通道。这始终返回与 $color 相同空间中的颜色。

⚠️ 注意！

出于历史原因，如果 $color 位于旧版颜色空间中，则可以调整任何旧版颜色空间通道。但是，同时指定 RGB 通道（$red、$green 和/或 $blue）和 HSL 通道（$hue、$saturation 和/或 $lightness），或者同时指定这些通道和 HWB 通道（$hue、$whiteness 和/或 $blackness）将导致错误。

即便如此，即使对于旧版颜色，最好也显式传递 $space。

所有通道参数必须为数字，并且必须是可以在颜色空间的构造函数中为这些通道传递的单位。如果现有通道值加上调整值超出通道的本机范围，则会对其进行钳位

对于 rgb 空间的红色、绿色和蓝色通道；
对于 lab、lch、oklab 和 oklch 空间的亮度通道；
对于 hsl、lch 和 oklch 空间的饱和度和色度通道的下限；
以及所有空间的 alpha 通道。

另请参阅

color.scale()，用于流畅地缩放颜色的属性。
color.change()，用于设置颜色的属性。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.adjust(#6b717f, $red: 15); // #7a717f
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20); // lab(50% 10 40)
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch);
// rgb(209.7987626149, 223.8632000471, 229.3988769575)

       游乐场Sass 语法@use 'sass:color'

@debug color.adjust(#6b717f, $red: 15)  // #7a717f
@debug color.adjust(lab(40% 30 40), $lightness: 10%, $a: -20)  // lab(50% 10 40)
@debug color.adjust(#d2e1dd, $hue: 45deg, $space: oklch)
// rgb(209.7987626149, 223.8632000471, 229.3988769575)

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

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

Dart Sass: 自 1.28.0 版起
LibSass: ✗
Ruby Sass: ✗

将颜色的一个或多个通道设置为新值。

使用为每个关键字参数传递的值替换相应的颜色通道，并返回更改后的颜色。默认情况下，这只能更改 $color 空间中的通道，但可以将不同的颜色空间作为 $space 传递以改为调整那里的通道。这始终返回与 $color 相同空间中的颜色。

⚠️ 注意！

出于历史原因，如果 $color 位于旧版颜色空间中，则可以更改任何旧版颜色空间通道。但是，同时指定 RGB 通道（$red、$green 和/或 $blue）和 HSL 通道（$hue、$saturation 和/或 $lightness），或者同时指定这些通道和 HWB 通道（$hue、$whiteness 和/或 $blackness）将导致错误。

即便如此，即使对于旧版颜色，最好也显式传递 $space。

所有通道参数必须为数字，并且必须是可以在颜色空间的构造函数中为这些通道传递的单位。对于 color.change()，通道永远不会被钳位。

另请参阅

color.scale()，用于流畅地缩放颜色的属性。
color.adjust()，用于通过固定量调整颜色的属性。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1);
// color(srgb 0.8 0.1 0.4)
@debug color.change(#998099, $lightness: 30%, $space: oklch);
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

       游乐场Sass 语法@use 'sass:color'

@debug color.change(#6b717f, $red: 100)  // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1)
// color(srgb 0.8 0.1 0.4)
@debug color.change(#998099, $lightness: 30%, $space: oklch)
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

color.channel($color, $channel, $space: null) //=> number

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $space 中 $channel 的值，默认为 $color 的空间。$channel 必须是带引号的字符串，而 $space 必须是不带引号的字符串。

这将为 hsl、hwb、lch 和 oklch 空间的 hue 通道返回带单位 deg 的数字。它将为 hsl、hwb、lab、lch、oklab 和 oklch 空间的 saturation、lightness、whiteness 和 blackness 通道返回带单位 % 的数字。对于所有其他通道，它将返回无单位的数字。

如果 $color 中缺少 $channel，则这将返回 0（可能带有适当的单位）。可以使用 color.is-missing() 显式检查缺少的通道。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25

       游乐场Sass 语法@use 'sass:color'

@debug color.channel(hsl(80deg 30% 50%), "hue")  // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch)  // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb)  // 140.25

color.complement($color, $space: null)
complement($color, $space: null) //=> color

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $space 中 $color 的补色。

这将在 $space 中将 $color 的色相旋转 180deg。这意味着 $space 必须是极坐标颜色空间：hsl、hwb、lch 或 oklch。它始终返回与 $color 相同空间中的颜色。

⚠️ 注意！

出于历史原因，如果 $color 位于旧版颜色空间中，则 $space 是可选的。在这种情况下，$space 默认为 hsl。无论如何，始终最好显式传递 $space。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch);
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch); // oklch(50% 0.12 250deg)

       游乐场Sass 语法@use 'sass:color'

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

// Oklch hue 267.1262408996deg becomes 87.1262408996deg
@debug color.complement(#6b717f, oklch) 
// rgb(118.8110604298, 112.5123650034, 98.1616586336)

// Hue 70deg becomes 250deg.
@debug color.complement(oklch(50% 0.12 70deg), oklch)  // oklch(50% 0.12 250deg)

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

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

如果 $color 位于旧版颜色空间中，则这会将 HSL 饱和度设置为 0%。否则，它会将 Oklch 色度设置为 0%。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.grayscale(#6b717f); // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6)); // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg)); // oklch(50% 0% 270deg)

       游乐场Sass 语法@use 'sass:color'

@debug color.grayscale(#6b717f)  // #757575
@debug color.grayscale(color(srgb 0.4 0.2 0.6))  // color(srgb 0.3233585271 0.3233585411 0.3233585792)
@debug color.grayscale(oklch(50% 80% 270deg))  // oklch(50% 0% 270deg)

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

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

如果 $color 尚未位于 rgb 颜色空间中，则将其转换为 rgb，并在必要时进行色域映射。随着技术的进步，特定色域映射算法可能会在将来的 Sass 版本中发生变化；目前，使用的是 local-minde。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287

       游乐场Sass 语法@use 'sass:color'

@debug color.ie-hex-str(#b37399)  // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6))  // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg))  // #FF9BA287

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

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $space 中 $color 的反色或负色。

$weight 必须是介于 0% 和 100%（含）之间的数字。权重越高，结果越接近负色，权重越低，结果越接近 $color。权重 50% 将始终在 $space 中产生中等亮度的灰色。

⚠️ 注意！

出于历史原因，如果 $color 位于旧版颜色空间中，则 $space 是可选的。在这种情况下，$space 默认为 $color 自身空间。无论如何，始终最好显式传递 $space。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.invert(#b37399, $space: rgb); // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3); // rgb(103.4937692017, 61.3720912206, 59.430641338)

       游乐场Sass 语法@use 'sass:color';

@debug color.invert(#b37399, $space: rgb)  // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3)  // rgb(103.4937692017, 61.3720912206, 59.430641338)

color.is-legacy($color) //=> boolean

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $color 是否位于旧版颜色空间中。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.is-legacy(#b37399); // true
@debug color.is-legacy(hsl(90deg 30% 90%)); // true
@debug color.is-legacy(oklch(70% 10% 120deg)); // false

       游乐场Sass 语法@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-missing($color, $channel) //=> boolean

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $channel 是否在 $color 中[缺失]。$channel 必须是带引号的字符串。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.is-missing(#b37399, "green"); // false
@debug color.is-missing(rgb(100 none 200), "green"); // true
@debug color.is-missing(color.to-space(grey, lch), "hue"); // true

       游乐场Sass 语法@use 'sass:color'

@debug color.is-legacy(#b37399)  // true
@debug color.is-legacy(hsl(90deg 30% 90%))  // true
@debug color.is-legacy(oklch(70% 10% 120deg))  // false

color.is-powerless($color, $channel, $space: null) //=> boolean

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $color 的 $channel 在 $space 中是否无力，默认为 $color 的空间。$channel 必须是带引号的字符串，而 $space 必须是不带引号的字符串。

在以下情况下，通道被视为无力

在 hsl 空间中，如果 saturation 为 0%，则 hue 无力。
在 hwb 空间中，如果 whiteness 加上 blackness 大于 100%，则 hue 无力。
在 lch 和 oklch 空间中，如果 chroma 为 0%，则 hue 无力。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.is-powerless(hsl(180deg 0% 40%), "hue"); // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation"); // false
@debug color.is-powerless(#999, "hue", $space: hsl); // true

       游乐场Sass 语法@use 'sass:color'

@debug color.is-powerless(hsl(180deg 0% 40%), "hue")  // true
@debug color.is-powerless(hsl(180deg 0% 40%), "saturation")  // false
@debug color.is-powerless(#999, "hue", $space: hsl)  // true

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

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回使用 $method 混合 $color1 和 $color2 的颜色，$method 是颜色空间的名称，如果它是极坐标颜色空间（hsl、hwb、lch 或 oklch），则可以选择后跟色相插值方法。

这使用与 CSS color-mix() 函数相同的算法来混合颜色。这也意味着，如果任一颜色在插值空间中缺少通道，它将采用来自另一颜色的相应通道值。这始终返回 $color1 空间中的颜色。

$weight 必须是介于 0% 和 100%（含）之间的数字。较大的权重表示应使用更多 $color1，较小的权重表示应使用更多 $color2。

⚠️ 注意！

出于历史原因，如果 $color1 和 $color2 都位于旧版颜色空间中，则 $method 是可选的。在这种情况下，颜色混合使用 Sass 历史上使用的相同算法完成，其中 $weight 和每种颜色的相对不透明度都决定了结果中每种颜色的多少。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch); // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(
  color(rec2020 1 0.7 0.1),
  color(rec2020 0.8 none 0.3),
  $weight: 75%,
  $method: rec2020
); // color(rec2020 0.95 0.7 0.15)
@debug color.mix(
  oklch(80% 20% 0deg),
  oklch(50% 10% 120deg),
  $method: oklch longer hue
); // oklch(65% 0.06 240deg)

       游乐场Sass 语法@use 'sass:color';

@debug color.mix(#036, #d2e1dd, $method: rgb)  // #698aa2
@debug color.mix(#036, #d2e1dd, $method: oklch)  // rgb(87.864037264, 140.601918773, 154.2876826946)
@debug color.mix(color(rec2020 1 0.7 0.1), color(rec2020 0.8 none 0.3), $weight: 75%, $method: rec2020)  // color(rec2020 0.95 0.7 0.15)





@debug color.mix(oklch(80% 20% 0deg), oklch(50% 10% 120deg), $method: oklch longer hue)  // oklch(65% 0.06 240deg)

color.same($color1, $color2) //=> boolean

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回 $color1 和 $color2 是否在视觉上呈现为相同的颜色。与 == 不同，即使颜色位于不同的颜色空间中，只要它们在 xyz 颜色空间中表示相同的颜色值，这也会认为颜色等效。这将缺少的通道视为等效于零。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.same(#036, #036); // true
@debug color.same(#036, #037); // false
@debug color.same(#036, color.to-space(#036, oklch)); // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%)); // true

       游乐场Sass 语法@use 'sass:color'

@debug color.same(#036, #036)  // true
@debug color.same(#036, #037)  // false
@debug color.same(#036, color.to-space(#036, oklch))  // true
@debug color.same(hsl(none 50% 50%), hsl(0deg 50% 50%))  // true

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

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

Dart Sass: 自 1.28.0 版起
LibSass: ✗
Ruby Sass: ✗

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

每个关键字参数必须是介于 -100% 和 100%（含）之间的数字。这表示应将相应属性从其原始位置移动到最大值（如果参数为正）或最小值（如果参数为负）的距离。这意味着，例如，$lightness: 50% 将使所有颜色更接近最大亮度 50%，而不会使它们完全变为白色。默认情况下，这只能缩放 $color 空间中的颜色，但可以将不同的颜色空间作为 $space 传递以改为缩放那里的通道。这始终返回与 $color 相同空间中的颜色。

⚠️ 注意！

由于历史原因，如果$color 处于传统颜色空间，则可以缩放任何传统颜色空间通道。但是，同时指定 RGB 通道（$red、$green 和/或 $blue）和 HSL 通道（$saturation 和/或 $lightness），或者同时指定其中任何一个和 HWB 通道（$hue、$whiteness 和/或 $blackness）都是错误的。

即便如此，即使对于旧版颜色，最好也显式传递 $space。

另请参阅

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

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.scale(#6b717f, $red: 15%); // rgb(129.2, 113, 127)
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch);
// rgb(181.2580722731, 195.8949200496, 192.0059024063)
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%);
// oklch(80% 0.24 120deg / 0.6)

       游乐场Sass 语法@use 'sass:color'

@debug color.scale(#6b717f, $red: 15%)  // rgb(129.2, 113, 127)
@debug color.scale(#d2e1dd, $lightness: -10%, $space: oklch)
// rgb(181.2580722731, 195.8949200496, 192.0059024063)
@debug color.scale(oklch(80% 20% 120deg), $chroma: 50%, $alpha: -40%)
// oklch(80% 0.24 120deg / 0.6)

color.space($color) //=> unquoted string

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回$color空间的名称，作为未加引号的字符串。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.space(#036); // rgb
@debug color.space(hsl(120deg 40% 50%)); // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3)); // xyz

       游乐场Sass 语法@use 'sass:color'

@debug color.space(#036)  // rgb
@debug color.space(hsl(120deg 40% 50%))  // hsl
@debug color.space(color(xyz-d65 0.1 0.2 0.3))  // xyz

color.to-gamut($color, $space: null, $method: null) //=> color

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

返回在$space的色域中与$color视觉上相似的颜色，默认为$color的空间。如果$color已经在$space的色域内，则按原样返回。这始终返回$color原始空间中的颜色。$space必须是未加引号的字符串。

$method指示 Sass 如何选择“相似”的颜色。

local-minde：这是 CSS Colors 4 规范当前推荐的方法。它对颜色的 Oklch 色度空间进行二分搜索，直到找到一个颜色，其裁剪到色域的值尽可能接近降色度变体。
clip：这只是将所有通道剪辑到$space的色域内，如果它们超出色域，则将其设置为最小或最大色域值。

⚠️ 注意！

CSS 工作组和浏览器供应商仍在积极讨论推荐的色域映射算法的替代方案。在他们达成建议之前，color.to-gamut()中的$method参数是强制性的，以便我们最终可以使其默认值与 CSS 默认值相同。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.to-gamut(#036, $method: local-minde); // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde);
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip);
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

       游乐场Sass 语法@use 'sass:color'

@debug color.to-gamut(#036, $method: local-minde)  // #036
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: local-minde)
// oklch(61.2058838235% 0.2466052584 22.0773325274deg)
@debug color.to-gamut(oklch(60% 70% 20deg), $space: rgb, $method: clip)
// oklch(62.5026609544% 0.2528579741 24.1000466758deg)

color.to-space($color, $space) //=> color

Dart Sass: 自 1.79.0 版起
LibSass: ✗
Ruby Sass: ✗

将$color转换为给定的$space，它必须是未加引号的字符串。

如果$color原始空间的色域比$space的色域宽，则这可能会返回一个对$space来说超出色域的颜色。您可以使用color.to-gamut()将其转换为相似的色域内颜色。

这可能会生成具有缺失通道的颜色，如果$color具有缺失的类似通道，或者如果该通道在目标空间中无效。为了确保转换为传统颜色空间始终生成与旧版浏览器兼容的颜色，如果$space是传统的，则这永远不会返回新的缺失通道。

💡 有趣的事实

这是唯一一个返回不同于传入空间的颜色空间的 Sass 函数。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

@debug color.to-space(#036, display-p3); // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13)); // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1)); // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch); // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch); // oklch(none 0.3782382429 11.1889160032deg)

       游乐场Sass 语法@use 'sass:color'

@debug color.to-space(#036, display-p3)  // lch(20.7457453073% 35.0389733355 273.0881809283deg)
@debug color.to-space(oklab(44% 0.09 -0.13))  // rgb(103.1328911972, 50.9728091281, 150.8382311692)
@debug color.to-space(xyz(0.8 0.1 0.1))  // color(a98-rgb 1.2177586808 -0.7828263424 0.3516847577)
@debug color.to-space(grey, lch)  // lch(53.5850134522% 0 none)
@debug color.to-space(lch(none 10% 30deg), oklch)  // oklch(none 0.3782382429 11.1889160032deg)

已弃用的函数已弃用的函数永久链接

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

增加或减少$color的 HSL 色调。

$hue必须是介于-360deg和360deg（含）之间的数字，以添加到$color的色调中。它可以是无单位或具有任何角度单位。$color必须处于传统颜色空间。

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

⚠️ 注意！

由于adjust-hue()与color.adjust()冗余，因此它未直接包含在新模块系统中。您可以编写color.adjust($color, $hue: $amount, $space: hsl)，而不是adjust-hue($color, $amount)。

  SCSS

  Sass

       游乐场SCSS 语法// 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 语法// 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

返回$color的 alpha 通道，作为介于 0 和 1 之间的数字。

$color必须处于传统颜色空间。

作为特例，这支持 Internet Explorer 语法alpha(opacity=20)，它为此返回一个未加引号的字符串。

⚠️ 注意！

由于color.alpha()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "alpha")，而不是color.alpha($color)。

  SCSS

  Sass

       游乐场SCSS 语法@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 语法@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)
blackness($color) //=> number

Dart Sass: 自 1.28.0 版起
LibSass: ✗
Ruby Sass: ✗

返回$color的 HWB 黑色度，作为介于0%和100%之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.blackness()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "blackness")，而不是color.blackness($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@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

返回$color的蓝色通道，作为介于 0 和 255 之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.blue()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "blue")，而不是color.blue($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

使$color变暗。

$color必须处于传统颜色空间。

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

⚠️ 注意！

darken()函数通过固定量降低亮度，这通常不是所需的效果。要使颜色比之前暗某个百分比，请改用color.scale()。

由于darken()通常不是使颜色变暗的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $lightness: -$amount, $space: hsl)，而不是darken($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法// 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 语法// 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饱和度降低。

$color必须处于传统颜色空间。

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

⚠️ 注意！

desaturate()函数通过固定量降低饱和度，这通常不是所需的效果。要使颜色比之前饱和度低某个百分比，请改用color.scale()。

由于desaturate()通常不是使颜色饱和度降低的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $saturation: -$amount, $space: hsl)，而不是desaturate($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法// 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 语法// 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.green($color)
green($color) //=> number

返回$color的绿色通道，作为介于 0 和 255 之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.green()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "green")，而不是color.green($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

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

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.hue()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "hue")，而不是color.hue($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

使$color变亮。

$color必须处于传统颜色空间。

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

⚠️ 注意！

lighten()函数通过固定量增加亮度，这通常不是所需的效果。要使颜色比之前亮某个百分比，请改用scale()。

由于lighten()通常不是使颜色变亮的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $lightness: $amount, $space: hsl)，而不是lighten($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法// 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 语法// 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

返回$color的 HSL 亮度，作为介于0%和100%之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.lightness()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "lightness")，而不是color.lightness($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

使$color不透明度增加。

$color必须处于传统颜色空间。

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

⚠️ 注意！

opacify()函数通过固定量增加 alpha 通道，这通常不是所需的效果。要使颜色比之前不透明度高某个百分比，请改用scale()。

由于opacify()通常不是使颜色不透明度增加的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $alpha: -$amount)，而不是opacify($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法@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 语法@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

返回$color的红色通道，作为介于 0 和 255 之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.red()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "red")，而不是color.red($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

使$color饱和度增加。

$color必须处于传统颜色空间。

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

⚠️ 注意！

saturate()函数通过固定量增加饱和度，这通常不是所需的效果。要使颜色比之前饱和度高某个百分比，请改用scale()。

由于saturate()通常不是使颜色饱和度增加的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $saturation: $amount, $space: hsl)，而不是saturate($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法// 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 语法// 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

返回$color的 HSL 饱和度，作为介于0%和100%之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.saturation()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "saturation")，而不是color.saturation($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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

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

使$color透明度增加。

$color必须处于传统颜色空间。

$amount必须是介于0和1（含）之间的数字。将$color的 alpha 通道降低该数量。

⚠️ 注意！

transparentize()函数通过固定量降低 alpha 通道，这通常不是所需的效果。要使颜色比之前透明度高某个百分比，请改用color.scale()。

由于transparentize()通常不是使颜色透明度增加的最佳方法，因此它未直接包含在新模块系统中。但是，如果您必须保留现有行为，则可以编写color.adjust($color, $alpha: -$amount, $space: hsl)，而不是transparentize($color, $amount)。

  SCSS

  Sass

   游乐场SCSS 语法@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 语法@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 语法@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 语法@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: 自 1.28.0 版起
LibSass: ✗
Ruby Sass: ✗

返回$color的 HWB 白色度，作为介于0%和100%之间的数字。

$color必须处于传统颜色空间。

⚠️ 注意！

由于color.whiteness()与color.channel()冗余，因此不再推荐。您可以编写color.channel($color, "whiteness")，而不是color.whiteness($color)。

  SCSS

  Sass

       游乐场SCSS 语法@use 'sass:color';

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

       游乐场Sass 语法@use 'sass:color'

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