4-5 HSL函数简介

在 Sass 中提供了一系列有关于 HSL 的颜色函数，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。接下来我们先来了解一下 HSL 颜色函数包括哪些具体的函数，所起的作用是什么：

• hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
• hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
• hue($color)：从一个颜色中获取色相（hue）值；
• saturation($color)：从一个颜色中获取饱和度（saturation）值；
• lightness($color)：从一个颜色中获取亮度（lightness）值；
• adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
• lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
• darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
• saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
• desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
• grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
• complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
• invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

同样在你的终端，通过 sass -i 来对上面的各个函数做一个简单测试：

>> hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色
#7aa3b8

>> hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色
rgba(122, 163, 184, 0.8)

>> hue(#7ab)//得到#7ab颜色的色相值
195deg

>> saturation(#7ab)//得到#7ab颜色的饱和度值
33.33333%

>> lightness(#7ab)//得到#7ab颜色的亮度值
60%

>> adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg
#33ff66

>> lighten(#f36,50%) //把#f36颜色亮度提高50%
#ffffff

>> darken(#f36,50%) //把#f36颜色亮度降低50%
#33000d

>> saturate(#f36,50%) //把#f36颜色饱和度提高50%
#ff3366

>> desaturate(#f36,50%) //把#f36颜色饱和度降低50%
#cc667f

>> grayscale(#f36) //把#f36颜色变成灰色
#999999

>> complement(#f36)
#33ffcc

>> invert(#f36)
#00cc99

在 HSL 函数中，hsl() 和 hsla() 函数主要是通过颜色的 H、S、L 或者 A 几个参数获取一个 rgb 或 rgba 表达的颜色，这两个函数与 CSS 中的无太大区别，只是使用这两个函数能帮助您知道颜色的十六进制表达式和 rgba 表达式。

而 hue()、saturation() 和 lightness() 函数主要是用来获取指定颜色中的色相值、饱和度和亮度值。对于颜色表达没有太多的实际作用。

HSL 函数中最常见的应该是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 几个函数。接下来，我们针对这几个函数来做进一步的了解与学习。