Sass/SCSS Renk Fonksiyonları Rehberi

Sass (ve SCSS sözdizimi), CSS'de programatik renk işlemlerine olanak tanır. Tek bir ana renkten açık tonlar, koyu tonlar, tamamlayıcı renkler ve tutarlı paletler üretebilirsiniz. Bu rehberde lighten, darken, saturate, desaturate, mix, complement, adjust-hue gibi fonksiyonları, map ve @each döngüleriyle sınıf üretimini ele alıyoruz.

lighten() ve darken()

lighten($color, $amount) rengi belirtilen yüzde kadar açılır; darken() ise koyulaştırır. HSL ışıklılık (lightness) değerine göre çalışır. Örneğin %20 lighten, lightness'i 20 puan artırır.

$primary: #6366f1;

.btn {
  background: $primary;
  &:hover {
    background: lighten($primary, 10%);
  }
  &:active {
    background: darken($primary, 5%);
  }
}

Aşırı lighten veya darken (örn. %80) sonucu beyaza veya siyaha yaklaşabilir; genellikle %5–15 aralığı pratik kullanım için uygundur.

saturate() ve desaturate()

saturate($color, $amount) rengin doygunluğunu artırır; desaturate() azaltır. Soluk (pastel) tonlar elde etmek veya vurgu eklemek için kullanılır.

$accent: #ec4899;

.muted {
  color: desaturate($accent, 30%);
}
.vibrant {
  color: saturate($accent, 20%);
}

Gri tonlar için desaturate($color, 100%) kullanılabilir; renk tamamen doygunluğunu kaybeder.

mix() ile Ara Tonlar

mix($color1, $color2, $weight) iki rengi karıştırır. $weight varsayılan %50'dir; %30 ile birinci renk daha hakim olur. Gradient benzeri geçişler veya hover durumları için idealdir.

$primary: #6366f1;
$secondary: #8b5cf6;

.gradient-like {
  background: linear-gradient(
    90deg,
    $primary,
    mix($primary, $secondary, 70%),
    $secondary
  );
}

complement() ve adjust-hue()

complement($color) rengin tamamlayıcısını (renk çarkında 180° karşı) döndürür. adjust-hue($color, $degrees) ise hue değerini belirtilen derece kadar kaydırır. Uyumlu renk şemaları oluşturmak için kullanılır.

$base: #14b8a6;

.complementary {
  background: $base;
  color: complement($base);
}

.analogous {
  background: adjust-hue($base, 30deg);
}

HEX/RGB/HSL dönüşüm rehberimizde hue kavramını detaylı inceleyebilirsiniz.

Palet Oluşturma

Tek bir base renkten açıktan koyuya varyantlar üretmek için lighten/darken veya scale-color kullanılır. Map ile organize etmek yönetimi kolaylaştırır.

$base: #6366f1;

$shades: (
  50:  lighten($base, 40%),
  100: lighten($base, 30%),
  200: lighten($base, 20%),
  300: lighten($base, 10%),
  400: $base,
  500: darken($base, 5%),
  600: darken($base, 10%),
  700: darken($base, 15%),
  800: darken($base, 20%),
  900: darken($base, 25%),
);

@each ile Sınıf Üretimi

Sass map'lerini @each döngüsüyle dolaşarak utility sınıfları otomatik üretebilirsiniz.

@each $name, $color in $shades {
  .bg-#{$name} {
    background-color: $color;
  }
  .text-#{$name} {
    color: $color;
  }
}

/* Çıktı: .bg-50, .bg-100, ... .text-50, .text-100, ... */

Bu yaklaşım, Tailwind veya Bootstrap benzeri renk utility sınıfları oluşturmanıza olanak tanır. Tailwind renk sistemi rehberimizde benzer mantığı inceleyebilirsiniz.

scale-color() ile Hassas Kontrol

scale-color() lighten/darken yerine mevcut değere oranla ölçekleme yapar. Örneğin %50 lightness'e sahip bir rengi lighten(%20) ile %70'e çıkarırken, scale-color ile daha hassas ayar yapılabilir.

$color: #6366f1;

.lighter {
  background: scale-color($color, $lightness: 20%);
}
.darker {
  background: scale-color($color, $lightness: -15%);
}

opacify() ve transparentize()

opacify($color, $amount) opacity artırır; transparentize() azaltır. RGBA değerleriyle çalışır. Overlay veya hover efektleri için kullanışlıdır.

$overlay: rgba(0, 0, 0, 0.3);

.darker-overlay {
  background: opacify($overlay, 0.2);
}
.lighter-overlay {
  background: transparentize($overlay, 0.1);
}

CSS Değişkenleri ile Karşılaştırma

Sass renk fonksiyonları build sırasında hesaplanır; çıktı statik CSS'tir. CSS custom properties ise runtime'da değer alır. Tema değişimi gibi dinamik senaryolarda CSS değişkenleri, statik palet için Sass fonksiyonları daha uygundur. İkisini birlikte kullanabilirsiniz: Sass ile paleti üretir, CSS değişkenlerine atarsınız. CSS değişkenleri best practices ve CSS variables ile tema rehberlerimizde bu stratejiyi detaylandırabilirsiniz.

Özet

Sass renk fonksiyonları, tutarlı ve bakımı kolay renk paletleri oluşturmanızı sağlar. lighten, darken, mix, saturate, complement ve map/@each kombinasyonu ile güçlü bir renk sistemi kurabilirsiniz. Palet Oluşturucu ile temel renklerinizi belirleyip Sass'ta işleyebilir, CSS renk fonksiyonları ile native CSS alternatiflerini karşılaştırabilirsiniz.