HSL函数简介

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() 几个函数。接下来，我们针对这几个函数来做进一步的了解与学习。

HSL函数-lighten()

lighten() 和 darken() 两个函数都是围绕颜色的亮度值做调整的，其中 lighten() 函数会让颜色变得更亮，与之相反的 darken() 函数会让颜色变得更暗。这个亮度值可以是 0~1 之间，不过常用的一般都在 3%~20% 之间。

来看一个简单的实例，首先定义一个颜色变量：

$baseColor: #ad141e; 

使用 lighten() 和 darken() 函数来修改 10% 的亮度值：

//SCSS .lighten {     background: lighten($baseColor,10%); } .darken{     background: darken($baseColor,10%); }

编译出来的 css 代码：

//CSS .lighten {   background: #db1926; }  .darken {   background: #7f0f16; }

从效果中，明显看出颜色之间的差异，我们使用函数 lightness()函数来验证一下三个颜色之间亮度值的变化：

>> lightness(#ad141e) //原色的亮度值 37.84314% >> lightness(#db1926) //在原色的亮度值基础上增加10% 47.84314% >> lightness(#7f0f16) //在原色的亮度值基础上减少10% 27.84314% 

lighten() 和 darken() 函数只是在原始颜色的基础上对亮度值进行运算操作，但是生成出来的新颜色在色相和饱和度会有略微的变化，比如上面的实例生成的新颜色与原始色在色相与饱和度值的对比：

>> hue(#ad141e) 356.07843deg >> hue(#db1926) 355.97938deg >> hue(#7f0f16) 356.25deg >> saturation(#ad141e) 79.27461% >> saturation(#db1926) 79.5082% >> saturation(#7f0f16) 78.87324% 

如果有点颜色概念基础的同学应该都清楚，不管什么颜色当其亮度值 趋近于0时，颜色会越来越暗，直到变成了黑色；反之，当其亮度值趋近于 100% 时，颜色会越来越亮，直到变成了白色。但当使用 lighten() 和 darken() 函数对一个颜色的亮度值计算时，会碰到两个极端，lighten() 函数会让新颜色的亮度值超过 100%，而 darken() 函数会让新颜色的亮度值低于 0 变成负数。可实际上任何颜色的亮度值都在 0~100% 之间，如此一来，Sass 的 lighten() 和 darken() 函数又将会如何处理呢？

带着上面的疑问，我们一起来做一个简单性的测试。从上面的示例中得知 #ad1414 的亮度值为 37.84314%，为了让新颜色的亮度值大于 100% 和小于 0，在对应的函数，做一些调整：

//SCSS $baseColor:#ad141e; .lighten {     background: lighten($baseColor,70%); } .darken{     background: darken($baseColor,40%); }

编译出来的 css 代码：

//CSS .lighten {   background: white; }  .darken {   background: black; }

上面的例子说明了一切问题。当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。

 

HSL函数-saturate()

saturate()、desaturate()这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。

//SCSS $baseColor: #ad141e; .saturate {   background: saturate($baseColor,30%); //在原色饱和度基础上增加饱和度 } .desaturate {   background: desaturate($baseColor,30%);//在原色饱和度基础上减少饱和度 }

编译出来的 css 代码：

//CSS .saturate {   background: #c1000d; }  .desaturate {   background: #903137; }

颜色变了。同样使用 saturation() 函数在终端中进行计算一下，看看他们有什么样的变化：

>> saturation(#ad141e) //原色的饱和度 79.27461% >> saturation(#c1000d)  //在原色饱和度基础上增加30%,超过100%时按100%计算 100% >> saturation(#903137) //在原色饱和度基础上减少30%,小于0时按0计算 49.2228%

HSL函数-adjust-hue()函数

这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数：

//SCSS $baseColor: #ad141e; .adjust-hue-deg {   background: adjust-hue($baseColor,30deg); } .adjust-hue-per {   background: adjust-hue($baseColor,30%); }

编译出的 css 代码：

//CSS .adjust-hue-deg {   background: #ad5614; }  .adjust-hue-per {   background: #ad5614; }

从转译出来的代码，不难发现他们的颜色是一样的。尝试多次，如果两个值（抛弃 deg 和 100%）相同，计算出来的颜色也会一样。

同样的，可以通过 hue() 函数得到颜色转换前后的色相值：

>> hue(#ad141e) //原颜色色相值 356.07843deg >> hue(#ad5614) //在原色色相基础上增加30deg 25.88235deg 

这里有一个很有意思的地方，在 HSL 颜色表达方式上，色相是从 -360 和 360 之间，负值逆时针转，正值顺时针转。在这个实例中，原色的色相值约 356deg，加上 30deg 后，新颜色变成了 386deg，但我们的色盘中并没有比 360deg 更大的值，此时新颜色的值也并不会是386deg，那将怎么办呢？其实很简单，当值大于 360deg时，表示色盘转完了一圈，继续顺时针转余下的值（这里是 26deg），那么这个继续转的值就是新颜色的色相值。小伙伴们，看到这个，你是不是又有点惊了。反之，得到的负数值也是一样的道理。

HSL函数-grayscale()函数

这个函数会颜色的饱和度值直接调至 0%，所以此函数与 desaturate($color,100%) 所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。例如：

//SCSS $baseColor: #ad141e; .grayscale {   background: grayscale($baseColor); } .desaturate {   background: desaturate($baseColor,100%); }

编译出来的 css 代码：

//CSS .grayscale {   background: #616161; }  .desaturate {   background: #616161; }

看看计算出来的 HSL 各个值的变化：

>> hue(#ad141e) 356.07843deg >> hue(#616161) 0deg >> saturation(#ad141e) 79.27461% >> saturation(#616161) 0% >> lightness(#ad141e) 37.84314% >> lightness(#616161) 38.03922%

grayscale() 函数处理过的颜色，其最大的特征就是颜色的饱和度为 0。