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
相容性（$x、$y、$z、$chroma 和 $space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗
相容性（$whiteness 和 $blackness）
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 通道。

另請參閱

Playground

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

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
相容性（$x、$y、$z、$chroma 和 $space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗
相容性（$whiteness 和 $blackness）
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() 永遠不會限制通道。

另請參閱

Playground

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

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
相容性（$space）
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() 來明確檢查缺少的通道。

Playground

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
Playground

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
相容性（$space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

返回 $color 在 $space 中的互補色。

這會在 $space 中將 $color 的色相旋轉 180deg。這表示 $space 必須是極座標色彩空間：hsl、hwb、lch 或 oklch。它總是返回與 $color 相同色彩空間的顏色。

⚠️ 注意！

由於歷史原因，如果 $color 處於舊版色彩空間，則 $space 是可選的。在這種情況下，$space 預設為 hsl。無論如何，明確傳遞 $space 總是一個好主意。

Playground

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

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

Playground

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

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。

Playground

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
Playground

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
相容性（$space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

在 $space 色彩空間中返回 $color 的反色或 負片。

$weight 必須是介於 0% 和 100% 之間（含）的數字。權重越高，結果越接近反色；權重越低，結果越接近 $color。權重 50% 在 $space 色彩空間中始終會產生中等亮度的灰色。

⚠️ 注意！

由於歷史原因，如果 $color 處於 舊版色彩空間 中，則 $space 是可選的。在這種情況下，$space 默認為 $color 自己的色彩空間。無論如何，明確地傳遞 $space 總是一個好主意。

Playground

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

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
相容性（$space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

返回 $color 是否處於 舊版色彩​空間 中。

Playground

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
Playground

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
相容性（$space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

返回 $color 中是否[缺少] $channel 通道。$channel 必須是帶引號的字串。

Playground

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
Playground

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
相容性（$space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

返回 $color 的 $channel 通道在 $space 色彩空間中是否 無效，$space 默認為 $color 的色彩空間。$channel 必須是帶引號的字串，而 $space 必須是不帶引號的字串。

在以下情況下，通道被視為無效：

  • 在 hsl 色彩空間中，如果 saturation（飽和度）為 0%，則 hue（色相）無效。
  • 在 hwb 色彩空間中，如果 whiteness（白色度）加上 blackness（黑色度）大於 100%，則 hue（色相）無效。
  • 在 lch 和 oklch 色彩空間中，如果 chroma（彩度）為 0%，則 hue（色相）無效。
Playground

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
Playground

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
相容性（$method）
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 和相對不透明度都決定了結果中每個顏色的比例。

Playground

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

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 色彩空間中表示相同的顏色值，即使它們在不同的色彩空間中，這也認為顏色是等效的。這將 缺少的通道 視為等於零。

Playground

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
Playground

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
相容性（$x、$y、$z、$chroma 和 $space）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗
相容性（$whiteness 和 $blackness）
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。

另請參閱

Playground

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

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 色彩空間的名稱。

Playground

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
Playground

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 預設值相同。

Playground

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

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 函數。

Playground

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

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

Playground

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
Playground

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

Playground

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

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

Playground

SCSS 語法

@use 'sass:color';

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

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

Playground

SCSS 語法

@use 'sass:color';

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

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

Playground

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
Playground

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
Playground

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
Playground

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

Playground

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
Playground

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
Playground

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
Playground

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

Playground

SCSS 語法

@use 'sass:color';

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

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

Playground

SCSS 語法

@use 'sass:color';

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

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() 通常不是讓顏色變亮的最佳方法，因此它沒有直接包含在新模組系統中。但是，如果您必須保留現有的行為，lighten($color, $amount) 可以寫成 color.adjust($color, $lightness: $amount, $space: hsl)。

Playground

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
Playground

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
Playground

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
Playground

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.lightness($color) 改寫為 color.channel($color, "lightness")。

Playground

SCSS 語法

@use 'sass:color';

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

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() 通常不是讓顏色更不透明的最佳方法，因此它沒有直接包含在新模組系統中。但是，如果您必須保留現有的行為，opacify($color, $amount) 可以寫成 color.adjust($color, $alpha: -$amount)。

Playground

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

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

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
Playground

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.red($color) 改寫為 color.channel($color, "red")。

Playground

SCSS 語法

@use 'sass:color';

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

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() 通常不是讓顏色更飽和的最佳方法，因此它沒有直接包含在新模組系統中。但是，如果您必須保留現有的行為，saturate($color, $amount) 可以寫成 color.adjust($color, $saturation: $amount, $space: hsl)。

Playground

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
Playground

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
Playground

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
Playground

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.saturation($color) 改寫為 color.channel($color, "saturation")。

Playground

SCSS 語法

@use 'sass:color';

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

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() 通常不是讓顏色更透明的最佳方法，因此它沒有直接包含在新模組系統中。但是，如果您必須保留現有的行為，transparentize($color, $amount) 可以寫成 color.adjust($color, $alpha: -$amount, $space: hsl)。

Playground

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

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

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

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

Playground

SCSS 語法

@use 'sass:color';

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

Sass 語法

@use 'sass:color'

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