CSS Renk Fonksiyonları: color-mix, oklch, lab

CSS Color Module Level 4 ve 5 ile birlikte renk işleme kapasitesi önemli ölçüde arttı. color-mix(), oklch, lab ve relative color syntax (göreceli renk sözdizimi) gibi özellikler, gradient ve tema yönetiminde yeni olanaklar sunuyor. Bu rehberde bu fonksiyonların kullanımını ve tarayıcı desteğini ele alıyoruz.

OkLCH Renk Uzayı

OkLCH (Oklab'ın LCH varyantı), algısal olarak düzgün (perceptually uniform) bir renk uzayıdır. Aynı sayısal değişim, insan gözünde benzer farklılık yaratır. HSL'den farklı olarak doygunluk değişiminde parlaklık kaybı daha az olur.

/* oklch(L C H) - L: parlaklık 0-1, C: chroma, H: hue 0-360 */
.box {
  background: oklch(0.65 0.2 250);
}

.gradient-oklch {
  background: linear-gradient(
    90deg,
    oklch(0.6 0.2 250),
    oklch(0.7 0.15 280)
  );
}

OkLCH, gradientlerde daha yumuşak geçişler sağlar çünkü renkler algısal olarak eşit adımlarla değişir. Chrome, Safari ve Firefox'un yeni sürümleri destekler; Edge de güncel sürümlerde destekliyor.

LAB Renk Uzayı

LAB, CIE tarafından tanımlanan cihazdan bağımsız bir renk uzayıdır. L (parlaklık) 0-100, a (yeşil-kırmızı) ve b (mavi-sarı) eksenleri -128 ile 127 arasında değer alır.

.lab-gradient {
  background: linear-gradient(
    135deg,
    lab(60 40 20),
    lab(70 20 -30)
  );
}

LAB, geniş renk gamutu (wide gamut) ekranlarda daha zengin renkler üretir. OkLCH'ye benzer şekilde algısal düzgünlük sunar.

color-mix() Fonksiyonu

color-mix(), iki rengi belirtilen oranda karıştırır. Tema varyasyonları, opacity alternatifleri ve ton üretimi için idealdir.

:root {
  --primary: oklch(0.55 0.2 250);
}

.button {
  background: var(--primary);
}

.button:hover {
  /* %15 beyaz ile açıklaştır */
  background: color-mix(in oklch, var(--primary) 85%, white);
}

.bg-subtle {
  /* Ana rengin %10 karışımı */
  background: color-mix(in oklch, var(--primary) 10%, transparent);
}

in oklch karışımın oklch uzayında yapılacağını belirtir; in srgb veya in lab da kullanılabilir.

Relative Color Syntax

Relative color syntax, mevcut bir rengi referans alarak yeni renkler türetmenizi sağlar. Bir rengin sadece L (parlaklık) veya C (chroma) kanalını değiştirip yeni bir renk elde edebilirsiniz.

:root {
  --base: oklch(0.6 0.2 250);
  /* Base'in %80 parlaklık versiyonu */
  --light: oklch(from var(--base) 0.8 C H);
  /* Base'in %40 parlaklık versiyonu */
  --dark: oklch(from var(--base) 0.4 C H);
}

Bu sözdizimi henüz tüm tarayıcılarda desteklenmez; @supports ile kontrol edip fallback kullanın.

Gradientlerde Modern Renk Fonksiyonları

Linear gradient içinde oklch veya lab kullanarak daha tutarlı geçişler elde edebilirsiniz. HEX veya RGB ile oluşturulan gradientler bazen geçiş ortasında soluk veya garip tonlar üretebilir; oklch bu sorunu azaltır.

.smooth-gradient {
  background: linear-gradient(
    135deg,
    oklch(0.5 0.25 270),
    oklch(0.7 0.2 300),
    oklch(0.6 0.22 330)
  );
}

Tarayıcı Desteği ve Fallback

color-mix ve oklch yeni özellikler olduğundan eski tarayıcılarda çalışmaz. İki yaklaşım kullanılabilir:

1. @supports ile fallback: Destekleyen tarayıcıda oklch, desteklemeyende HEX/RGB.
2. @layer ile progressive enhancement: Temel stiller legacy, gelişmiş stiller modern tarayıcılara.

.card {
  background: #4f46e5; /* fallback */
}

@supports (background: oklch(0.5 0.2 270)) {
  .card {
    background: oklch(0.5 0.2 270);
  }
}

Sonuç

Modern CSS renk fonksiyonları, tema yönetimi ve gradient tasarımında güçlü araçlar sunar. OkLCH ve color-mix ile tek bir ana renkten tüm paleti türetebilirsiniz. Gradient Oluşturucu ve Palet Oluşturucu araçlarımızla HEX/RGB paletlerinizi test edebilir; ileri seviye projelerinizde oklch'ye geçiş planlayabilirsiniz.

İlgili rehberler: HEX/RGB/HSL Dönüşüm · CSS Gradient Nedir? · Responsive Renk Tasarımı · Araç · Marka Renkleri