跳到主要内容

Color Operation Functions

更多相关的知识，可访问官网的 Color Operation Functions

颜色操作通常使用与它们改变的值相同的单位来传递参数，百分比被处理为绝对值，因此将 10％的值增加 10％会得到 20％。将选项方法参数设置为相对百分比时，使用相对百分比将 10％的值增加 10％会得到 11％。值被夹在它们允许的范围内；它们不会环绕。在显示返回值时，我们使用了使每个函数所做的事情清晰的格式，除了你通常要使用的十六进制版本。

saturate​

在 HSL 颜色空间中，通过绝对量增加颜色的饱和度。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，将其设置为relative以使调整相对于当前值。

返回值：color

示例：saturate(hsl(90, 80％，50％)，20％)

输出：＃80ff00 // hsl(90, 100%, 50%)

desaturate​

在 HSL 颜色空间中，通过绝对量减少颜色的饱和度。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，将其设置为relative以使调整相对于当前值。

返回值：color

示例：desaturate(hsl(90, 80％，50％)，20％)

输出：＃80cc33 // hsl(90, 60%, 50%)

lighten​

在 HSL 颜色空间中，通过绝对量增加颜色的亮度。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，将其设置为relative以使调整相对于当前值。

返回值：color

示例：lighten(hsl(90, 80％，50％)，20％)

输出：＃b3f075 // hsl(90, 80%, 70%)

darken​

在 HSL 颜色空间中，通过绝对量减少颜色的亮度。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，将其设置为relative以使调整相对于当前值。

返回值：color

示例：darken(hsl(90, 80％，50％)，20％)

输出：＃4d8a0f // hsl(90, 80%, 30%)

fadein​

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

对不透明颜色没有影响。要向另一个方向淡入，请使用 fadeout。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，设置为 relative 以使调整相对于当前值。

返回值：color

示例：fadein(hsla(90, 90％，50％，0.5)，10％)

输出：rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

fadeout​

增加颜色的透明度（或减少不透明度），使其更透明。要向另一个方向淡入，请使用 fadein。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。
  • method：可选，设置为 relative 以使调整相对于当前值。

返回值：color

示例：fadeout(hsla(90, 90％，50％，0.5)，10％)

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

fade​

设置颜色的绝对不透明度。可以应用于颜色，无论它们是否已经具有不透明度值。

参数：

  • color：颜色对象。
  • amount：百分比 0-100％。

返回值：color

示例：fade(hsl(90, 90％，50％)，10％)

输出：rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

spin​

在任一方向上旋转颜色的色相角度。

虽然角度范围为 0-360，但它应用了 mod 360 操作，因此你可以传递更大（或负）的值，它们将环绕，例如 360 和 720 的角度将产生相同的结果。请注意，颜色通过 RGB 转换传递，对于灰色（因为当没有饱和度时，色相没有意义），它不保留色相值，因此请确保以保留色相的方式应用函数，例如不要这样做：

@c: saturate(spin(#aaaaaa, 10), 10%);

而应该这样做：

@c: spin(saturate(#aaaaaa, 10%), 10);

颜色始终作为 RGB 值返回，因此将 spin 应用于灰度值将不起作用。

参数：

  • color：颜色对象。
  • angle：要旋转的度数（+或-）。

返回值：color

示例：

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

输出：

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

mix​

在变量比例下混合两种颜色。透明度也会被计算在内。

参数：

  • color1：颜色对象。
  • color2：颜色对象。
  • weight：可选，两种颜色之间的百分比平衡点，默认为 50％。

返回值：color

示例：

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

输出：

#800080
rgba(75, 25, 0, 0.75)

tint​

在变量比例下将颜色与白色混合。与调用mix(#ffffff, @color, @weight)相同。

参数：

  • color：颜色对象。
  • weight：可选，颜色和白色之间的百分比平衡点，默认为 50％。

返回值：color

示例：

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

shade​

在变量比例下将颜色与黑色混合。与调用mix(#000000, @color, @weight)相同。

参数：

  • color：颜色对象。
  • weight：可选，颜色和黑色之间的百分比平衡点，默认为 50％。

返回值：color

示例：

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

输出：

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

greyscale​

在 HSL 颜色空间中去除颜色的所有饱和度；与调用desaturate(@color, 100%)相同。

由于饱和度不受色调影响，因此结果颜色映射可能会有些暗淡或混浊；luma可能会提供更好的结果，因为它提取的是感知亮度而不是线性亮度，例如greyscale('#0000ff')将返回与greyscale('#00ff00')相同的值，尽管它们在人眼中看起来非常不同。

参数：color：颜色对象。

返回值：color

示例：greyscale(hsl(90, 90%, 50%))

输出：#808080 // hsl(90, 0%, 50%)

请注意，生成的颜色可能与示例中的颜色不同。

lightness​

获取颜色的亮度值（0-100%）。

这个函数返回一个颜色的亮度值，它是基于 HSL 颜色模式中的亮度值计算的。这个值可以用来比较两个颜色的相对亮度，但是它并不是一个精确的亮度值，因为它没有考虑到颜色的饱和度和色相。

参数：

  • color: 一个颜色对象。

返回值：unit

示例：

p {
  a: lightness(#80f20d);
  b: lightness(#cacaca);
}

输出：

p {
  a: 75.3%;
  b: 79.2%;
}

这个例子使用了上面计算出的两个颜色。你可以看到，即使两个颜色的亮度值相同，但是它们看起来的亮度却不同。灰色看起来比绿色更暗，尽管它们的亮度值相同。

与使用 luma 不同（因为 luma 返回一个单一的值，而不是一个颜色）：

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

输出：#cacaca

这次灰色的亮度看起来与绿色差不多，尽管它的值实际上更高。

contrast​

选择两个颜色中哪一个与另一个颜色的对比度更大。

这个函数对于确保一个颜色在背景上可读非常有用，这也有助于满足无障碍性要求。这个函数的工作方式与 Compass for SASS 中的对比度函数 相同。根据 WCAG 2.0，颜色使用它们的伽马校正的 luma 值进行比较，而不是它们的亮度。

dark 和 light 参数可以以任何顺序提供 - 函数将计算它们的 luma 值并自动分配 light 和 dark，这意味着你不能使用这个函数通过颠倒顺序来选择最不对比的颜色。

参数：

  • color: 要比较的颜色对象。
  • dark: 可选 - 指定的暗色（默认为黑色）。
  • light: 可选 - 指定的亮色（默认为白色）。
  • threshold: 可选 - 指定从“暗”到“亮”的过渡位置的百分比（0-100%，默认为 43%，与 SASS 匹配）。这用于偏向于一种或另一种对比度，例如允许你决定 50% 灰色背景是否应该产生黑色或白色文本。你通常会为“较浅”的调色板设置较低的值，为“较暗”的调色板设置较高的值。

返回值：color

示例：

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
}

这些示例使用上面计算出的背景和前景颜色；你可以看到，你永远不会得到白色文本在白色背景上，也不会得到黑色文本在黑色背景上，尽管可以使用阈值来偏向于一种或另一种对比度。