Sass函數--顏色函數--HSL函數，sass函數----hsl

Sass函數--顏色函數--HSL函數，sass函數----hsl

HSL函數簡介
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)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

 1 >> hsl(200,30%,60%) //通過h200,s30%，l60%建立一個顏色 2 #7aa3b8 3 >> hsla(200,30%,60%,.8)//通過h200,s30%，l60%,a80%建立一個顏色 4 rgba(122, 163, 184, 0.8) 5 >> hue(#7ab)//得到#7ab顏色的色相值 6 195deg 7 >> saturation(#7ab)//得到#7ab顏色的飽和度值 8 33.33333% 9 >> lightness(#7ab)//得到#7ab顏色的亮度值10 60%11 >> adjust-hue(#f36,150deg) //改變#f36顏色的色相值為150deg12 #33ff6613 >> lighten(#f36,50%) //把#f36顏色亮度提高50%14 #ffffff15 >> darken(#f36,50%) //把#f36顏色亮度降低50%16 #33000d17 >> saturate(#f36,50%) //把#f36顏色飽和度提高50%18 #ff336619 >> desaturate(#f36,50%) //把#f36顏色飽和度降低50%20 #cc667f21 >> grayscale(#f36) //把#f36顏色變成灰色22 #99999923 >> complement(#f36)24 #33ffcc25 >> invert(#f36)26 #00cc99

HSL 函數中最常見的應該是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 幾個函數。

 

 

 

HSL函數-lighten()
lighten() 和 darken() 兩個函數都是圍繞顏色的亮度值做調整的，其中 lighten() 函數會讓顏色變得更亮，與之相反的 darken() 函數會讓顏色變得更暗。這個亮度值可以是 0~1 之間，不過常用的一般都在 3%~20% 之間。
首先定義一個顏色變數：

$baseColor: #ad141e;

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

1 //SCSS2 .lighten {3     background: lighten($baseColor,10%);4 }5 .darken{6     background: darken($baseColor,10%);7 }

編譯出來的 css 代碼：

1 //CSS2 .lighten {3     background: #db1926;4 }5 .darken {6     background: #7f0f16;7 }

使用函數 lightness() 函數來驗證一下三個顏色之間亮度值的變化：

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

當顏色的亮度值接近或大於 100%，顏色會變成白色；反之顏色的亮度值接近或小於 0 時，顏色會變成黑色。

 

1 //SCSS2 $baseColor:#ad141e;3 .lighten {4     background: lighten($baseColor,70%);5 }6 .darken{7     background: darken($baseColor,40%);8 }

 

編譯出來的 css 代碼：

1 //CSS2 .lighten {3     background: white;4 }5 .darken {6     background: black;7 }

 

 

 

HSL函數-saturate()
saturate()、desaturate()這兩個函數是通過改變顏色的飽和度來得到一個新的顏色。

1 //SCSS2 $baseColor: #ad141e;3 .saturate {4     background: saturate($baseColor,30%); //在原色飽和度基礎上增加飽和度5 }6 .desaturate {7     background: desaturate($baseColor,30%);//在原色飽和度基礎上減少飽和度8 }

編譯出來的 css 代碼：

1 //CSS2 .saturate {3     background: #c1000d;4 }5 .desaturate {6     background: #903137;7 }

顏色變了。同樣使用 saturation() 函數在終端中進行計算一下，有什麼樣的變化：

1 >> saturation(#ad141e) //原色的飽和度2 79.27461%3 >> saturation(#c1000d) //在原色飽和度基礎上增加30%,超過100%時按100%計算4 100%5 >> saturation(#903137) //在原色飽和度基礎上減少30%,小於0時按0計算6 49.2228%

 

 

 

 

HSL函數-adjust-hue()函數
通過調整顏色的色相換算一個新顏色。他需要一個顏色和色相度數值。通常這個度數值是在 -360deg 至 360deg 之間，當然了可以是百分數：

1 //SCSS2 $baseColor: #ad141e;3 .adjust-hue-deg {4     background: adjust-hue($baseColor,30deg);5 }6 .adjust-hue-per {7     background: adjust-hue($baseColor,30%);8 }

編譯出的 css 代碼：

1 //CSS2 .adjust-hue-deg {3     background: #ad5614;4 }5 .adjust-hue-per {6     background: #ad5614;7 }

可以通過 hue() 函數得到色彩轉換前後的色相值：

>> hue(#ad141e) //原顏色色相值356.07843deg>> hue(#ad5614) //在原色色相基礎上增加30deg25.88235deg

在 HSL 顏色表達方式上，色相是從 -360 和 360 之間，負值逆時針轉，正值順時針轉。在這個執行個體中，原色的色相值約 356deg，加上 30deg 後，新顏色變成了 386deg，但我們的色盤中並沒有比 360deg 更大的值，此時新顏色的值也並不會是386deg，那將怎麼辦呢？其實很簡單，當值大於 360deg時，表示色盤轉完了一圈，繼續順時針轉餘下的值（這裡是 26deg），那麼這個繼續轉的值就是新顏色的色相值。反之，得到的負數值也是一樣的道理。

 

 

 

HSL函數-grayscale()函數
這個函數會把顏色的飽和度值直接調至 0%，所以此函數與 desaturate($color,100%) 所起的功能是一樣的。一般這個函數能將彩色色彩轉換成不同程度的灰色。

1 //SCSS2 $baseColor: #ad141e;3 .grayscale {4     background: grayscale($baseColor);5 }6 .desaturate {7     background: desaturate($baseColor,100%);8 }

編譯出來的 css 代碼：

1 //CSS2 .grayscale {3     background: #616161;4 }5 .desaturate {6     background: #616161;7 }

看看計算出來的 HSL 各個值的變化：

 1 >> hue(#ad141e) 2 356.07843deg 3 >> hue(#616161) 4 0deg 5 >> saturation(#ad141e) 6 79.27461% 7 >> saturation(#616161) 8 0% 9 >> lightness(#ad141e)10 37.84314%11 >> lightness(#616161)12 38.03922%

grayscale() 函數處理過的顏色，其最大的特徵就是顏色的飽和度為 0。