Renk Paleti Oluşturucu

İyi Bir Renk Paletinin Tasarımın Tamamını Nasıl Taşıdığı

Yanlış renkleri seçerseniz, insanlar bunu adını koymadan önce hissederler. Bir sayfa ucuz görünür, bir logo kirli durur, bir grafik gürültüye döner. Doğrularını seçerseniz iş tıkırtısız ilerler: kasıtlı, sakin, taramaya kolay bir his verir. Renk pek çok sessiz iş üstlenir; atmosfer kurar, gözü yönlendirir ve okuyucuya neyin önemli olduğunu söyler. Dolayısıyla palet, sona eklediğiniz bir dekorasyon değildir. Erken verdiğiniz bir karardır ve neredeyse her şey ona dayanır.

İyi haber şu: sağlam bir renk düzeni oluşturmak için güzel sanatlar derecesine ihtiyacınız yok. Renk teorisinden birkaç kural ve fikirleri hızlıca denemenin bir yoluna ihtiyacınız var. Bir oluşturucu tam da bunun içindir: eskiden tek bir düzen üzerinde uğraşmanın aldığı sürede düzinelerce kombinasyonu denemenizi sağlar.

Renk Teorisi, Jargonsuz

Uyumların büyük bölümü tek bir basit fikirden kaynaklanır: renklerin çarkta birbirine göre konumu. Dört deseni öğrenin ve neredeyse her düzeni okuyabilir ya da oluşturabilirsiniz.

• Tamamlayıcı (Complementary) birbirine tam karşı duran iki rengi kullanır; mavi ve turuncu gibi. Yüksek enerji yayar ve dikkat çekmek için harikadır; ancak her ikisi de odak için çekişirse sorun çıkar, bu yüzden birinin öne çıkmasına izin verin ve diğerini vurgu olarak kullanın.
• Benzer (Analogous) yanyana duran üç rengi kullanır; kırmızı, turuncu ve sarı gibi. Düşük kontrast sunar, sakindir ve doğada her yerde gördüğünüz türden bir uyumdur. Göze hoş gelir; ancak her şeyin düz görünmemesi için bir yerde kontrast eklemeniz gerekebilir.
• Üçlü (Triadic) çark üzerinde eşit aralıklı üç rengi kullanır; kırmızı, sarı ve mavi gibi. Parlak ve dengeli olup bir renk baskın olduğunda ve diğer ikisi destek rolü üstlendiğinde en iyi şekilde çalışır.
• Tekrenkli (Monochromatic) tek bir tona bağlı kalır ve yalnızca aydınlık ile doygunluğu değiştirir. En hatasız düzendir; temiz ve uyumludur; başka hiçbir şey doğru hissetmediğinde iyi bir geri dönüş seçeneğidir.

Rastgele bir oluşturucu ilham için eğlencelidir; ancak gerçek değer uyum modlarında yatar. Renklerinizi matematiksel olarak ilişkili tutar; dolayısıyla herhangi bir ince ayar yapmadan önce bile birlikte ait görünürler.

HEX, RGB ve HSL Sade Bir Dilde

Kopyaladığınız her renk birkaç gösterimle gelir ve hepsi aynı şeyi farklı biçimde tanımlar.

HEX, en çok gördüğünüz altı karakterli koddur; #3A7BD5 gibi. Kırmızı, yeşil ve mavi tek bir diziye sıkıştırılmıştır; her biri için iki karakter. Kompakttır ve CSS'e ya da bir tasarım aracına yapıştıracağınız şey budur.

RGB, aynı üç kanalı 0'dan 255'e kadar sayılar olarak açar; rgb(58, 123, 213) gibi. Aynı renk, daha kolay okunur ve şeffaflık için bir alfa kanalı istediğinizde kullanışlıdır.

HSL rengi insanların gerçekten düşündüğü biçimde tanımlar: ton (hangi renk, çark üzerinde 0'dan 360 dereceye kadar), doygunluk (ne kadar canlı) ve aydınlık (ne kadar parlak). Tahmin yürütmeden aydınlığı veya doygunluğu ayarlamak tam beklediğiniz etkiyi yarattığından, elle yapılan ayarlamalar için en kullanışlı formattır. Formatlar arasında geçiş yapmanız gerekirse, hızlı bir HEX'ten RGB'ye dönüştürme işlemi bunu kolaylaştırır.

Kontrast ve Erişilebilirliği Unutmayın

Bir palet muhteşem görünebilir ve yine de biri üzerinde metin okumaya kalktığında başarısız olabilir. Kontrast, güzelin kullanışlıyla buluştuğu yerdir. Web İçeriği Erişilebilirlik Yönergeleri net bir çıta belirler: normal gövde metninin arka planına karşı en az 4,5:1 kontrast oranına ulaşması ve büyük metnin en az 3:1 değerine sahip olması gerekir. Bu bürokratik bir kural değil; sayfanızı rahatça okuyan bir okuyucu ile gözlerini kısan, pes eden ve ayrılan biri arasındaki farktır.

Pratik adım, ön ve arka plan çiftlerinizi sonradan değil, oluştururken test etmektir. Açık gri üzerine beyaz bir taslakta zarif görünebilir ve gün ışığında telefonda görünmez hale gelebilir. Bir kombinasyon başarısız olduğunda genellikle tüm düzeni atmak yerine yalnızca bir rengi biraz daha koyu ya da açık yapmak yeterlidir. Parlak vurgu renklerinizi uzun metin bölümleri yerine düğmeler, bağlantılar ve vurgular için saklayın; böylece kontrast sorunlarının büyük bölümünü ortaya çıkmadan önleyirsiniz.

Pratik Bir Çalışma Akışı

İşte projeler genelinde geçerliliğini koruyan bir akış. Emin olduğunuz tek bir çıpa rengiyle başlayın; çoğunlukla bir marka rengi veya istediğiniz atmosfere uyan bir ton. Onu kilitleyin, ardından oluşturucunun etrafında bir uyum kurmasına izin verin. Tamamlayıcı, benzer ve üçlü arasında bir şeyler doğru hissedene kadar geçiş yapın; ilk geçişi fazla düşünmeyin, yön arıyorsunuz, nihai cevabı değil.

Bir aday belirledikten sonra rolleri atayın. Arka planlar ve geniş alanlar için baskın bir renk, yapı için ikincil bir renk ve öne çıkması gereken bölümler için bir güçlü vurgu rengi seçin. Baskın, ikincil ve vurgu arasında yaklaşık 60-30-10 dağılımı, katı hissetmeden işleri dengeli tutar. Ardından her metin çiftinde kontrastı kontrol edin, hex kodlarını kopyalayın; bitti. İşe yarayan paletleri saklayın; çünkü bir proje için başarıyla oluşturduğunuz palet çoğunlukla bir sonrakinin tohumudur. Oluşturmaya devam etmeye hazırsanız, tüm oluşturucular koleksiyonumuzun geri kalanı diğer parçaları ele alabilir.

Sık sorulan sorular