Fungsi Warna Sass

Fungsi Warna Sass

Kami membagi fungsi warna Sass menjadi tiga bagian: fungsi setting warna, fungsi ambil warna, dan fungsi operasi warna:

Fungsi Seting Warna Sass

Fungsi Sass untuk operasi warna Fungsi
rgb(merah, hijau, biru)

Atur warna menggunakan model Red-Green-Blue (RGB)
Tentukan nilai warna RGB melalui rgb(red, green, blue)
Setiap parameter menentukan kekuatan warna, boleh jadi bilangan bulat dari 0 hingga 255, atau persen (dari 0% hingga 100%)

Contoh:

rgb(0, 0, 255);
// diwarnakan biru, kerana parameter blue diatur ke nilai maksimum (255), parameter lain diatur ke 0
rgba(merah, hijau, biru, alpha)

使用 Red-Green-Blue-Alpha (RGBA) 模型设置颜色。
RGBA 颜色值是带有 alpha 通道的 RGB 颜色值的扩展 - 该通道指定颜色的不透明度。
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

Contoh:

rgba(0, 0, 255, 0.3); // 呈现为有透明度的蓝色
hsl(siraman, kepadatan, kecerahan)

使用 Hue-Saturation-Lightness 模型设置颜色 - 并代表颜色的圆柱坐标表示。
Hue（色调）是色轮上的度数（从0到360）- 0或360是红色，120是绿色，240是蓝色
Saturation（饱和度）是百分比值； 0% 表示灰色阴影，100% 表示全彩。
Lightness（亮度）也是百分比；0% 是黑色，100% 是白色。

Contoh:

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

hsla(siraman, kepadatan, kecerahan, alpha)

使用 Hue-Saturation-Lightness-Alpha (HSLA) 模型设置颜色。
HSLA 颜色值是 HSL 颜色值的扩展，带有 alpha 通道 - 指定颜色的不透明度。
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

Contoh:

hsl(120, 100%, 50%, 0.3); // 带不透明度的绿色
hsl(120, 100%, 75%, 0.3); // 带不透明度的浅绿色

grayscale(color)

设置与颜色具有相同亮度的灰色。

Contoh:

grayscale(#7fffd4);

结果：#c6c6c6
complement(color)

设置颜色的互补色。

Contoh:

complement(#7fffd4);

结果：#ff7faa
invert(color, Buat warna campuran antara warna 1 dan warna 2.)

设置颜色的反色或负色。
Buat warna campuran antara warna 1 dan warna 2.参数是可选的，必须是介于 0% 和 100% 之间的数字。默认值为100%。

Contoh:

invert(white);

结果：black

Sass 获取颜色函数

Fungsi Sass untuk operasi warna Fungsi
red(color)

以 0 到 255 之间的数字返回颜色的红色值。

Contoh:

red(#7fffd4);

结果：127

red(red);

biru(biru);
green(color)

以 0 到 255 之间的数字返回颜色的绿色值。

Contoh:

green(#7fffd4);

biru(biru);

green(blue);

hijau(biru);
Hasil: 0color)

biru(

Contoh:

Kembalikan nilai biru warna dalam bentuk angka antara 0 hingga 255.

biru(#7fffd4);

Hasil: 212

biru(biru);
Hasil: 255color)

siraman(

Contoh:

Kembalikan siraman warna dalam bentuk angka antara 0deg hingga 360deg.

siraman(#7fffd4);
Hasil: 160degcolor)

kepadatan(

Contoh:

Kembalikan kepadatan warna dalam bentuk angka antara 0% hingga 100%.

kepadatan(#7fffd4);
Hasil: 100%color)

kecerahan(

Contoh:

Kembalikan kecerahan warna dalam bentuk angka antara 0% hingga 100%.

kecerahan(#7fffd4);
Hasil: 74.9%color)

opacity(

Contoh:

alpha(

alpha(#7fffd4);
Hasil: 1color)

opacity(

Contoh:

Kembalikan salur Alpha warna dalam bentuk angka antara 0 hingga 1.

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

Hasil: 0.5

Fungsi Sass untuk operasi warna Fungsi
Deskripsi & ContohBerat besar artinya seharusnya digunakan lebih banyak, color2, Buat warna campuran antara warna 1 dan warna 2.)

mix(
Buat warna campuran antara warna 1 dan warna 2. weight
parameter harus berada di antara 0% dan 100%. Nilai default adalah 50%. Berat besar artinya seharusnya digunakan lebih banyak。
Berat kecil artinya seharusnya digunakan lebih banyak color2。

adjust-hue(color, derajat)

Tetapkan warna warna dengan derajat -360 hingga 360 derajat.

Contoh:

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

Hasil: #8080ff
adjust-color(color, merah, hijau, biru, siraman, kepadatan, kecerahan, alpha)

Tetapkan satu atau lebih parameter dengan jumlah yang ditentukan.
Fungsi ini menambahkan atau mengurangi jumlah yang ditentukan dalam nilai warna yang ada.

Contoh:

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

Hasil:
change-color(color, merah, hijau, biru, siraman, kepadatan, kecerahan, alpha)

Tetapkan satu atau lebih parameter warna menjadi nilai baru.

Contoh:

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

Hasil: #ffffd4
scale-color(color, merah, hijau, biru, kepadatan, kecerahan, alpha) Skala satu atau lebih parameter warna.
rgba(warna, alpha)

Buat warna baru menggunakan salur alpha yang diberikan.

Contoh:

rgba(#7fffd4, 30%);

Hasil: rgba(127, 255, 212, 0.3)
lighten(color, amount) Buat warna yang lebih pucat dengan jumlah antara 0% dan 100%.
amount Parameter meningkatkan kecerahan HSL menurut persen.
darken(color, amount) Buat warna yang lebih mendalam dengan jumlah antara 0% ke 100%.
amount Parameter menurunkan kecerahan HSL menurut persen.
saturate(color, amount) Buat warna yang lebih gesit dengan jumlah antara 0% dan 100%.
amount Parameter meningkatkan kesatuan HSL menurut persen.
desaturate(color, amount) Buat warna yang kurang kesatuan dengan jumlah antara 0% dan 100%.
amount Parameter menurunkan kesatuan HSL menurut persen.
opacify(color, amount) Buat warna yang kurang jernih dengan jumlah antara 0 dan 1.
amount Parameter meningkatkan Alpha Channel menurut nilai.
fade-in(color, amount) Buat warna yang kurang jernih dengan jumlah antara 0 dan 1.
amount Parameter menurunkan Alpha Channel menurut nilai.
transparentize(color, amount) Buat warna yang lebih jernih dengan jumlah antara 0 dan 1.
amount Parameter menurunkan Alpha Channel menurut nilai.
fade-out(color, amount) Buat warna yang lebih jernih dengan jumlah antara 0 dan 1.
amount Parameter meningkatkan Alpha Channel menurut nilai.