Sass 関数 カラー関数 HSL function_html/css_WEB-ITnose

HSL 関数の紹介
HSL カラー関数にはどのような機能が含まれており、その役割は何ですか:

hsl($hue,$saturation,$lightness): 色相 (色相)、彩度を通して(彩度) と明度の値からの色;

hsla($hue,$saturation,$lightness,$alpha): 色相、彩度、明度、透明度 (alpha) の値を渡します。 ;

hue($color): 色から色相 (色相) の値を取得します。

saturation($color): 色 ) の値から彩度 (彩度) を取得します。 color)

: 色から明度の値を取得します。

adjust-hue($color,$degrees)

: 色の色相の値を変更して新しい値を作成します。

lighten($color,$) amount)

: 色の明るさの値を変更することで、色を明るくし、新しい色を作成します

darken($color,$amount)

: 色の明るさの値を変更することで、色が暗くなります。新しい色を作成します

saturate($color,$amount)

: 色の彩度の値を変更することで、色の彩度が上がり、新しい色が作成されます

desaturate($color,$amount) )

: 色の彩度の値を変更して色の彩度を下げることで新しい色を作成します

grayscale($color)

: 色を灰色に変換します。彩度を下げる($color,100%);

と同等です。 complement($color)

: 補色を返します。adjust-hue($color,180deg);

invert($color)

: Invert 赤、緑、青の値を反転した色です。反転されますが、透明度は変わりません。

すごいです

最も一般的な HSL 関数は、lighten()、darken()、saturate()、desaturate()、grayscale()、complement()、および invert() です。

HSL function-lighten()

lighten() と darken() は、色の明るさの値を調整する 2 つの関数です。 lighten() 関数は色を明るくします。 darken()関数は色を暗くします。この輝度値は 0 ～ 1 の間で指定できますが、一般的に使用される値は通常 3% ～ 20% の間です。 最初にカラー変数を定義します:

 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

lighten() 関数と darken() 関数を使用して 10% の明るさの値を変更します:

$baseColor: #ad141e;

コンパイルされた CSS コード:

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

機能を使用するlightness() 関数を使用して、3 つの色の間の輝度値の変化を確認します。

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

色の輝度値が 100% に近いかそれを超える場合、色は白になります。色の値が 0 に近いかそれより小さい場合、色は黒に変わります。

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

コンパイルされたCSSコード:

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

HSL function-saturate()

saturate()、desaturate()
この2つの関数は色の彩度を変更して新しい色を取得します。

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

コンパイルされた CSS コード:

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

色が変更されました。また、saturation() 関数を使用してターミナルで計算し、どのような変化があるかを確認します。 color 新色です。色と色相の値が必要です。通常、この度数の値は -360 度から 360 度の間ですが、もちろんパーセンテージにすることもできます:

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

コンパイルされた CSS コード:

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

hue()

関数を使用して、前と前の色相値を取得できます。色変換後:

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 }

HSL

の色表現では、色相は -360 から 360 で、負の値は反時計回り、正の値は時計回りになります。この例では、原色の色相値は約 356 度であり、30 度を追加すると、新しい色は 386 度になります。ただし、この時点では、新しい色の値は 360 度を超えません。 386度ではないのですがどうしますか？実際、値が 360 度を超えると、カラー ホイールが 1 回転し、残りの値 (ここでは 26 度) が時計回りに回転し続けることを意味します。新しい色の色相値。逆に、負の値が得られた場合も同様です。

 

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。