Chroma

Chroma, "renkteki ne kadar renk var" sorusunu parlaklıktan bağımsız biçimde yakalayan renk özelliği eksendir. Saf kırmızı ile saf pembe benzer tonlara ve parlaklıklara sahip olabilir; ancak çok farklı chroma değerleri taşır — pembe griye daha yakındır, kırmızı ise griden daha uzaktır.

Chroma zaman zaman doygunlukla karıştırılır. Fark:

• Chroma, seçilen renk uzayında (OKLab, CIELAB vb.) belirli bir parlaklıkta akromatik (gri) eksenden mutlak uzaklıktır.
• Doygunluk, chromanın parlaklığa oranıdır — göreli bir ölçümdür.

Bu fark tasarım açısından önem taşır; çünkü modern CSS renk işlevi olan OKLCH doygunluğu değil chromayı kullanır. oklch(0.72 0.18 47), 0,72 parlaklık, 0,18 chroma, 47° ton anlamına gelir. Yalnızca chromayı ayarlamak parlaklığı ve tonu sabit tutar; doygunlukta ise bir değeri ayarlamak algılanan parlaklığı da değiştirir.

Ulaşılabilir maksimum chroma, tona ve parlaklığa göre değişir. sRGB'de orta parlaklıkta sarı, aynı parlaklıkta maviden daha fazla chromayı destekleyebilir — sarı birinciller sRGB gamut sınırına daha yakındır. sRGB gamutunu aşan OKLCH değerleri sınıra kesilir ve zaman zaman oluşturulan rengi beklenmedik biçimde kaydırır. Geniş bir ton aralığında algısal olarak tutarlı tasarım için, ihtiyaç duyduğunuz her tonda ulaşılabilir bir chroma değeri (ör. 0,12-0,15) seçin.

Çalışılmış örnek

9 adımlı griden kırmızıya palet oluşturun. HSL'de hsl(0 0% 50%)'den başlayıp hsl(0 100% 50%)'de biten doğrusal doygunluk ölçeklendirmesi yapabilirsiniz. Orta adımlar kırmızıda iyi görünür; ancak aynı yaklaşımı mavi için (hsl(240 0% 50%) → hsl(240 100% 50%)) uyguladığınızda orta nokta kırmızı orta noktasından belirgin biçimde koyu görünür — HSL parlaklığı algısal olarak eşbiçimli değildir. OKLCH'de parlaklığı 0,65'te sabitleyip chromayı 0'dan 0,18'e ölçeklendirmek, algılanan parlaklık açısından tonlar genelinde eşleşen dokuz adım üretir. Somut olarak: oklch(0.65 0.00 0), oklch(0.65 0.0225 0), ..., oklch(0.65 0.18 0) hepsi aynı algısal parlaklık çizgisinde durur. Aynı chroma rampa 240 tonu (mavi) için uygulandığında elde edilen mavi skala, kırmızı skalayla adım adım görsel olarak paralellik kurar — salt HSL ile başarılması mümkün değildir.

Sayısal olarak, gamut içi sRGB renkleri için OKLCH chroma değerleri kabaca 0 ile 0,37 arasındadır. Maksimum, tona ve parlaklığa bağlıdır: L=0,6'da sRGB'de ulaşılabilir en doygun kırmızının chroması yaklaşık 0,25; en doygun sarının yaklaşık 0,21; en doygun mavinin ise yaklaşık 0,31'dir. Bu tavanları bilmek, tarayıcının sessizce keseceği imkânsız palet değerleri belirlemeyi önler.

Ne zaman ve neden önemlidir

Chroma, tonlar genelinde tutarlı görünen renklere ihtiyaç duyduğunuzda önem taşır — semantik renk skalaları içeren tasarım sistemleri (kırmızı-50'den kırmızı-900'e, mavi-50'den mavi-900'e), eşit okunabilir olması gereken kategorik paletlere sahip veri görselleştirmeleri ve kontrast oranlarının ham değil algılanan parlaklığa bağlı olduğu erişilebilirlik odaklı arayüzler. Tailwind v4 paleti, Radix Colors ve IBM Carbon tasarım sistemi tam bu nedenle chroma kontrollü OKLCH rampalarını yayımlar. Kaçınılacak hata, "doygunluğu" "yoğunluk" ile eş anlamlı görmektir: HSL'de doygunluğu artırmak parlaklığı beraberinde çeker; OKLCH'de chromayı artırmak bunu yapmaz. Veri görselleştirmede pratik kural: tüm tonlar genelinde ulaşılabilir maksimum chromayı seçin (tipik olarak tüm tonlarda gamut içi sRGB için ~0,10-0,13) ve ardından chroma sabit tutularak skala adımları için parlaklık değiştirin. Referans: W3C CSS Renk Modülü Düzey 4 — OKLab ve OKLCH.

OKLab/OKLCH'nin ciddi tasarım çalışmalarında HSL'nin yerini neden aldığı: HSL, RGB'nin basit bir cebirsel dönüşümüdür — "parlaklık" ekseni algısal olarak eşbiçimli değildir. Eşit HSL parlaklık değerlerine sahip iki renk gerçek parlaklıkta çok farklı görünebilir; HSL parlaklık 50%'deki sarı, aynı değerdeki maviden çok daha parlak görünür. Björn Ottosson'un 2020'de tasarladığı OKLab, L ekseninin insan parlaklık algısıyla ve chroma ekseninin algılanan doygunlukla örtüşmesi amacıyla özel olarak oluşturulmuştur. OKLab'daki eşit adımlar, göze eşit adım gibi görünür. CSS Color Module Level 4 bu nedenle oklab() ve oklch() işlevlerini ekledi; tasarım sistemleri (Tailwind 4, Radix Colors) garanti edilmiş algısal tutarlılık için giderek artan şekilde OKLCH'de üretilen palet skalaları yayımlamaktadır. İlgili: kromatiklik, gamut. Referans: Björn Ottosson — Görüntü işleme için algısal bir renk uzayı (2020).