Fungsi Warna Sass

Fungsi Warna Sass

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

Pengaturan fungsi warna Sass

Fungsi Operasi Warna Sass Fungsi
rgb(merah, hijau, biru)

Atur warna menggunakan model Red-Green-Blue (RGB)
Dengan mengatur warna RGB melalui rgb(red, green, blue)
Setiap parameter mendefinisikan intensitas warna, dapat berupa bilangan bulat antara 0 sampai 255, atau persen (dari 0% sampai 100%)

Contoh:

rgb(0, 0, 255);
// Berwarna biru, karena parameter blue diatur ke nilai maksimal (255), parameter lain diatur ke 0

rgba(merah, hijau, biru, alpha)

Atur warna menggunakan model Red-Green-Blue-Alpha (RGBA).
Nilai warna RGBA adalah ekstensi nilai warna RGB dengan channel alpha - channel ini menentukan kepadatan warna.
alpha Parameter adalah angka diantara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

Contoh:

rgba(0, 0, 255, 0.3); // Biru dengan kepadatan transparen

hsl(hue, kepadatan, kecerahan)

Atur warna menggunakan model Hue-Saturation-Lightness - dan mewakili koordinat sferik warna.
Hue (nuansa) adalah derajat di garis warna (dari 0 hingga 360) - 0 atau 360 adalah merah, 120 adalah hijau, 240 adalah biru
Saturation (kepadatan) adalah nilai persen; 0% menunjukkan bayangan abu-abu, 100% menunjukkan warna yang penuh.
Lightness (kecerahan) adalah nilai persen; 0% adalah hitam, 100% adalah putih.

Contoh:

hsl(120, 100%, 50%); // Hijau
hsl(120, 100%, 75%); // Hijau muda
hsl(120, 100%, 25%); // Hijau mendung
hsl(120, 60%, 70%); // Hijau muda

hsla(hue, kepadatan, kecerahan, alpha)

Atur warna menggunakan model Hue-Saturation-Lightness-Alpha (HSLA).
Nilai warna HSLA adalah ekstensi nilai warna HSL, dengan channel alpha - menentukan kepadatan warna.
alpha Parameter adalah angka diantara 0.0 (sangat transparan) dan 1.0 (sangat tak transparan).

Contoh:

hsl(120, 100%, 50%, 0.3); // Hijau dengan kepadatan
hsl(120, 100%, 75%, 0.3); // Hijau muda dengan kepadatan

grayscale(color)

Atur warna abu-abu yang memiliki kecerahan yang sama dengan warna.

Contoh:

grayscale(#7fffd4);

Hasil: #c6c6c6

complement(color)

Atur warna komplementer.

Contoh:

complement(#7fffd4);

Hasil: #ff7faa

invert(color, Buat warna campuran dari warna 1 dan warna 2.)

Atur warna kontras atau negatif.
Buat warna campuran dari warna 1 dan warna 2.Parameter adalah pilihan, harus berada diantara 0% dan 100% angka. Nilai default adalah 100%.

Contoh:

invert(white);

Hasil: hitam

Fungsi mengambil warna Sass

Fungsi Operasi Warna Sass Fungsi
red(color)

Mengembalikan nilai merah warna dengan angka diantara 0 hingga 255.

Contoh:

red(#7fffd4);

Hasil: 127

red(red);

blue(blue);

green(color)

Mengembalikan nilai hijau warna dengan angka diantara 0 hingga 255.

Contoh:

green(#7fffd4);

blue(blue);

green(blue);

green(blue);

Hasil: 0color)

blue(

Contoh:

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

blue(#7fffd4);

Hasil: 212

blue(blue);

Hasil: 255color)

hue(

Contoh:

Kembalikan warna dengan derajat kebiruan dalam bentuk angka antara 0deg hingga 360deg.

hue(#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 channel Alpha warna dalam bentuk angka antara 0 hingga 1.

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

Hasil: 0.5

Fungsi Operasi Warna Sass Fungsi
Deskripsi & ContohBobot yang besar artinya seharusnya digunakan lebih banyak, color2, Buat warna campuran dari warna 1 dan warna 2.)

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

adjust-hue(color, derajat)

Tutupi warna dengan derajat kebiruan dari -360 derajat sampai 360 derajat.

Contoh:

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

Hasil: #8080ff

adjust-color(color, merah, hijau, biru, hue, kepadatan, kecerahan, alpha)

Tutupi satu atau beberapa parameter dengan jumlah yang ditentukan.
Fungsi ini menambahkan atau mengurangi jumlah yang ditentukan di nilai warna yang ada.

Contoh:

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

Hasil:

change-color(color, merah, hijau, biru, hue, kepadatan, kecerahan, alpha)

Atur satu atau beberapa parameter warna ke nilai baru.

Contoh:

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

Hasil: #ffffd4

scale-color(color, merah, hijau, biru, kepadatan, kecerahan, alpha) Skalakan satu atau beberapa parameter warna.
rgba(warna, alpha)

Buat warna baru menggunakan channel alpha yang diberikan.

Contoh:

rgba(#7fffd4, 30%);

Hasil: rgba(127, 255, 212, 0.3)

lighten(color, amount) Buat warna yang lebih terang dengan jumlah antara 0% dan 100%.
amount Parameter menaikkan 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 kaya dengan jumlah antara 0% dan 100%.
amount Parameter menaikkan kecerahan HSL menurut persen.
desaturate(color, amount) Buat warna dengan kecerahan yang rendah dengan jumlah antara 0% dan 100%.
amount Parameter menurunkan kecerahan HSL menurut persen.
opacify(color, amount) Buat warna yang kurang transparan dengan jumlah antara 0 dan 1.
amount Parameter menaikkan Kanal Alpha menurut nilai.
fade-in(color, amount) Buat warna yang kurang transparan dengan jumlah antara 0 dan 1.
amount Parameter menurunkan Kanal Alpha menurut nilai.
transparentize(color, amount) Buat warna yang lebih transparan dengan jumlah antara 0 dan 1.
amount Parameter menurunkan Kanal Alpha menurut nilai.
fade-out(color, amount) Buat warna yang lebih transparan dengan jumlah antara 0 dan 1.
amount Parameter menaikkan Kanal Alpha menurut nilai.