常用的 less 颜色操作函数

hsl

---

通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。

参数：

• hue: 0-360的整数，用于表示度数
• saturation: 0-100%的百分比数或0-1的整数
• lightness: 0-100%的百分比数或0-1的整数

返回值：color

当你想基于一种颜色来创建另一种颜色的时候很方便；常用的颜色值运算函数如下：

---

1).增加一定数值的颜色饱和度：saturate()
2).降低一定数值的颜色饱和度：desaturate()
3).增加一定数值的颜色亮度：lighten()
4).降低一定数值的颜色亮度：darken()
5).降低颜色的透明度（或增加不透明度），令其更不透明：fadein()
6).增加颜色的透明度（或降低不透明的），令其更透明：fadeout()
7).给颜色（包括不透明的颜色）设定一定数值的透明度：fade()
8).任意方向旋转颜色的色相角度（hue angle）:spin()

1. saturate(hsl(90,80%,50%),20%) -- 添加饱和度
   输出：#80ff00 // hsl(90, 100%, 50%)

   
   saturate 添加饱和度

2. desaturate(hsl(90, 80%, 50%), 20%) -- 减少饱和度
   输出：#80cc33 // hsl(90, 60%, 50%)

   
   desaturate 减少饱和度

3. lighten(hsl(90, 80%, 50%), 20%) -- 亮度增加
   输出：#b3f075 // hsl(90, 80%, 70%)

   
   lighten 亮度增加

4. darken(hsl(90, 80%, 50%), 20%) -- 亮度减少
   输出：#4d8a0f // hsl(90, 80%, 30%)

   
   darken 亮度减少

5. fadein(hsla(90, 90%, 50%, 0.5), 10%) -- 不透明度增加
   输出：rgba(128, 242, 13, 0.6) // hsla(90, 90%, 50%, 0.6)

   
   fadein 不透明度增加

6. fadeout(hsla(90, 90%, 50%, 0.5), 10%) -- 不透明度减少

   
   不透明度减少

输出：rgba(128, 242, 13, 0.4) // hsla(90, 90%, 50%, 0.4)
7.fade(hsl(90, 90%, 50%), 10%) -- 给颜色一个不透明度
输出：rgba(128, 242, 13, 0.1) //hsla(90, 90%, 50%, 0.1)

fade给颜色一个不透明度

8. spin(hsl(90, 80%, 50%), 30) -- 色相角度增加
   输出：#19e619 // hsl(120, 80%, 50%)

   
   image.png

8.1. spin(hsl(90, 80%, 50%), -10) -- 色相角度减少
输出：#a1e619// hsl(80, 80%, 50%)

image.png

参考文档

---

• less函数手册