颜色操作函数

颜色操作通常使用与更改值相同的单位进行参数设置，百分比则作为绝对值处理，因此将 10%的值增加 10%，结果就是 20%。将选项方法参数设置为相对，可获得相对百分比。使用相对百分比时，10% 的值增加 10%，结果为 11%。数值会被箝制在允许的范围内，不会环绕。在显示返回值的地方，我们使用了格式，除了你通常要使用的十六进制版本外，还清楚地显示了每个函数的功能。

### saturate

按绝对值增加 HSL 色彩空间中颜色的饱和度。

参数：

- `color`: 颜色对象。
- `amount`: 百分比 0-100%。
- `method`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `color`

示例： `saturate(hsl(90, 80%, 50%), 20%)`

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

### desaturate

按绝对值降低 HSL 颜色空间中颜色的饱和度。

参数：

- `color`: 颜色对象。
- `amount`: 百分比 0-100%。
- `method`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `color`

示例： `desaturate(hsl(90, 80%, 50%), 20%)`

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

### lighten

按绝对值增加 HSL 颜色空间中颜色的亮度。

参数：

- `color`: 颜色对象。
- `amount`: 百分比 0-100%。
- `method`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `color`

示例： `lighten(hsl(90, 80%, 50%), 20%)`

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

### darken

按绝对值降低 HSL 颜色空间中颜色的亮度。

参数：

- `color`: 颜色对象。
- `amount`: 百分比 0-100%。
- `method`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `color`

示例： `darken(hsl(90, 80%, 50%), 20%)`

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

### fadein

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

对不透明颜色无效。要向另一个方向渐变，请使用 `fadeout`。

参数：

- `color`: 颜色对象。
- `amount`: 百分比 0-100%。
- `method`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `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`: 可选项，设置为相对时，调整值将相对于当前值。

返回： `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，但它应用的是模数 360 操作，因此您可以输入更大的值（或负值），它们也会被包围，例如 360 和 720 的角度会产生相同的结果。请注意，颜色是通过 RGB 转换传递的，而 RGB 转换不会保留灰色的色相值（因为在没有饱和度的情况下，色相没有任何意义），因此请确保以保留色相的方式应用函数，例如不要这样做：

```less
@c: saturate(spin(#aaaaaa, 10), 10%);
```
改成这样：

```less
@c: spin(saturate(#aaaaaa, 10%), 10);
```
颜色总是以 RGB 值返回，因此将旋转应用于灰色值不会有任何效果。

参数：

- `color`: 颜色对象。
- `angle`: 旋转的度数（+ 或 -）。

返回： `color`

示例：

```less
spin(hsl(10, 90%, 50%), 30)
spin(hsl(10, 90%, 50%), -30)
```
输出：

```less
#f2a60d // hsl(40, 90%, 50%)
#f20d59 // hsl(340, 90%, 50%)
```
<img alt="f2330d" data-src="holder.js/100x40/#f2330d:#000000/text:f2330d" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABM0lEQVRoQ+2WQQ7CIBQF7QHqZXr/I3gZPYAGI+ZLKGVByiSOKyPVPmd4vyz3bX1efGEILArBuHgHUQjLh0JgPhSiEBoBWB6fIQqBEYDFsSEKgRGAxbEhCoERgMWxIQqBEYDFsSEK+SVwvT2+H9y3dSoeQpapDckAkoja+2wniorQ0vqItbgLYo4ZuwMjJP/5EsietHT9iLUSukJ2dnne+S1AvWstyQr5EChHTzl+ygbUxkrrO3GtR0hrFJ45unAja2901aCMakhr9J0pI90LKaR3jitk8HapAe2FPPKhbkPCCSk6jsff0n35kB95JI5yyzyD9+Dhz00dWYfp/vAChcCkK0QhMAKwODZEITACsDg2RCEwArA4NkQhMAKwODZEITACsDg2RCEwArA4NkQhMAKwOC/H/B3gvr7FmQAAAABJRU5ErkJggg==" style="width: 100px; height: 40px;"> ➜ <img alt="f2a60d" data-src="holder.js/100x40/#f2a60d:#000000/text:f2a60d" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABRElEQVRoQ+2WbQ6CMBAF5QB4QA/IAfEAGow12PRTQzoh4y/TlOX1Td8u07rMj4s/jAOTQDAsXkIEwuIhEBgPgQiE5gBMjzNEIDAHYHJMiEBgDsDkmBCBwByAyTEhAoE5AJNjQgTy7cD1dv8srMs81B6ClqEJCQZsIFL/A50eUDlT9+tb3VzNvY4RtwMDJBw+NqTHoBrgAKFUs+d9RwA7DZAek3v2HmF6qeYwIHELSbWRnHGptlSq15K61pZ2NKBhQLaD/XJTa20pgM3tS723tPdoAHF9JJBaH0/d5lIKagkRyPtapIxvhZH7MksNboE05DzX81Pr8XxpfXb/aVubES0zreFYf28Z2rL+Vn/CAgKBQRWIQGAOwOSYEIHAHIDJMSECgTkAk2NCBAJzACbHhAgE5gBMjgkRCMwBmBwTIhCYAzA5T2zhLNgCO22nAAAAAElFTkSuQmCC" style="width: 100px; height: 40px;">

### mix

将两种颜色按不同比例混合在一起。计算中包括不透明度。

参数：

- `color1`: 颜色对象。
- `color2`: 颜色对象。
- `weight`: 可选项，两种颜色之间的平衡点百分比，默认为 50%。

返回： `color`

示例：

```less
mix(#ff0000, #0000ff, 50%)
mix(rgba(100,0,0,1.0), rgba(0,100,0,0.5), 50%)
```
输出：

```less
#800080
rgba(75, 25, 0, 0.75)
```
<img alt="ff0000" data-src="holder.js/100x40/#ff0000:#ffffff/text:ff0000" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABDklEQVRoQ+2aUQqDMBAFk/sfOkVB2KY1LjUlUzr9KqzKc6YvKWJtpbTiB0OgKgTjYg+iEJYPhcB8KEQhNAKwPO4hCoERgMWxIQqBEYDFsSEKgRGAxbEhCoERgMWxIQrpCLTw9L/W5+FoBgM5K87ahhzANxHx+3Z3Z7MoaX9eHSR+YzaLdPI6HCF94F5QL2kkbdYsCXHmYQoZNXMm6eS11gnpl5e4/JzNssuaDUnqzyxLxzEuWR9CvXPaO+gKWfjWiUJefs6/tYfEveG4Ff/23lmjPPeKwLqGXCX707lCYOIVohAYAVgcG6IQGAFYHBuiEBgBWBwbohAYAVgcG6IQGAFYHBuiEBgBWBwbAhPyAAV859kVMk7EAAAAAElFTkSuQmCC" style="width: 100px; height: 40px;"> + <img alt="0000ff" data-src="holder.js/100x40/#0000ff:#ffffff/text:0000ff" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABIUlEQVRoQ+2Z0QrCMBAEm///6EoLlRhqxIVNlmZ8EuJdzhkv19qybfu+8YohUBAS4+IsBCFZPhAS5gMhCEkjEFYPMwQhYQTCyqFDEBJGIKwcOgQhYQTCyqFDEBJGIKwcOgQhcwnUDxtK+ayltzaq6mkd0j6FqeE41g6gV95jr/r9r7VRMqb9/f4PDBViu0cLvYV89/mRIq69pnQIQr6rXkbI3YPq65jsrY3ukmWEcGR1flocWRxZJ4He4F56qNdw3lcX1T2B47KXGTJ6Gj5kvylD/SHsLF8DIRaselKE6OwskQixYNWTIkRnZ4lEiAWrnhQhOjtLJEIsWPWkCNHZWSIRYsGqJ0WIzs4SiRALVj0pQnR2lkiEWLDqSRGis7NEvgBONefZ3sAyLAAAAABJRU5ErkJggg==" style="width: 100px; height: 40px;"> ➜ <img alt="800080" data-src="holder.js/100x40/#800080:#ffffff/text:800080" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAAA5klEQVRoQ+2ZQQqAIBQF8+TmyY2CpBa1CPRPOO0kyOcMLwXTuqx18cEQSArBuDiCKITlQyEwHwpRCI0ALI97iEJgBGBxbIhCYARgcWyIQmAEYHFsiEJgBGBxbIhCYARgccIakmu+oSiptDHp3WhfIUJO4KeE65j0brSMsPsQEvS3LNMI2Rf69FvqIevrfNMI6QG9xzcVkkprDmF/UYhC4q5wSUfbtyyjWxJy7B29yD/NpxCYLYUoBEYAFseGKARGABbHhigERgAWx4YoBEYAFseGKARGABbHhigERgAWx4YoBEYAFmcDNEZGEBdzOZkAAAAASUVORK5CYII=" style="width: 100px; height: 40px;">

### tint

以可变比例将颜色与白色混合。这与调用 `mix(#ffffffff, @color, @weight)` 相同

参数：

- `color`: 颜色对象。
- `weight`: 可选项，色彩和白色之间的百分比平衡点，默认为 50%。

返回： `color`

示例：

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

```less
no-alpha: #80bfff;
with-alpha: rgba(191, 191, 255, 0.75);
```
<img alt="ff00ff" data-src="holder.js/100x40/#ff00ff:#ffffff/text:ff00ff" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABKklEQVRoQ+2Z0QqDMBAE9f8/2mIhcARN4gWaoU6fhHjNZid7Ed2P7Tg2fxgHdoFgWHyFCITFQyAwHgIRCM0BmB7PEIHAHIDJMSECgTkAk2NCBAJzACbHhAgE5gBMjgkRSOVAfPm/PxjLGvnr+R7qXJuQYs4JIl6fi7gbq7/eRIitsdZ/9sYemjpzOwdIvYoaUG1az8SR+jjn1f0zziZrBVKMez2Qqw/Hpf3cjY22tVaa4s7tzZfc5TNlJsSEhP3TahMjZ8DoQ8GI6a9vWVdtpXfIzrSszHwzvSdZu65lZc6QaGpZ8Ohjb3a+pLHZsnVAsor/vE4gMMACEQjMAZgcEyIQmAMwOSZEIDAHYHJMiEBgDsDkmBCBwByAyTEhAoE5AJNjQgQCcwAm5wNDV7uxLuf5AgAAAABJRU5ErkJggg==" style="width: 100px; height: 40px;"> ➜ <img alt="ff80ff" data-src="holder.js/100x40/#ff80ff:#ffffff/text:ff80ff" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABMElEQVRoQ+2W7QqDMBAE65O3fXKLgnAEzccF6oDTX5bkzLqTvWRZP+v68odxYBEIhsUuRCAsHgKB8RCIQGgOwPR4hggE5gBMjgkRCMwBmBwTIhCYAzA5JkQgMAdgckyIQAoH3uH/d2Asa+S/1xvUeW9CDnM2EPF5+4irsWjoNi9CrI3V3tkaGzR1ZjoHSPkVJaDStJaJPfVxzbP5M84mawVyGPd4IGV7ie1nZOxoWbWWF9MUd25ZezaW3OnZMhNiQsLeqbWJnjOg91LQY/rjW9bZId06ZHtvYlfvHt0A2b4zUXdfyxo5J2rnS++1N7vehLmZ0vuAZNQ+oEYgMMgCEQjMAZgcEyIQmAMwOSZEIDAHYHJMiEBgDsDkmBCBwByAyTEhAoE5AJNjQgQCcwAm5wf1986x1q1FzwAAAABJRU5ErkJggg==" style="width: 100px; height: 40px;">

### shade

以可变比例将颜色与黑色混合。这与调用 `mix(#000000, @color, @weight)` 相同

参数：

- `color`: 颜色对象。
- `weight`: 可选项，色彩和白色之间的百分比平衡点，默认为 50%。

返回： `color`

示例：

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

```less
no-alpha: #004080;
with-alpha: rgba(0, 0, 64, 0.75);
```
<img alt="ff00ff" data-src="holder.js/100x40/#ff00ff:#ffffff/text:ff00ff" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAABKklEQVRoQ+2Z0QqDMBAE9f8/2mIhcARN4gWaoU6fhHjNZid7Ed2P7Tg2fxgHdoFgWHyFCITFQyAwHgIRCM0BmB7PEIHAHIDJMSECgTkAk2NCBAJzACbHhAgE5gBMjgkRSOVAfPm/PxjLGvnr+R7qXJuQYs4JIl6fi7gbq7/eRIitsdZ/9sYemjpzOwdIvYoaUG1az8SR+jjn1f0zziZrBVKMez2Qqw/Hpf3cjY22tVaa4s7tzZfc5TNlJsSEhP3TahMjZ8DoQ8GI6a9vWVdtpXfIzrSszHwzvSdZu65lZc6QaGpZ8Ohjb3a+pLHZsnVAsor/vE4gMMACEQjMAZgcEyIQmAMwOSZEIDAHYHJMiEBgDsDkmBCBwByAyTEhAoE5AJNjQgQCcwAm5wNDV7uxLuf5AgAAAABJRU5ErkJggg==" style="width: 100px; height: 40px;"> ➜ <img alt="800080" data-src="holder.js/100x40/#800080:#ffffff/text:800080" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAoCAYAAAAIeF9DAAAA5klEQVRoQ+2ZQQqAIBQF8+TmyY2CpBa1CPRPOO0kyOcMLwXTuqx18cEQSArBuDiCKITlQyEwHwpRCI0ALI97iEJgBGBxbIhCYARgcWyIQmAEYHFsiEJgBGBxbIhCYARgccIakmu+oSiptDHp3WhfIUJO4KeE65j0brSMsPsQEvS3LNMI2Rf69FvqIevrfNMI6QG9xzcVkkprDmF/UYhC4q5wSUfbtyyjWxJy7B29yD/NpxCYLYUoBEYAFseGKARGABbHhigERgAWx4YoBEYAFseGKARGABbHhigERgAWx4YoBEYAFmcDNEZGEBdzOZkAAAAASUVORK5CYII=" style="width: 100px; height: 40px;">

### greyscale

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

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

参数：`color`: 颜色对象。

返回： `color`

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

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

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

与使用 luma 进行比较（用法不同，因为 luma 返回的是单个值，而不是颜色）：

```less
@c: luma(hsl(90, 90%, 50%));
color: rgb(@c, @c, @c);
```
输出： `#cacaca`

这一次，灰色的亮度看起来与绿色差不多，但其数值实际上更高。

### contrast

从两种颜色中选择与另一种颜色对比度最大的一种。

这对于确保颜色在背景中的可读性非常有用，对于符合可访问性要求也非常有用。该函数的工作原理与[Compass for SASS 中的对比度函数](http://compass-style.org/reference/compass/utilities/color/contrast/ "Compass for SASS 中的对比度函数")相同。根据[WCAG 2.0](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef "WCAG 2.0")，颜色是通过伽马校正后的 luma 值而不是亮度来比较的。

明暗参数可以任选一个顺序提供--该功能将计算它们的 luma 值并自动分配明暗，这意味着您无法使用该功能通过颠倒顺序来选择对比度最小的颜色。

参数：

- `color`: 要与之比较的颜色对象。
- `dark`: 可选 - 指定的深色（默认为黑色）。
- `light`: 可选 - 指定的灯光颜色（默认为白色）。
- `threshold`: 可选 - 一个 0-100% 的百分比，指定从 "dark" 到 "light" 的过渡位置（默认值为 43%，与 SASS 一致）。这个百分比用于调整对比度，例如让你决定 50%的灰色背景应该产生黑色还是白色文字。一般来说，"lighter" 调色板可以设置得低一些，而 "darker" 调色板则可以设置得高一些。

返回： `color`

示例：

```less
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%);
}
```
输出：

```less
p {
    a: #000000 // black
    b: #ffffff // white
    c: #dddddd
    d: #000000 // black
    e: #ffffff // white
}
```
这些示例使用上述计算出的颜色作为背景和前景色；您可以看到，您永远不会得到白底黑字或黑底白字的结果，尽管可以使用阈值来允许较低对比度的结果，如最后一个示例：