写在前面

LESS中有许多关于颜色的函数，颜色操作函数是其中的一个大类，除此以外还有颜色定义函数、颜色通道函数、颜色混合函数。官网文档：
https://less.bootcss.com/functions/#color-definition-functions

控制饱和度

saturate(color，amount，method?) 增加饱和度

参数

color：一个颜色类型的值（#000000或者rag(0，0，0)）
amount：增加的饱和度百分比 0-100% （直接加在原始值上，比如原始值为0.2，设置20%后就是0.2 + 20% = 0.4）
method：可选，当设置为 relative 时将会以相对当前饱和度的值进行增加。（以原本值为基础按百分比增加，0.2 + 0.2 x 20% = 0.24）下同

实例

  1. @color: #80e619;
  3. .colorFunction {
  4.   color1: @color;
  5.   color2: saturate(@color, 20%);
  6. }

编译为：

.colorFunction {
  color1: #80e619;
  color2: #80ff00;
}

desaturate 降低饱和度

用法与saturate一样，只是这个是降低饱和度。

控制亮度

lighten(color，amount，method?) 提高亮度

参数

color：一个颜色类型的值（#000000或者rag(0，0，0)）
amount：增加的亮度百分比 0-100%
method：可选，当设置为 relative 时将会以相对当前颜色亮度的值进行增加。

实例

.colorFunction {
  color1: @color;
  color2: lighten(@color, 20%)
}

编译为：

.colorFunction {
  color1: #80e619;
  color2: #b3f075;
}

darken 降低亮度

参数

color：一个颜色类型的值（#000000或者rag(0，0，0)）
amount：降低的亮度百分比 0-100%
method：可选，当设置为 relative 时将会以相对当前饱和度的值进行增加。
用法相同，只是降低亮度

控制透明度

fadein(color，amount，method?) 降低透明度

参数与上相同，不再重复。
用于降低颜色的透明度，如果要增加透明度请使用fadeout

实例

@color: rgba(0, 255, 0, 0.2);

.colorFunction {
  color1: @color;
  color2: fadein(@color, 20%);
}

编译为：

.colorFunction {
  color1: rgba(0, 255, 0, 0.2);
  color2: rgba(0, 255, 0, 0.4); //饱和度增加了20%，当设置为relative时则增加0.2 x 20% = 0.04
}

fadein(color，amount，method?) 增加透明度

注意fadein和fadeout的顺序，fadein淡入是降低饱和度，fadeout淡出是增加饱和度

fade(color，amount) 设置绝对不透明度

功能：为一个颜色设置按百分比设置绝对不透明度，即使其本身设置了或没设置透明度。

实例

@color: #80e619;

.colorFunction {
  color1: @color;
  color2: fade(@color, 40%);
}

编译为：
image.png

控制颜色的一些属性

颜色具有几个属性：色调，色相，明度(深浅)，灰度

spin(color，angle) 改变色调

功能：在色盘上按照一个角度旋转改变当前颜色的色调
这样讲可能有点抽象，看图：
image.png

参数：

color：颜色
angle：在色盘上旋转的角度（+/-）当为正时顺时针旋转，为负时逆时针旋转（取值范围为0-360，超过360时按照mod360取值）。

实例

hsl为按照色调(hue)，饱和度(saturate)，亮度(light)设置的颜色

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

编译为：

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

image.png

mix(color1，color2，weight?) 混合两种颜色

参数

color1：第一个颜色
color2：第二个颜色
weight：可选。两种颜色之间的百分比平衡点，默认为 50%。

实例

.colorFunction {
  color: mix(red, blue, 50%)
}

编译为：

.colorFunction {
  color: #800080;
}

image.png


greyscale(color) 提取颜色的灰度

这个函数相当于剔除颜色本身的所有颜色，只留下灰色，相当于降低颜色100%的饱和度，所以该函数也等同于使用 desaturate(@color, 100%).

注意点

由于饱和度不受色调的影响，因此生成的颜色映射可能有些暗淡或浑浊； luma函数 可能会提供更好的结果，因为它提取的是感知亮度（即人眼能观察的亮度）而不是线性亮度（计算机亮度），例如 greyscale(‘#0000ff’) 将返回与 greyscale(‘#00ff00’) 相同的值，尽管它们在人眼看来的亮度完全不同。
luma是用于计算颜色亮度的函数。
使用greyscale时
image.png

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

使用luma时

image.png

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

控制颜色的明度

明度其实挺难描述的，明度高的颜色一般出现在亮部，明度低的则出现在暗部，简单来说，混入白色越多的颜色明度越高，反之黑色越多的颜色明度越低。

tint(color，weight?) 增加颜色的明度

功能

简单来说就是给当前颜色混入白色，混入的白色越多颜色越明亮，越接近白色。相当于使用mix函数只混入白色 mix(#ffffff, @color, @weight)

参数

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

image.png


shade(color，weight?) 降低颜色的明度

与tint功能相反，用法相同

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

image.png


contrast(color，dark?，light?，threshold?) 提供强对比色比较

能比较一种颜色是否与一种颜色形成强烈对比，这在提供字体和背景颜色时非常有用，可以用于保证在当前背景颜色下，字体内容的可读性。

这有助于确保颜色在背景下可读，这对于可访问性合规性也很有用。 此功能的工作方式与 Compass for SASS 中的对比功能相同。 根据 WCAG 2.0，颜色的比较使用的是经过伽马校正的亮度值，而不是亮度。

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

使用方法

你可以只提供一个颜色color，contrast会计算出与其具有强烈对比的另一个颜色，并将其返回。