sass:color

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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns the value of $channel in $space, which defaults to $color’s space. The $channel must be a quoted string, and the $space must be an unquoted string.

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

¥This returns a number with unit deg for the hue channel of the hsl, hwb, lch, and oklch spaces. It returns a number with unit % for the saturation, lightness, whiteness, and blackness channels of the hsl, hwb, lab, lch, oklab, and oklch spaces. For all other channels, it returns a unitless number.

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

¥This will return 0 (possibly with an appropriate unit) if the $channel is missing in $color. You can use color.is-missing() to check explicitly for missing channels.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

返回 $space 中 $color 的 补充。

¥Returns the complement of $color in $space.

这会将 $color 的色调在 $space 中旋转 180deg。这意味着 $space 必须是极地颜色空间：hsl、hwb、lch 或 oklch。它总是返回与 $color 位于同一空间中的颜色。

¥This rotates $color’s hue by 180deg in $space. This means that $space has to be a polar color space: hsl, hwb, lch, or oklch. It always returns a color in the same space as $color.

For historical reasons, `$space` is optional if `$color` is in a [legacy
color space]. In that case, `$space` defaults to `hsl`. It's always a good
idea to pass `$space` explicitly regardless.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

@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 具有相同亮度的灰色。

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

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

¥If $color is in a legacy color space, this sets the HSL saturation to 0%. Otherwise, it sets the Oklch chroma to 0%.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

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

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

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

¥If $color isn’t already in the rgb color space, it’s converted to rgb and gamut-mapped if necessary. The specific gamut-mapping algorithm may change in future Sass versions as the state of the art improves; currently, local-minde is used.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

返回 $space 中 $color 的逆或 消极的。

¥Returns the inverse or negative of $color in $space.

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

¥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 a medium-lightness gray in $space.

For historical reasons, `$space` is optional if `$color` is in a [legacy
color space]. In that case, `$space` defaults to `$color`'s own space. It's
always a good idea to pass `$space` explicitly regardless.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

@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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

返回 $color 是否在 旧颜色空间 中。

¥Returns whether $color is in a legacy color space.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns whether $channel is [missing] in $color. The $channel must be a quoted string.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

兼容性 ($space):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns whether $color’s $channel is powerless in $space, which defaults to $color’s space. The $channel must be a quoted string and the $space must be an unquoted string.

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

¥Channels are considered powerless in the following circumstances:

• 在 hsl 空间中，如果 saturation 为 0%，则 hue 无能为力。

  ¥In the hsl space, the hue is powerless if the saturation is 0%.

• 在 hwb 空间中，如果 whiteness 加上 blackness 大于 100%，则 hue 无能为力。

  ¥In the hwb space, the hue is powerless if the whiteness plus the blackness is greater than 100%.

• 在 lch 和 oklch 空间中，如果 chroma 为 0%，则 hue 无能为力。

  ¥In the lch and oklch spaces, the hue is powerless if the chroma is 0%.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

兼容性 ($method):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns a color that’s a mixture of $color1 and $color2 using $method, which is the name of a color space, optionally followed by a hue interpolation method if it’s a polar color space (hsl, hwb, lch, or oklch).

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

¥This uses the same algorithm to mix colors as the CSS color-mix() function. This also means that if either color has a missing channel in the interpolation space, it will take on the corresponding channel value from the other color. This always returns a color in $color1’s space.

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

¥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.

For historical reasons, `$method` is optional if `$color1` and `$color2` are
both in [legacy color spaces]. In this case, color mixing is done using the
same algorithm that Sass used historically, in which both the `$weight` and
the relative opacity of each color determines how much of each color is in
the result.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

@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

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns whether $color1 and $color2 visually render as the same color. Unlike ==, this considers colors to be equivalent even if they’re in different color spaces as long as they represent the same color value in the xyz color space. This treats missing channels as equivalent to zero.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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.space($color) //=> unquoted string

兼容性:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

以不带引号的字符串形式返回 $color 空间的名称。

¥Returns the name of $color’s space as an unquoted string.

• SCSS
• Sass

Playground

SCSS Syntax

@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

Playground

Sass Syntax

@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

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Returns a visually similar color to $color in the gamut of $space, which defaults to $color’s space. If $color is already in-gamut for $space, it’s returned as-is. This always returns a color in $color’s original space. The $space must be an unquoted string.

$method 表示 Sass 应如何选择 "similar" 颜色：

¥The $method indicates how Sass should choose a "similar" color:

• local-minde：这是 CSS Colors 4 规范当前推荐的方法。它对颜色的 Oklch 色度空间进行二进制搜索，直到找到一个裁剪到色域值尽可能接近降低色度变体的颜色。

  ¥local-minde: This is the method currently recommended by the CSS Colors 4 specification. It binary searches the Oklch chroma space of the color until it finds a color whose clipped-to-gamut value is as close as possible to the reduced-chroma variant.

• clip：这只会将所有通道剪辑到 $space 的色域内，如果它们超出色域，则将它们设置为最小或最大色域值。

  ¥clip: This simply clips all channels to within $space’s gamut, setting them to the minimum or maximum gamut values if they’re out-of-gamut.

The CSS working group and browser vendors are still actively discussing
alternative options for a recommended gamut-mapping algorithm. Until they
settle on a recommendation, the `$method` parameter is mandatory in
`color.to-gamut()` so that we can eventually make its default value the same
as the CSS default.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

@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

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

¥Converts $color into the given $space, which must be an unquoted string.

如果 $color 原始空间的色域比 $space 的色域更宽，则可能会返回超出 $space 色域的颜色。你可以使用 color.to-gamut() 将其转换为类似的色域内颜色。

¥If the gamut of $color’s original space is wider than $space’s gamut, this may return a color that’s out-of-gamut for the $space. You can convert it to a similar in-gamut color using color.to-gamut().

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

¥This can produce colors with missing channels, either if $color has an analogous channel that’s missing, or if the channel is powerless in the destination space. In order to ensure that converting to legacy color spaces always produces a color that’s compatible with older browsers, if $space is legacy this will never return a new missing channel.

This is the only Sass function that returns a color in a different space
than the one passed in.

• SCSS
• Sass

Playground

SCSS Syntax

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

Playground

Sass Syntax

@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 色调。

¥Increases or decreases $color’s HSL hue.

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

¥The $hue must be a number between -360deg and 360deg (inclusive) to add to $color’s hue. It may be unitless or have any angle unit. The $color must be in a legacy color space.

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

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

Because `adjust-hue()` is redundant with [`color.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, $space:
hsl)`](#adjust).

• SCSS
• Sass

Playground

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

Playground

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.blackness($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%.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.blackness()` is redundant with [`color.channel()`](#channel),
it's no longer recommended. Instead of `color.blackness($color)`, you can
write [`color.channel($color, "blackness")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

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.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.blue()` is redundant with [`color.channel()`](#channel), it's
no longer recommended. Instead of `color.blue($color)`, you can write
[`color.channel($color, "blue")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

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

使 $color 变暗。

¥Makes $color darker.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

$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, $space: hsl).

• SCSS
• Sass

Playground

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

Playground

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

Playground

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

Playground

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.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

$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, $space: hsl).

• SCSS
• Sass

Playground

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

Playground

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

Playground

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

Playground

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.green($color)
green($color) //=> number

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

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

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.green()` is redundant with [`color.channel()`](#channel),
it's no longer recommended. Instead of `color.green($color)`, you can write
[`color.channel($color, "green")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

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.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.hue()` is redundant with [`color.channel()`](#channel), it's
no longer recommended. Instead of `color.hue($color)`, you can write
[`color.channel($color, "hue")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

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

使 $color 更轻。

¥Makes $color lighter.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

$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
color.adjust($color, $lightness: $amount, $space: hsl).

• SCSS
• Sass

Playground

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

Playground

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

Playground

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

Playground

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%.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.lightness()` is redundant with [`color.channel()`](#channel),
it's no longer recommended. Instead of `color.lightness($color)`, you can write
[`color.channel($color, "lightness")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

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

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

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

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.red()` is redundant with [`color.channel()`](#channel), it's
no longer recommended. Instead of `color.red($color)`, you can write
[`color.channel($color, "red")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

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

使 $color 更加饱和。

¥Makes $color more saturated.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

$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 color.adjust($color, $saturation: $amount, $space: hsl).

• SCSS
• Sass

Playground

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

Playground

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

Playground

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

Playground

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%.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.saturation()` is redundant with
[`color.channel()`](#channel), it's no longer recommended. Instead of
`color.saturation($color)`, you can write
[`color.channel($color, "saturation")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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

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%.

$color 必须在 旧颜色空间 中。

¥The $color must be in a legacy color space.

Because `color.whiteness()` is redundant with [`color.channel()`](#channel),
it's no longer recommended. Instead of `color.whiteness($color)`, you can
write [`color.channel($color, "whiteness")`](#channel).

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

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

Playground

Sass Syntax

@use 'sass:color'

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