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），那麼這個繼續轉的值就是新顏色的色相值。小伙伴們，看到這個，你是不是又有點驚了。反之，得到的負數值也是一樣的道理。