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($hue,$saturation,$lightness)
  hsla($hue,$saturation,$lightness,$alpha)
  hue($color)
  saturation($color)
  lightness($color)
  adjust-hue($color,$degrees)
  lighten($color,$amount)
  darken($color,$amount)
  saturate($color,$amount)
  desaturate($color,$amount)
  grayscale($color)
  complement($color)
  invert($color)