Sass カラーコンスタント

Sass カラーコンスタント

Sass 内の色関数は三つの部分に分けられます：色設定関数、色取得関数、色操作関数：

Sass 色設定関数

Sassの色操作関数 関数
rgb(レッド, グリーン, ブルー)

Red-Green-Blue (RGB) モデルを使用して色を設定します。
rgb(red, green, blue) を指定して RGB 色値を設定します。
各パラメータはその色の強度を定義し、0 から 255 までの整数または百分率（0% から 100%）ができます。

实例：

rgb(0, 0, 255);
// 蓝色呈現、blue パラメータが最高値（255）に設定され、他のパラメータが 0 に設定されています
rgba(レッド, グリーン, ブルー, アルファ)

使用 Red-Green-Blue-Alpha (RGBA) モデルを使用して色を設定します。
RGBA 項色値は alpha チャンネルを持つ RGB 項色値の拡張で、このチャンネルは色の不透明度を指定します。
アルファ パラメータは 0.0（完全透明）から 1.0（完全不透明）の間の数字でなければなりません。

实例：

rgba(0, 0, 255, 0.3); // 透明度を持つ青色
hsl(ヒュース, サチュレーション, ライトネス)

Hue-Saturation-Lightness (HSL) モデルを使用して色を設定します - これは色の円筒座標表示を表します。
Hue（色相）は色車の度数（0から360）です；0または360は赤で、120は緑で、240は青です。
Saturation（饱和度）はパーセンテージで、0% はグレーの影で、100% は全彩です。
Lightness（明度）はパーセンテージです；0% は黒で、100% は白です。

实例：

hsl(120, 100%, 50%); // 緑色
hsl(120, 100%, 75%); // 薄緑色
hsl(120, 100%, 25%); // 深緑色
hsl(120, 60%, 70%); // 淡緑色

hsla(ヒュース, サチュレーション, ライトネス, アルファ)

Hue-Saturation-Lightness-Alpha (HSLA) モデルを使用して色を設定します。
HSLA 項色値は HSL 項色値の拡張で、alpha チャンネルを持っています - 色の不透明度を指定します。
アルファ パラメータは 0.0（完全透明）から 1.0（完全不透明）の間の数字でなければなりません。

实例：

hsl(120, 100%, 50%, 0.3); // 透明度を持つ緑色
hsl(120, 100%, 75%, 0.3); // 透明度を持つ薄緑色

grayscale(color)

色と同じ明度を持つグレーを設定します。

实例：

grayscale(#7fffd4);

結果：#c6c6c6
complement(color)

色の補色を設定します。

实例：

complement(#7fffd4);

結果：#ff7faa
invert(color, 色1と色2のミックス色を作成します。)

色の反色または逆色を設定します。
色1と色2のミックス色を作成します。パラメータはオプションです。0% から 100% の間の数字でなければなりません。デフォルト値は 100% です。

实例：

invert(white);

結果：black

Sass 色取得関数

Sassの色操作関数 関数
red(color)

0 から 255 の間の数字で色の赤色値を返します。

实例：

red(#7fffd4);

結果：127

red(red);

blue(blue);
green(color)

0 から 255 の間の数字で色の緑色値を返します。

实例：

green(#7fffd4);

blue(blue);

green(blue);

green(blue);
結果：0color)

blue(

实例：

0から255の間の数値で色の青色値を返します。

blue(#7fffd4);

結果：212

blue(blue);
結果：255color)

hue(

实例：

0degから360degの間の数値で色のトーンを返します。

hue(#7fffd4);
結果：160degcolor)

saturation(

实例：

0%から100%の間の数値で色のHSL鮮やかさを返します。

saturation(#7fffd4);
結果：100%color)

lightness(

实例：

0%から100%の間の数値で色のHSL明度を返します。

lightness(#7fffd4);
結果: 74.9%color)

opacity(

实例：

alpha(

alpha(#7fffd4);
結果: 1color)

opacity(

实例：

0から1の間の数値で色のアルファチャンネルを返します。

opacity(rgba(127, 255, 212, 0.5));

結果: 0.5

Sassの色操作関数 関数
説明 & 例大きいウェイトは、もっと, color2, 色1と色2のミックス色を作成します。)

mix(
色1と色2のミックス色を作成します。 weight
パラメータの範囲は0%から100%です。デフォルト値は50%です。 大きいウェイトは、もっと。
小さいウェイトは、もっと color2。

adjust-hue(color, 度)

色のトーンを-360度から360度の間の度数で調整します。

实例：

adjust-hue(#7fffd4, 80deg);

結果: #8080ff
adjust-color(color, レッド, グリーン, ブルー, ヒュース, サチュレーション, ライトネス, アルファ)

指定された量で1つまたは複数のパラメータを調整します。
この関数は、現在の色値に指定された量を加算または減算します。

实例：

adjust-color(#7fffd4, blue: 25);

結果:
change-color(color, レッド, グリーン, ブルー, ヒュース, サチュレーション, ライトネス, アルファ)

色の1つまたは複数のパラメータを新しい値に設定します。

实例：

change-color(#7fffd4, red: 255);

結果: #ffffd4
scale-color(color, レッド, グリーン, ブルー, サチュレーション, ライトネス, アルファ) 1つまたは複数の色パラメータをスケールします。
rgba(色, アルファ)

指定されたアルファチャンネルを使用して新しい色を作成します。

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
インスタンス：color, amount) rgba(#7fffd4, 30%);
amount Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) HSL明るさのパーセンテージに基づいてパラメータを増加させます。
amount darken(
HSL明るさのパーセンテージに基づいてパラメータを減少させます。color, amount) saturate(
amount HSL鮮やかさのパーセンテージに基づいてパラメータを増加させます。
desaturate(color, amount) 0%と100%の間の量を使用して鮮やかさが低い色を作成します。
amount HSL鮮やかさのパーセンテージに基づいてパラメータを減少させます。
opacify(color, amount) 0と1の間の数値を使用してより不透明な色を作成します。
amount アルファチャンネルの値に基づいてパラメータを増加させます。
fade-in(color, amount) 0と1の間の数値を使用してより不透明な色を作成します。
amount アルファチャンネルの値に基づいてパラメータを減少させます。
transparentize(color, amount) 0と1の間の数値を使用してより透明な色を作成します。
amount アルファチャンネルの値に基づいてパラメータを減少させます。
fade-out(color, amount) 0と1の間の数値を使用してより透明な色を作成します。
amount アルファチャンネルの値に基づいてパラメータを増加させます。