Web Tasarımda Renk Teorisi: Uyumlu Paletler Oluşturma

Renk, web tasarımın en güçlü iletişim aracıdır. Doğru renk seçimi marka algısını şekillendirir, kullanıcıyı yönlendirir ve duyguları tetikler. Ancak rastgele seçilen renkler uyumsuz ve profesyonel olmayan bir görünüm yaratır. Bu rehberde renk teorisinin temellerini öğrenecek ve web projeleri için uyumlu paletler oluşturmayı keşfedeceksiniz.

Renk Çarkı

Renk çarkı (color wheel), renklerin birbirleriyle ilişkisini görsel olarak gösteren dairesel bir şemadır. Isaac Newton'un 1666'daki çalışmalarına dayanan bu çark, üç kategoriden oluşur:

• Birincil renkler: Kırmızı, mavi, sarı — diğer renklerden elde edilemez
• İkincil renkler: Turuncu, yeşil, mor — birincil renklerin karışımı
• Üçüncül renkler: Birincil ve ikincil renklerin karışımı (ör. kırmızı-turuncu)

Renk Uyum Şemaları

Tamamlayıcı (Complementary)

Renk çarkında birbirinin karşısındaki renklerdir. Yüksek kontrast ve dikkat çekicilik sağlar.

/* Tamamlayıcı: Mavi ve Turuncu */
--primary: #2563eb;   /* Mavi */
--accent: #ea580c;    /* Turuncu */

Web tasarımda bir rengi ana renk, diğerini vurgulama (CTA butonları, önemli öğeler) için kullanın. Eşit miktarda kullanmak gözü yorar.

Analog (Analogous)

Renk çarkında yan yana bulunan renklerdir. Doğada sıkça görülen bu uyum, huzurlu ve tutarlı bir his verir.

/* Analog: Yeşil tonları */
--color-1: #059669;   /* Zümrüt yeşili */
--color-2: #0d9488;   /* Turkuaz */
--color-3: #0284c7;   /* Okyanus mavisi */

Üçlü (Triadic)

Renk çarkında eşit mesafedeki üç renktir. Canlı ve dengeli paletler oluşturur.

/* Üçlü: Kırmızı, Mavi, Sarı */
--color-1: #dc2626;
--color-2: #2563eb;
--color-3: #eab308;

Bölünmüş Tamamlayıcı (Split-Complementary)

Bir renk ve onun tamamlayıcısının yanındaki iki renk kullanılır. Tamamlayıcıdan daha yumuşak bir kontrast sağlar.

Renk Psikolojisi

Renkler bilinçaltında güçlü çağrışımlar uyandırır:

• Mavi: Güven, profesyonellik, sakinlik — finans, teknoloji siteleri (Facebook, Twitter, Samsung)
• Kırmızı: Enerji, aciliyet, tutku — e-ticaret CTA'ları, yemek markaları (YouTube, Netflix)
• Yeşil: Doğa, büyüme, sağlık — çevre, sağlık, finans siteleri (Spotify, WhatsApp)
• Turuncu: Yaratıcılık, coşku, samimiyet — genç kitlelere yönelik siteler
• Mor: Lüks, yaratıcılık, gizem — premium markalar, güzellik siteleri
• Siyah: Şıklık, güç, modernlik — lüks markalar (Apple, Chanel)

HSL Renk Modeli

Web tasarımda HSL (Hue, Saturation, Lightness) modeli, renk paletleri oluşturmak için en pratik modeldir:

/* HSL ile tutarlı bir palet */
--primary-50:  hsl(220, 90%, 96%);   /* Çok açık */
--primary-100: hsl(220, 90%, 90%);
--primary-200: hsl(220, 85%, 80%);
--primary-300: hsl(220, 80%, 70%);
--primary-400: hsl(220, 75%, 60%);
--primary-500: hsl(220, 70%, 50%);   /* Ana renk */
--primary-600: hsl(220, 75%, 40%);
--primary-700: hsl(220, 80%, 30%);
--primary-800: hsl(220, 85%, 20%);
--primary-900: hsl(220, 90%, 10%);   /* Çok koyu */

Hue (ton) sabit tutularak yalnızca Saturation (doygunluk) ve Lightness (parlaklık) değiştirildiğinde, uyumlu bir ton skalası elde edilir.

Kontrast Oranları ve Erişilebilirlik

WCAG (Web Content Accessibility Guidelines) standartları, metin ve arka plan arasında yeterli kontrastı zorunlu kılar:

• AA seviyesi: Normal metin için en az 4.5:1, büyük metin için 3:1
• AAA seviyesi: Normal metin için en az 7:1, büyük metin için 4.5:1

Düşük kontrast, görme engelli kullanıcıları doğrudan etkiler. Açık gri metin (#999) beyaz arka plan üzerinde okunamaz hale gelir.

/* Kötü kontrast — kaçının */
color: #999;
background: #fff;  /* Oran: 2.8:1 ❌ */

/* İyi kontrast */
color: #374151;
background: #fff;  /* Oran: 10.7:1 ✓ */

Koyu Mod (Dark Mode) Paleti

Koyu mod tasarlarken yalnızca renkleri ters çevirmek yeterli değildir:

• Saf siyah (#000) yerine koyu gri (#121212, #1a1a2e) kullanın — göz yorgunluğunu azaltır
• Metin için saf beyaz yerine hafif kırık beyaz (#e5e5e5) tercih edin
• Doygun renklerin parlaklığını artırın — koyu arka planlarda doygun renkler daha sert görünür
• Gölge yerine kenarlık veya hafif parlama efekti kullanarak derinlik oluşturun