Renk Paleti Oluşturma: 60-30-10 Kuralıyla Denge

İyi bir renk paleti oluşturma süreci, rastgele güzel renkler seçmek değildir; renklerin sayfada hangi oranda ve hangi rolde kullanılacağına dair bir plan kurmaktır. Çoğu acemi paletin yorucu görünmesinin nedeni de budur: üç-dört canlı renk eşit ağırlıkta yarışır ve göz nereye bakacağını bilemez. Bu yazıda dengeyi tek başına kuran klasik bir yöntemi, 60-30-10 kuralını adım adım uygulayacağız ve seçtiğiniz renkleri gerçek arayüzde test etmek için pratik araçlara bakacağız.

60-30-10 kuralı nedir?

Kural iç mimariden gelir ve bir kompozisyondaki renk dağılımını yüzde olarak tanımlar. Bir alanda renkleri kabaca şöyle bölersiniz:

• %60 — baskın (dominant) renk: Arka planlar, geniş boşluklar, sayfanın genel tonu. Genellikle nötr veya düşük doygunlukta bir renktir.
• %30 — ikincil (secondary) renk: Kartlar, bölüm arka planları, navigasyon gibi yapısal alanlar. Baskın renkle kontrast oluşturur ama dikkat çekmek için yarışmaz.
• %10 — vurgu (accent) rengi: Butonlar, bağlantılar, çağrı-aksiyon ögeleri. En canlı ve en az kullanılan renktir; tam da bu yüzden dikkat çeker.

Bu oranların matematiksel olarak milimetrik tutulması gerekmez. Önemli olan hiyerarşi: bir renk hâkim, biri destekleyici, biri kıvılcım. Vurgu rengini az kullandığınız sürece, kullanıcının gözü doğal olarak önemli ögelere kayar.

Adım adım renk paleti oluşturma

Sıfırdan bir palet kurarken sırayı şöyle takip edebilirsiniz:

• 1. Bir baz renkle başlayın. Genellikle marka rengi ya da vurgu olarak kullanmak istediğiniz tonla başlamak en kolayı. Bunu HSL olarak düşünün: hsl(212, 90%, 50%) gibi.
• 2. Nötrleri türetin. %60'lık baskın alan için aynı tondan çok düşük doygunlukta bir gri-mavi üretin (örn. ton 212, doygunluk %8). Saf gri yerine hafifçe renkli nötrler arayüze sıcaklık katar.
• 3. İkincil rengi seçin. Renk çemberinde baz renge yakın (analog) ya da tam karşısında (tamamlayıcı) bir ton. Analog seçimler sakin, tamamlayıcı seçimler enerjik durur.
• 4. Tonları çoğaltın. Her ana renk için açık-koyu varyasyonlar üretin (50, 100, 200 … 900 gibi). Gerçek arayüzde hover, kenarlık ve gölge için bu ara tonlara ihtiyacınız olur.
• 5. Kontrastı doğrulayın. Metin ve arka plan çiftlerini erişilebilirlik için test edin (aşağıda).

Doğru araçları kullanın

Palet kurmayı tek başınıza tahminle yapmak yorucudur; bu işi kolaylaştıran ücretsiz araçlar var:

• Coolors ve Adobe Color — renk çemberi üzerinden tamamlayıcı, analog, üçlü (triadic) gibi uyum şemaları üretir.
• Figma — paletinizi renk stilleri veya değişken (variables) olarak kaydedip tüm tasarımda tutarlı kullanmanızı sağlar.
• WebAIM Contrast Checker — iki rengin kontrast oranını ölçer ve WCAG AA/AAA uyumunu gösterir.
• Tarayıcı geliştirici araçları — DevTools'taki renk seçici, gerçek ekranda kontrast oranını anında gösterir.

Erişilebilir kontrast şart

Güzel bir palet okunmuyorsa işe yaramaz. WCAG standartları, normal boyutlu metin için en az 4.5:1, büyük metin (yaklaşık 24px veya 18.66px kalın) için 3:1 kontrast oranı ister. Vurgu renginizi bir buton üzerinde kullanırken, üzerindeki yazıyla arasındaki kontrastı mutlaka kontrol edin. Sırf marka rengi diye düşük kontrastlı bir buton kullanmak, kullanıcıların önemli aksiyonu kaçırmasına yol açar.

Pratik bir alışkanlık: paleti hem açık hem koyu temada deneyin. Açık temada güzel duran canlı bir sarı, koyu arka planda göz kamaştırabilir; bu yüzden tema başına vurgu tonunu hafifçe ayarlamanız gerekebilir.

Paleti CSS değişkenlerine taşımak

Palet kararlaştıktan sonra onu koda dökmenin en temiz yolu CSS özel özellikleridir (custom properties). Tek yerde tanımlar, her yerde kullanırsınız:

:root {
  /* %60 baskın / nötr */
  --bg: hsl(212, 8%, 97%);
  --surface: hsl(212, 10%, 92%);
  /* %30 ikincil */
  --secondary: hsl(212, 30%, 35%);
  /* %10 vurgu */
  --accent: hsl(212, 90%, 50%);
  --accent-hover: hsl(212, 90%, 44%);
  --text: hsl(212, 15%, 15%);
}

.btn {
  background: var(--accent);
  color: white;
}
.btn:hover { background: var(--accent-hover); }

Hover rengini ayrı bir değişken yerine doygunluk/parlaklık fonksiyonuyla da üretebilirsiniz; modern tarayıcılarda color-mix() bunu kolaylaştırır: background: color-mix(in srgb, var(--accent) 85%, black);

Sık yapılan hatalar

• Çok fazla vurgu rengi. İkiden fazla canlı renk genelde kaosa yol açar; vurguyu tek tonla sınırlayın.
• Saf siyah ve saf beyaz. #000 ve #fff sert görünür; çok koyu/çok açık nötrler daha yumuşaktır.
• Yalnızca renge dayalı bilgi. Hata/başarı durumunu sadece kırmızı/yeşil ile anlatmak renk körü kullanıcıları dışlar; ikon veya metinle destekleyin.

Sık Sorulan Sorular

Bir palette kaç renk olmalı?

Pratikte 3 ana renk (baskın, ikincil, vurgu) artı her birinin birkaç açık-koyu varyasyonu yeterlidir. Buna bir-iki durum rengi (başarı, uyarı, hata) eklenebilir. Ana hue sayısını üçle sınırlamak çoğu arayüz için en güvenli yaklaşımdır.

60-30-10 oranını tam tutturmam gerekir mi?

Hayır. Oranlar bir hedef değil, bir hiyerarji rehberidir. Önemli olan bir rengin baskın, birinin destekleyici, birinin nadir vurgu olarak konumlanması. Yüzdeleri gözle yaklaşık tutmanız yeter.

Renk uyumu için en hızlı başlangıç hangisi?

Tek bir marka renginden başlayıp Coolors veya Adobe Color ile tamamlayıcı/analog bir şema üretmek en hızlısıdır. Ardından nötrleri ve kontrastı elle ince ayar yaparsınız.

Markanıza özel, dengeli ve erişilebilir bir renk paleti mi istiyorsunuz? Logo, arayüz ve marka kimliği için profesyonel destek almak isterseniz benimle iletişime geçin.