Yan yana güzel duran iki renk, küçük bir düğmenin üzerinde aynı sonucu vermeyebilir. Sarı bir kartın üstüne beyaz yazı koyduğunuzda palet hâlâ hoş görünebilir ama yazı zor okunur. Renk seçimini yalnız “hangileri birbirine yakışır?” sorusuyla bitirmeyin; hangi rengin nerede kullanılacağını da belirleyin.
Renk Armonisi Nedir?
Renk armonisi, bir tasarımda renkler arasında kurulan ilişkidir. “Renk harmonisi” şeklinde de aranan kavram; benzer tonların birlikte kullanılması, karşıt renklerle vurgu kurulması veya tek rengin açık–koyu çeşitlerinin seçilmesi gibi yaklaşımları kapsar. Müzikteki armoniyle aynı kelime kullanılsa da burada konu renklerin birlikte nasıl düzenlendiğidir.
Renk teorisi daha geniş çerçevedir: renk modelleri, karışım, açıklık, doygunluk ve algısal ilişkileri ele alır. Armoni şeması ise seçim yaparken kullanabileceğiniz bir başlangıçtır. Beğeni, konu, kültürel bağlam ve kullanılan malzeme sonucu etkiler; bir şemaya uymak tasarımı otomatik olarak başarılı yapmaz.
Renk Çemberi ve Renk Dairesi Nasıl Okunur?
Renk çemberi, tonları dairesel sıraya yerleştirir. Komşuluk benzer tonları, karşılıklı konumlar tamamlayıcı ilişkiyi bulmayı kolaylaştırır. Ancak her çember aynı renk modelini kullanmaz. Geleneksel resim eğitimindeki kırmızı–sarı–mavi çemberiyle ekrandaki RGB temelli çemberin karşıt çiftleri aynı olmak zorunda değildir.
Aşağıdaki şemalar RGB/HSL ton çemberi kullanıyor. HSL'de kırmızı 0°, yeşil 120°, mavi 240° civarındadır; kırmızının karşısında 180° camgöbeği bulunur. Bu ayrımı yapmadan bir boya çemberiyle ekran seçicisinden birebir aynı sonucu beklemek kafa karıştırır. MDN'nin HSL açıklaması açıların nasıl kullanıldığını gösterir.
“Üç ana renkten her renk kusursuz üretilir” gibi bir sonuç çıkarmayın. Ekran ve baskı farklı üretim koşullarına sahiptir. RGB ışık bileşenlerini, CMYK ise baskıdaki mürekkep bileşenlerini tarif eder; bir paleti baskıya aktarırken kullanılan profil ve malzeme de devreye girer.
Ton, Doygunluk ve Açıklık Aynı Şey Değildir
- Ton (hue): Rengin çemberdeki yönüdür; mavi veya turuncu gibi.
- Doygunluk (saturation): Seçilen modelde rengin griden ne kadar uzaklaştığını tarif eder. Daha düşük doygunluk, daha soluk bir görünüm sağlayabilir.
- Açıklık (lightness): HSL'deki açık–koyu bileşenidir. HSV/HSB araçlarındaki value/brightness ile aynı sayısal ölçü değildir.
HSL'de aynı açıklık yüzdesindeki sarı ve mavi, göze aynı parlaklıkta görünmez. Bu yüzden yalnız L değerine bakarak metin kontrastını onaylayamazsınız. Bir paleti sakinleştirmek için yeni bir renk eklemek yerine mevcut rengin doygunluğunu azaltmayı veya zeminini değiştirmeyi deneyin.
Altı Renk Armonisi: Örnekler ve Kullanım Kararı
Tüm sütunlar için tabloyu yana kaydırın. Klavyeyle tabloya odaklanıp ok tuşlarını kullanabilirsiniz.
| Yaklaşım | İlişki | Deneyebileceğiniz kullanım |
|---|---|---|
| Analog / benzer renk armonisi | Çemberde komşu tonlar | Aynı konuya ait yüzeyler için mavi–mor çevresinde çeşitler; metni ayrıca koyulaştırın. |
| Tamamlayıcı / zıt renk armonisi | Karşılıklı iki ton | Bir ana tona küçük bir karşıt vurgu ekleyin. İkisini eşit alanlarda kullanmak zorunda değilsiniz. |
| Üçlü / üç renk armonisi | Yaklaşık eşit aralıklı üç ton | Bir tonu baskın tutup diğerlerini sınırlı ayrıntılara ayırın. |
| Ayrık tamamlayıcı | Ana ton ve karşıtının iki yanındaki tonlar | Tek karşıt vurgu yerine iki yakın seçenek denemek için kullanın. |
| Dörtlü / tetradik | İki tamamlayıcı çift | Çok parçalı bir görselde rolleri önceden belirleyin; her parça aynı anda dikkat istemesin. |
| Tek renk / monokromatik | Aynı tonun doygunluk ve açıklık çeşitleri | Bir ana renk etrafında kart, çizgi ve vurgu çeşitleri üretin. |
Tek renk armonisi sadece tek HEX kodu kullanmak değildir. Açık mavi yüzey, koyu mavi başlık ve orta mavi bir ayrıntı aynı ton ailesini farklı görevlerde kullanabilir. Analog renkler de “üç renk şartı” taşımaz; seçtiğiniz modelde yakın tonlardan oluşan bir gruptur.
Şemayı seçtikten sonra kodları denemek için renk paleti araçlarını kullanabilirsiniz. Bu yazının odağı araç sıralaması değil, üretilen renkler arasındaki ilişkiyi okuyabilmektir. Adobe'nin Color Guide ve renk seçim araçları da armoni kurallarını seçenek üretmek için kullanır.
Uygulama: Üç Rengi Bir Sayfada İşe Yarayan Rollere Ayırın
Bir atölye duyurusu tasarladığınızı düşünün. İlk paletimiz mavi #1D4ED8, amber #F59E0B ve koyu #111827. Bu bir gerçek müşteri çalışması değil, renk görevlerini görmek için hazırlanmış örnektir. Beyazı zemin olarak ekleyelim.
- Mesajı seçin: Kullanıcı önce etkinlik adını, sonra tarihini ve başvuru yolunu görsün.
- Rolleri dağıtın: Koyu rengi ana metne, maviyi bağlantı veya ana düğmeye, amberi küçük tarih etiketine ayırın.
- Yazı çiftini ölçün: Amber etiketin üstündeki beyaz yazı yerine koyu yazıyı deneyin.
- Gerçek düzeni görün: Uzun başlık, hata mesajı, bağlantı ve küçük metinle kontrol edin. Boş bir renk kartı bütün bu durumları göstermez.
Hesaplanan değerler yuvarlanmadan değerlendirildi. Beyaz–amber çifti normal metin için gereken 4,5:1'i sağlamıyor; koyu–amber çifti sağlıyor. Dolayısıyla “bu palet erişilebilir mi?” yerine “hangi metni hangi zeminde kullanıyorum?” sorusu daha işe yarar. Renkler ekran görüntüsünden örneklenmedi; doğrudan yukarıdaki HEX değerleriyle hesaplandı.
60-30-10 Kuralını Ne Zaman Kullanmalı?
60-30-10, baskın, yardımcı ve vurgu alanlarını düşünmek için kullanılan bir tasarım önerisidir. Her arayüzde piksel sayıp bu oranı tutturmanız gerekmez. Beyaz alanı çok olan bir makale, renkli bir afiş veya veri panosu farklı dağılımlar ister.
Örneğimizde amber etiket sayfanın küçük bölümünde kalabilir. Onu tam yüzde 10'a çıkarmak için gereksiz turuncu kutular eklemek, mesajı güçlendirmeyebilir. Önce hiyerarşiyi kurun; oranı gerektiğinde değiştirin.
Uyum, Kontrast ve Erişilebilirlik Ayrı Kontrollerdir
WCAG AA metin kontrastı normal metinde en az 4,5:1, büyük metinde 3:1 ister. Büyük metin için eşik en az 18 punto veya 14 punto kalındır. Logo gibi belirli istisnalar vardır; bir logonun istisnasını gövde metnine uygulamayın. Kontrastı geçtiğinizde bütün sayfanın erişilebilirliği onaylanmış olmaz.
Hata durumunu yalnız kırmızıya çevirmeyin: “E-posta adresini kontrol edin” gibi bir açıklama ekleyin. Anlamın yalnız renge bağlı kalmaması ayrı bir kontroldür. Klavye, odak, form ve diğer kontrolleri web erişilebilirliği kontrol listesinde bulabilirsiniz.
Sıcak, Soğuk ve Marka Renklerini Bağlamda Değerlendirin
Kırmızı, turuncu ve sarı genellikle sıcak; mavi ve yeşil çevresi soğuk diye gruplandırılır. Ancak “kırmızı düğme satış getirir” veya “mavi her markaya güven kazandırır” sonucu buradan çıkmaz. Yanındaki renk, boyut, metin, sektör ve izleyicinin deneyimi yorumu değiştirir.
Marka için karar verirken paleti yalnız beyaz bir sayfada göstermeyin. Açık–koyu zemin, küçük logo, teklif belgesi ve web bileşenlerinde deneyin; kullanım rollerini kurumsal kimlik kılavuzuna yazın. Aynı rengin her ortamda aynı kod veya aynı görünümle çalışacağını varsaymayın.
Renkleri seçtiniz ama logo, sunum ve web sitesi bir arada tutarlı görünmüyorsa, örnek uygulamalar üzerinden birlikte bir renk sistemi kurabiliriz. Grafik tasarım çalışmasında paleti yalnız renk kartlarıyla değil, kullanılacağı gerçek düzenlerle değerlendirebiliriz.
