Sass Renk Fonksiyonları

Sass Renk Fonksiyonları

Sass'taki renk fonksiyonlarını üç bölüme ayırıyoruz: renk fonksiyonlarını ayarlamak, renk fonksiyonlarını almak ve renk fonksiyonlarını işlemek:

Sass Renk Fonksiyonu

Fonksiyon Açıklama & Örnek
rgb(kırmızı, yeşil, mavi)

Renkleri Red-Green-Blue (RGB) modeli kullanarak ayarlayın.
RGB rengi değerini rgb(red, green, blue) ile belirtin.
Her parametre bu rengin yoğunluğunu tanımlar, 0 ila 255 arasındaki tam sayı olabilir, aynı zamanda yüzdelik değer olarak da (0% ila 100%) kullanılabilir.

实例：

rgb(0, 0, 255);
// Mavi olarak görüntülenir, çünkü blue parametresi en yüksek değere (255) ayarlanmıştır, diğer parametreler 0 olarak ayarlanmıştır
rgba(kırmızı, yeşil, mavi, alpha)

Red-Green-Blue-Alpha (RGBA) modeli ile renk ayarlar.
RGBA renk değeri, alpha kanalı ile genişletilmiş RGB renk değeridir - bu kanal, rengin şeffaflığını belirtir.
alpha Parametreler, 0.0 (tamamen şeffaf) ile 1.0 (tamamen mat) arasında sayılardır.

实例：

rgba(0, 0, 255, 0.3); // Şeffaflıkla mavi
hsl(renk tonu, doğal renk yoğunluğu, ışıklandırma)

Hue-Saturation-Lightness (HSL) modeli ile renk ayarlar - ve renklerin küp koordinat sistemini temsil eder.
Ton (hue), renk çarkındaki derecedir (0'dan 360'ye); 0 veya 360 kırmızı, 120 yeşil, 240 mavi
Doğallık (saturation), değişken değerlerin de yüzde olarak ifade edilir; 0% gri gölgeler, 100% tam renktir.
Işıklık (lightness), değişken değerlerin de yüzde olarak ifade edilir; 0% siyah, 100% beyazdır.

实例：

hsl(120, 100%, 50%); // Yeşil
hsl(120, 100%, 75%); // Hafif yeşil
hsl(120, 100%, 25%); // Koyu yeşil
hsl(120, 60%, 70%); // Hafif yeşil

hsla(renk tonu, doğal renk yoğunluğu, ışıklandırma, alpha)

Hue-Saturation-Lightness-Alpha (HSLA) modeli ile renk ayarlar.
HSLA renk değeri, alpha kanalı ile genişletilmiş HSL renk değeridir - bu kanal, rengin şeffaflığını belirtir.
alpha Parametreler, 0.0 (tamamen şeffaf) ile 1.0 (tamamen mat) arasında sayılardır.

实例：

hsl(120, 100%, 50%, 0.3); // Şeffaflıkla yeşil
hsl(120, 100%, 75%, 0.3); // Şeffaflıkla hafif yeşil

grayscale(color)

Rengin ile aynı parlatıcılığa sahip griyi ayarlar.

实例：

grayscale(#7fffd4);

Sonuç: #c6c6c6
complement(color)

Rengin tamponunu ayarlar.

实例：

complement(#7fffd4);

Sonuç: #ff7faa
invert(color, ağırlık)

Rengin tersi veya mavi tonunu ayarlar.
ağırlıkParametreler seçmeli, 0% ile 100% arasında olmalıdır. Varsayılan değer 100%'dir.

实例：

invert(white);

Sonuç: siyah

Sass renk fonksiyonu

Fonksiyon Açıklama & Örnek
red(color)

0 ile 255 arasındaki sayılarla rengin kırmızı değerini döndürür.

实例：

red(#7fffd4);

Sonuç: 127

red(red);

Sonuç: 255
green(color)

0 ile 255 arasındaki sayılarla rengin yeşil değerini döndürür.

实例：

green(#7fffd4);

Sonuç: 255

yeşil(mavi);

Sonuç: 0
mavi(color)

Renk mavi değerini 0 ile 255 arasında olan bir sayı olarak döndürür.

实例：

mavi(#7fffd4);

Sonuç: 212

mavi(mavi);

Sonuç: 255
renk tonu(color)

Renk tonunu 0deg ile 360deg arasında olan bir sayı olarak döndürür.

实例：

renk tonu(#7fffd4);

Sonuç: 160deg
doğal renk yoğunluğu(color)

Renk HSL doygunluğunu 0% ile 100% arasında olan bir sayı olarak döndürür.

实例：

doğal renk yoğunluğu(#7fffd4);

Sonuç: 100%
ışıklandırma(color)

Renk HSL aydınlatmasını 0% ile 100% arasında olan bir sayı olarak döndürür.

实例：

ışıklandırma(#7fffd4);

Sonuç: 74.9%
alpha(color)

Renk Alpha kanalını 0 ile 1 arasında olan bir sayı olarak döndürür.

实例：

alpha(#7fffd4);

Sonuç: 1
opacity(color)

Renk Alpha kanalını 0 ile 1 arasında olan bir sayı olarak döndürür.

实例：

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

Sonuç: 0.5

Sass Renk İşleme Fonksiyonları

Fonksiyon Açıklama & Örnek
mix(daha büyük ağırlık, daha fazla, color2, ağırlık)

Renk 1 ve renk 2'nin karışımını oluşturun.
ağırlık Parametreler 0% ile 100% arasında olmalıdır. Varsayılan değer 50%'tir.
parametrelerin kullanılması gerektiği anlamına gelir. daha büyük ağırlık, daha fazla。
Daha küçük ağırlık, daha fazla color2。

adjust-hue(color, dereceler)

Renk tonunu -360 derece ile 360 derece arasında olan bir açıya ayarlayın.

实例：

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

Sonuç: #8080ff
adjust-color(color, kırmızı, yeşil, mavi, renk tonu, doğal renk yoğunluğu, ışıklandırma, alpha)

Belirtilen miktarla bir veya daha fazla parametreyi ayarlayın.
Bu fonksiyon, mevcut renk değerlerine belirtilen miktarı ekler veya çıkarır.

实例：

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

Sonuç:
change-color(color, kırmızı, yeşil, mavi, renk tonu, doğal renk yoğunluğu, ışıklandırma, alpha)

Renk parametrelerinin bir veya daha fazlasını yeni değerlere ayarlayın.

实例：

change-color(#7fffd4, kırmızı: 255);

Sonuç: #ffffd4
scale-color(color, kırmızı, yeşil, mavi, doğal renk yoğunluğu, ışıklandırma, alpha) Bir veya daha fazla renk parametresini ölçeklendirin.
rgba(reng, alpha)

Verilen alpha kanalı kullanarak yeni renk oluşturun.

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
Örnek: }}color, amount) rgba(#7fffd4, 30%);
amount Sonuç: rgba(127, 255, 212, 0.3)
lighten(color, amount) HSL parlatıcılığını yüzde olarak artırır.
amount darker(
HSL parlatıcılığını yüzde olarak azaltır.color, amount) saturate(
amount HSL doygunluğunu yüzde olarak artırır.
desaturate(color, amount) 0% ile 100% arasında bir miktar kullanarak daha az doygun renkler oluşturun.
amount HSL doygunluğunu yüzde olarak azaltır.
opacify(color, amount) 0 ile 1 arasında bir sayı kullanarak daha opak renkler oluşturun.
amount Parametreler, değerlerine göre Alpha kanalını artırır.
fade-in(color, amount) 0 ile 1 arasında bir sayı kullanarak daha opak renkler oluşturun.
amount Parametreler, değerlerine göre Alpha kanalını azaltır.
transparentize(color, amount) 0 ile 1 arasında bir sayı kullanarak daha şeffaf renkler oluşturun.
amount Parametreler, değerlerine göre Alpha kanalını azaltır.
fade-out(color, amount) 0 ile 1 arasında bir sayı kullanarak daha şeffaf renkler oluşturun.
amount Parametreler, değerlerine göre Alpha kanalını artırır.