颜色操作通常使用与所修改值相同的单位作为参数，百分比默认按绝对值处理。例如，将 10%的值增加 10%会得到 20%。如需相对百分比处理，请将 method 参数设为 relative。使用相对百分比时，10%的值增加 10%会得到 11%。所有值都会被限制在允许范围内，不会循环。返回值展示时，我们使用了能清晰体现函数作用的格式，以及您通常会使用的十六进制版本。

1、saturate 增加饱和度

通过一个绝对的百分比增加 HSL 颜色的饱和度。

语法

saturate(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要增加的饱和度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

saturate(hsl(90, 80%, 50%), 20%);

输出：

hsl(90, 100%, 50%) // #ccff99

hsl(90, 80%, 50%) → hsl(90, 100%, 50%)

2、desaturate 降低饱和度

通过一个绝对的百分比减少 HSL 颜色的饱和度。

语法

desaturate(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要减少的饱和度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

desaturate(hsl(90, 80%, 50%), 20%);

输出：

hsl(90, 60%, 50%) // #80cc33

hsl(90, 80%, 50%) → hsl(90, 60%, 50%)

3、lighten 增加亮度

通过一个绝对的百分比增加 HSL 颜色的亮度。

语法

lighten(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要增加的亮度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

lighten(hsl(90, 80%, 50%), 20%);

输出：

hsl(90, 80%, 70%) // #b3f075

hsl(90, 80%, 50%) → hsl(90, 80%, 70%)

4、darken 降低亮度

通过一个绝对的百分比减少 HSL 颜色的亮度。

语法

darken(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要减少的亮度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

darken(hsl(90, 80%, 50%), 20%);

输出：

hsl(90, 80%, 30%) // #4d8a0f

hsl(90, 80%, 50%) → hsl(90, 80%, 30%)

5、fadein 降低透明度

减少颜色的透明度（或增加不透明度），使其更加不透明。

对不透明颜色无效。如需向相反方向调整透明度，请使用fadeout。

语法

fadein(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要减少的透明度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

fadein(hsla(90, 90%, 50%, 0.5), 10%);

输出：

hsla(90, 90%, 50%, 0.6)

hsla(90, 90%, 50%, 0.5) → hsla(90, 90%, 50%, 0.6)

6、fadeout 增加透明度

增加颜色的透明度（或减少不透明度），使其更加透明。 对不透明颜色无效。如需向相反方向调整透明度，请使用fadein。

语法

fadeout(@color, @amount, @method: absolute);

• @color：要修改的颜色。
• @amount：要增加的透明度百分比。
• @method：可选，设置为 relative 以相对于当前值进行调整。

示例

fadeout(hsla(90, 90%, 50%, 0.8), 40%);

输出：

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

hsla(90, 90%, 50%, 0.8) → hsla(90, 90%, 50%, 0.4)

7、fade 调整透明度

设置颜色的绝对透明度。可以应用于具有透明度的颜色，也可以应用于不透明的颜色。

语法

fade(@color, @amount);

• @color：要修改的颜色。
• @amount：要设置的透明度百分比。

示例

fade(hsl(90, 90%, 50%), 40%);

输出：

rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)

hsl(90, 90%, 50%) → hsla(90, 90%, 50%, 0.4)

8、spin 旋转颜色

旋转颜色的色相角度（正负方向均可）。

语法

spin(@color, @angle);

• @color：要旋转的颜色。
• @angle：要旋转的角度（度），可以是正数或负数。

注意

虽然角度范围是 0-360 度，但会对 360 取模，因此可以传入更大（或负）的值，它们会自动环绕。例如 360 度和 720 度会产生相同结果。注意颜色会经过 RGB 转换，这不会保留灰色色调值（因为无饱和度时色调无意义），因此请确保以保留色调的方式应用函数，例如不要这样做：saturate(spin(#aaaaaa, 10), 10%);。请做以下操作：spin(saturate(#aaaaaa, 10%), 10);

颜色总是以 RGB 值返回，因此对灰色值应用spin函数不会有任何效果。

示例

spin(hsl(10, 90%, 50%), 30);
spin(hsl(10, 90%, 50%), -30)

输出：

#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)

hsl(10, 90%, 50%) → hsl(40, 90%, 50%)

hsl(10, 90%, 50%) → hsl(340, 90%, 50%)

9、mix 混合颜色

按可变比例混合两种颜色。计算时会包含透明度值。

语法

mix(@color1, @color2, @weight: 50%);

• @color1：第一个颜色。
• @color2：第二个颜色。
• @weight：可选，混合比例，默认为 50%。

示例

mix(#ff0000, #0000ff, 50%);
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%);

输出：

#800080 // rgba(128, 0, 128, 1.0)
rgba(75, 25, 0, 0.75) // rgba(75, 25, 0, 0.75)

#ff0000 + #0000ff → #800080

rgba(100, 0, 0, 1.0) + rgba(0, 100, 0, 0.5) → rgba(75, 25, 0, 0.75)

10、tint 混合颜色

按可变比例混合颜色和白色。等同于调用 mix(#ffffff, @color, @weight)

语法

tint(@color, @weight: 50%);

• @color：要混合的颜色。
• @weight：可选参数，表示颜色与白色之间的混合比例，默认为 50%。

示例

no-alpha: tint(#007fff, 50%);
with-alpha: tint(rgba(00, 0, 255, 0.5), 50%);

输出：

no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);

#007fff → #80bfff

rgba(00, 0, 255, 0.5) → rgba(191, 191, 255, 0.75)

11、shade 混合颜色和黑色

按可变比例混合颜色和黑色。等同于调用 mix(#000000, @color, @weight)

语法

shade(@color, @weight: 50%);

• @color：要混合的颜色。
• @weight：可选参数，表示颜色与黑色之间的混合比例，默认为 50%。

示例

no-alpha: shade(#007fff, 50%);
with-alpha: shade(rgba(0, 0, 255, 0.5), 50%);

输出：

no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);

#007fff → #004080

rgba(0, 0, 255, 0.5) → rgba(0, 0, 64, 0.75)

12、greyscale 转换为灰度

移除 HSL 色彩空间中颜色的所有饱和度，等同于调用desaturate(@color, 100%)。

由于饱和度不受色相影响，生成的灰度映射可能显得较为暗淡；luma()函数可能提供更好的结果，因为它提取的是感知亮度而非线性亮度。例如greyscale('#0000ff')和greyscale('#00ff00')会返回相同的值，尽管它们在人眼看来亮度差异明显。

语法

greyscale(@color);

• @color：要转换为灰度的颜色。

示例

greyscale(hsl(90, 90%, 50%));

输出：

#808080 // hsl(90, 0%, 50%)

#80f20d → #808080

注意生成的灰色看起来比原始绿色更暗，尽管它们的亮度值相同。

与使用luma函数对比（用法不同，因为luma返回的是单个数值而非颜色）：

@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);

输出：

color: #cacaca;

#80f20d → #cacaca

这次生成的灰色看起来与原始绿色的亮度相近，尽管其实际数值更高。

13、contrast 对比颜色

选择两种颜色中与另一种颜色对比度更高的颜色。

light 和 dark 参数可以按任意顺序提供 - 函数会自动计算它们的 luma 值并分配明暗颜色，这意味着您无法通过反转参数顺序来选择对比度最低的颜色。

语法

contrast(@color, @dark: #000000, @light: #ffffff, @threshold: 43%);

• @color：要对比的颜色。
• @dark：可选参数，用于对比的暗色颜色，默认为黑色。
• @light：可选参数，用于对比的亮色颜色，默认为白色。
• @threshold：可选参数，一个 0-100%的百分比值，用于指定从"暗色"到"亮色"的过渡阈值（默认为 43%，与 SASS 保持一致）。该参数用于调整对比度偏向，例如决定 50%灰色背景应显示黑色还是白色文本。通常对于较浅的调色板应设置较低值，较深的调色板则设置较高值。

示例

p {
    a: contrast(#bbbbbb);
    b: contrast(#222222, #101010);
    c: contrast(#222222, #101010, #dddddd);
    d: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 30%);
    e: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 80%);
}

输出：

p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}

这些示例使用上述计算出的颜色作为背景和前景色；可以看到永远不会出现白色背景配白色文字或黑色背景配黑色文字的情况，不过通过调整阈值参数可以允许较低对比度的结果，如最后一个示例所示：

#000000#ffffff #dddddd #000000 #ffffff

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24