颜色

兼容性（颜色空间）
Dart Sass
自 1.79.0 起
LibSass
✗
Ruby Sass
✗

LibSass、Ruby Sass 和旧版本的 Dart Sass 不支持除 rgb 和 hsl 之外的颜色空间。

除了添加对新颜色空间的支持外，此版本还更改了处理颜色方式的一些细节。特别是，即使是旧版 rgb 和 hsl 颜色空间也不再限制在其色域内；现在可以表示 rgb(500 0 0) 或其他超出范围的值。此外，rgb 颜色不再四舍五入到最接近的整数，因为 CSS 规范现在要求实现尽可能保持精度。

兼容性（级别 4 语法）
Dart Sass
自 1.14.0 起
LibSass
✗
Ruby Sass
自 3.6.0 起

LibSass 和旧版本的 Dart 或 Ruby Sass 不支持带有 Alpha 通道的十六进制颜色。

Sass 内置支持颜色值。就像 CSS 颜色一样，每个颜色都表示特定颜色空间（如 rgb 或 lab）中的一个点。Sass 颜色可以写成十六进制代码（#f2ece4 或 #b37399aa）、CSS 颜色名称（midnightblue、transparent）或颜色函数，如rgb()、lab() 或 color()。

游乐场

SCSS 语法

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)
游乐场

Sass 语法

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

颜色空间颜色空间永久链接

Sass 支持与 CSS 相同的颜色空间集。Sass 颜色始终会以其编写的相同颜色空间发出，除非它位于旧版颜色空间中或您使用color.to-space()将其转换为另一个空间。Sass 中所有其他颜色函数始终会返回与原始颜色相同空间中的颜色，即使该函数在另一个空间中对该颜色进行了更改。

尽管每个颜色空间对其通道期望的色域都有界限，但 Sass 可以表示任何颜色空间的超出色域的值。这允许来自宽色域空间的颜色安全地转换为窄色域空间并返回，而不会丢失信息。

⚠️ 注意！

CSS 要求某些颜色函数剪辑其输入通道。例如，rgb(500 0 0) 将其红色通道剪辑到 [0, 255] 之内，因此等效于 rgb(255 0 0)，即使 rgb(500 0 0) 是 Sass 可以表示的独特值。您可以始终使用 Sass 的color.change() 函数为任何空间设置超出色域的值。

以下是 Sass 支持的所有颜色空间的完整列表。您可以在MDN 上了解有关这些空间的信息。

空间 语法 通道 [最小值，最大值]
rgb* rgb(102 51 153)
#663399
rebeccapurple 		红色 [0, 255]；绿色 [0, 255]；蓝色 [0, 255]
hsl* hsl(270 50% 40%) 色相 [0, 360]；饱和度 [0%, 100%]；亮度 [0%, 100%]
hwb* hwb(270 20% 40%) 色相 [0, 360]；白色 [0%, 100%]；黑色 [0%, 100%]
srgb color(srgb 0.4 0.2 0.6) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
srgb-linear color(srgb-linear 0.133 0.033 0.319) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
display-p3 color(display-p3 0.374 0.21 0.579) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
a98-rgb color(a98-rgb 0.358 0.212 0.584) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
prophoto-rgb color(prophoto-rgb 0.316 0.191 0.495) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
rec2020 color(rec2020 0.305 0.168 0.531) 红色 [0, 1]；绿色 [0, 1]；蓝色 [0, 1]
xyz、xyz-d65 color(xyz 0.124 0.075 0.309)
color(xyz-d65 0.124 0.075 0.309) 		x [0, 1]；y [0, 1]；z [0, 1]
xyz-d50 color(xyz-d50 0.116 0.073 0.233) x [0, 1]；y [0, 1]；z [0, 1]
lab lab(32.4% 38.4 -47.7) 亮度 [0%, 100%]；a [-125, 125]；b [-125, 125]
lch lch(32.4% 61.2 308.9deg) 亮度 [0%, 100%]；彩度 [0, 150]；色相 [0deg, 360deg]
oklab oklab(44% 0.088 -0.134) 亮度 [0%, 100%]；a [-0.4, 0.4]；b [-0.4, 0.4]
oklch oklch(44% 0.16 303.4deg) 亮度 [0%, 100%]；彩度 [0, 0.4]；色相 [0deg, 360deg]

标有 * 的空间是旧版颜色空间。

缺失通道缺失通道永久链接

CSS 和 Sass 中的颜色可以有“缺失通道”，它们写成 none 并表示其值未知或不影响颜色渲染方式的通道。例如，您可能会编写 hsl(none 0% 50%)，因为如果饱和度为 0%，则色相无关紧要。在大多数情况下，缺失通道仅被视为 0 值，但它们确实偶尔会出现。

  • 如果您将颜色混合在一起，无论是作为 CSS 插值的一部分（例如动画）还是使用 Sass 的color.mix() 函数，缺失通道始终采用该通道的其他颜色的值（如果可能）。

  • 如果您将具有缺失通道的颜色转换为具有类似通道的其他空间，则转换完成后，该通道将设置为 none。

尽管color.channel() 将为缺失通道返回 0，但您始终可以使用color.is-missing() 检查它们。

游乐场

SCSS 语法

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)
游乐场

Sass 语法

@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

无功通道无功通道永久链接

在某些情况下，颜色通道被认为是“无功的”，其值不会影响颜色在屏幕上的渲染方式。CSS 规范要求当颜色转换为新空间时，任何无功通道都将替换为 none。Sass 在所有情况下都执行此操作，除了转换为旧版空间的情况，以保证转换为旧版空间始终生成与旧版浏览器兼容的颜色。

有关无功通道的更多详细信息，请参阅color.is-powerless()。

旧版颜色空间旧版颜色空间永久链接

从历史上看，CSS 和 Sass 只支持标准 RGB 色域，并且只支持 rgb、hsl 和 hwb 函数来定义颜色。因为当时所有颜色都使用相同的色域，所以每个颜色函数都与每种颜色一起使用，而不管其颜色空间如何。Sass 仍然保留此行为，但仅适用于旧函数，并且仅适用于这三个“旧版”颜色空间中的颜色。即便如此，在使用颜色函数时显式指定您要使用的 $space 仍然是一个好习惯。

将旧版颜色值转换为 CSS 时，Sass 也会在不同的旧版颜色空间之间自由转换。这始终是安全的，因为它们都使用相同的底层颜色模型，这有助于确保 Sass 以尽可能兼容的格式发出颜色。

颜色函数颜色函数永久链接

Sass 支持许多有用的颜色函数，可用于通过混合颜色或缩放其通道值来根据现有颜色创建新颜色。调用颜色函数时，颜色空间应始终写成无引号字符串以匹配 CSS，而通道名称应写成带引号字符串，以便像 "red" 这样的通道不会被解析为颜色值。

💡 趣闻

Sass 颜色函数可以自动在空间之间转换颜色，这使得在 Oklch 等感知上统一的颜色空间中进行转换变得容易。但它们始终会返回与您提供的相同空间中的颜色，除非您显式调用color.to-space() 进行转换。

游乐场

SCSS 语法

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)
游乐场

Sass 语法

@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)