Renk Uyumu: Gerçekten İşe Yarayan Paletler Nasıl Oluşturulur

Renk uyumu zevk meselesi değildir. Geometridir. Doğru hissettiren her palet, renk çemberi üzerinde sabit bir ilişkidir ve bunu kasıtlı olarak yeniden üretebilirsiniz.

Çoğu "renk teorisi" makalesinin bir örnek galerisinin altına gömdüğü sır tam olarak budur. İyi bir paletteki renkler, tesadüfen anlaşan arkadaşlar değildir. Bir çember etrafına kasıtlı açılarla yerleştirilmiş noktalardır ve işe yaratan şey bu açıdır.

Geometriyi bir kez gördüğünüzde, renk seçmek kovaladığınız bir his olmaktan çıkar ve aldığınız bir karara dönüşür. Bu bir sistem, bir mood board değil.

Renk uyumu gerçekte ne anlama gelir

Renk uyumu, renklerin gözün rastgele değil de düzenli olarak okuduğu şekilde bir araya getirilmesidir. Uyum, renkleriniz arasındaki ilişkiler tutarlı olduğunda ortaya çıkar; renkler tek tek güzel olduğunda değil.

Neden uğraşasınız? Çünkü yargılama hızlı ve acımasızdır. Interaction Design Foundation'ın Basel Üniversitesi ve Google araştırmalarına dayanarak aktardığına göre, insanlar bir tasarımın çekiciliğini yaklaşık 17 ila 50 milisaniye içinde değerlendiriyor ve bu anlık yargı büyük ölçüde renk ve kompozisyona dayanıyor. İkinci bir ilk izlenim şansınız yok.

Uyum aynı zamanda anlam taşır. Joann ve Arielle Eckstut'un Interaction Design Foundation tarafından aktarılan ifadesine göre, "Renkler bir markanın kişiliğiyle örtüşen duyguları simgeleyebilir." İlişki, tek bir kelime okunmadan önce hissi belirler. Her tonun ne ilettiğinin daha derin katmanını merak ediyorsanız, her rengin gerçekte ne ifade ettiğini ayrıca ele alıyoruz.

Renk çemberi her şeydir

Renk çemberi, her tonun diğer tonlara göre nerede durduğunu gösteren bir haritadır. Uyum şemaları, o haritanın üzerine bıraktığınız şekillerden ibarettir. Şekli döndürün, yeni bir palet elde edin, aynı dengeyi koruyun.

Bu bir efsane değil. Sensational Color'ın açıkladığı gibi, klasik uyumlar "spektrumu dengeleyen renk kombinasyonlarıdır" ve "renk çemberindeki tonların ilişkisini görselleştirmek için geometrik şekillerin kullanıldığını görebilirsiniz." Şekil tarifte, çember mutfak.

Üç ilişki işin büyük bölümünü üstlenir:

• Karşı tonlar çemberin karşı tarafında durur ve kontrast yaratır.
• Komşu tonlar yan yana durur ve bütünlük yaratır.
• Eşit aralıklı tonlar çemberi eşit dilimlere böler ve denge yaratır.

Bu üçünü öğrenirseniz, markaların gerçekte kullandığı şemaların %90'ını kaplamış olursunuz.

Bilmeye değer altı şema

Bilmeye değer altı klasik uyum var. Sensational Color'a göre her biri, çember etrafında döndürülen geometrik bir şekildir ve her biri öngörülebilir bir his üretir.

Hepsine ilk günden ihtiyacınız yok. Çalışan tasarımcıların çoğu üçünde yaşar: tamamlayıcı, analogous ve triadik. Diğer üçü, temel şemanın yetersiz kaldığı anlarda başvurduğunuz varyasyonlardır. İşte üç temel şemanın her birinin yerini kazandığı an.

Tamamlayıcı: maksimum kontrast, minimum çaba

Tamamlayıcı, çember üzerinde doğrudan karşı karşıya duran iki ton demektir: mavi ve turuncu, kırmızı ve yeşil ya da mor ve sarı gibi. Karşıtlık, asıl nokta budur.

Algısal olarak neden işe yarıyor? Karşı tonlar neredeyse hiç ortak dalga boyu komşusu paylaşmaz, bu yüzden göz maksimum ayrımı okur. Bu ayrım kontrast, kontrast da dikkat demektir. Nötr bir alanda tamamlayıcı bir aksan rengi, tasarımdaki en güvenilir "buraya bak" aracı olmak bu yüzden.

FedEx ders kitabındaki örnek: mor ve turuncu bir wordmark, çember üzerinde karşı karşıya duran iki ton. Kontrast o kadar temiz ki her boyutta ayakta kalıyor; negatif boşluk okunda gizlenmiş halde bile.

İşin püf noktası: tam doygunlukta, yan yana, eşit miktarlarda tamamlayıcı renkler titreşecektir. Aynı ses düzeyinde bağıran iki karşıt, aynı dikkat için savaşır ve gözü yorar. Çözüm orantıdır, aşağıda ele alıyoruz.

Analogous: sakin, bütünleşik, düşük riskli

Analogous, çember üzerinde birbirinin yanında duran üç ila dört ton demektir. Sarıdan sarı-yeşile, oradan yeşile geçişi düşünün. Komşular olduklarından harmanlıyorlar.

Bu kadar pürüzsüz hissettirmesinin nedeni dalga boyu yakınlığıdır. Komşu tonlar spektral aralıklarının büyük bölümünü paylaşır, bu yüzden aralarındaki geçişler yumuşaktır ve göz onları tek bir aile olarak okur. Karşıtlık olmadığı için kavga da yok.

Stripe'ın markası, teknoloji dünyasındaki en temiz örnek. İmza hero degradesi, çember üzerinde yan yana duran komşu maviler, morlar ve teal'lar arasında akıyor. Etki premium ve sakin çünkü degradede hiçbir şey tartışmıyor.

Analogous seçebileceğiniz en düşük riskli şemadır; bu yüzden tam da düz görünebilir. Karşıtlık olmadan, kontrastı ton yerine değer (açık ve koyu) üzerinden üretmeniz gerekir. Değerleri doğru ayarlarsanız, analogous pahalı görünür. Atlarsanız, bir sis gibi görünür.

Triadik: kaos olmadan dengeli enerji

Triadik, çember etrafına eşit aralıklarla, üçte bir uzaklıklarla yerleştirilmiş üç ton demektir. Çemberin üzerine eşkenar bir üçgen bırakın ve üç noktayı okuyun.

İşe yaratan şey eşit aralıktır. Her ton diğer ikisinden eşit uzaklıktadır, bu yüzden hiçbir renk konuma göre baskın çıkmaz. Tamamlayıcı bir çiftin çarpışması olmadan birden fazla belirgin rengin canlılığını elde edersiniz. Hakemli bir enerjidir bu.

Tuzak şu: eşit yoğunlukta üç canlı ton hızla bir sirke dönüşür. Triadik, ancak bir ton öncü olup diğer ikisi destekleyici rolde olduğunda dengeli kalır. Geometri size konum dengesi verir, orantı dengesi değil. Orantı hala sizin işiniz.

Bu her şema için geçerli ortak nokta: çember size ilişkiyi verir, her renkten ne kadar koyacağınıza siz karar verirsiniz.

Gerçek markalar şemalarını nasıl seçer

Markalar şema seçimini eğlence için yapmaz. Markanın ihtiyaç duyduğu hissi üreten şemayı seçer, sonra disiplinle uygularlar. İşte geometriyle temiz bir şekilde örtüşen dört örnek.

Spotify disiplin örneğidir. Kimlik tek bir yeşile dayanır, yeni tonlar yerine tint'ler ve shade'lerle çeşitlendirilir. Bu, doğru yapılmış monokromatiktir: değerden derinlik, renk eklemekten değil. Tek ton, tam hafıza.

Duolingo aynı mantığı canlı bir ürün olarak çalıştırır. Arayüz baskın bir yeşille öne çıkar ve durumlar ile ödüller için küçük bir uyumlu aksan seti çeker. Aksanlar yeşille rekabet etmek yerine onu desteklediği için kaotik olmadan renklidir.

Bu markaların hiçbirinin ihtiyaç duyduğundan fazla renk kullanmadığına dikkat edin. Kısıtlama markanın kendisidir.

Sadece tek bir ekranda değil, tüm bir marka genelinde tutunacak bir palete mi ihtiyacınız var? Brainy renk sistemleri inşa eder. Brainy marka paletinizi oluştursun.

Uyumu bozan hatalar

Çoğu bozuk palet aynı birkaç nedenle başarısız olur. Bunların hiçbiri "çirkin" renkler seçmekle ilgili değil. Hepsi ilişkiyi görmezden gelmekle ilgili.

• Eşit orantılar. Her renge aynı miktarda alan vermek hiyerarşiyi kaldırır ve gözün dinleneceği yer kalmaz.
• Her yerde tam doygunluk. Her ton maksimum yoğunluktayken hiçbir şey öncü olmaz ve her şey vızıldar.
• Değer kontrastı yok. Aynı açıklıktaki renkler, özellikle analogous şemalarda, bir araya geldiği anda çamura döner.
• Çok fazla ton. Dört tonun ötesinde uyumu elle tutmak çok zorlaşır; bu yüzden tetradik şemalar kurtardığından fazla paleti mahveder.
• Bağlamı görmezden gelmek. Monitörünüzde muhteşem görünen bir palet, güneş ışığında telefonda ölüp gidebilir. İlişkinin gerçek ekranda ayakta kalması gerekiyor.

En derin düzeltme birlik, ve bunun için eski bir ressam hilesi var. Sanatçı Mallery Jane'in ifadesiyle, "Renk uyumu oluşturmanın bir yolu, Ana Renk adı verilen bir teknik kullanmaktır: bir renkten (ana renk) biraz alın ve tüm karışımlarınıza ekleyin." Her şey ortak bir alt ton paylaşmaya başlar, böylece palet bir komite yerine tek bir aile olarak okunur.

Tek bir renkten palet oluşturmak için bir iş akışı

coolors.co'da palet oluşturun

İlhama ihtiyacınız yok. Bir sürece ihtiyacınız var. Interaction Design Foundation, çalışan tasarımcıların gerçekten kullandığı tekrarlanabilir bir süreç ortaya koyuyor: ilham bulun, baskın renk seçin, ilişkiler için renk çemberine başvurun, oluşturucular kullanın, orantıyla hiyerarşiyi tanımlayın, kontrastı sağlayın, prototip oluşturun, kullanıcılarla test edin ve geri bildirimlere göre yineleyin.

İşte o süreç, tek bir temel renkten çalıştırabileceğiniz bir iş akışına sıkıştırılmış hali.

1. Tek bir temel renk seçin. Markadan, ürün hissinden ya da vazgeçemeyeceğiniz o tek renkten başlayın. Bu sizin çapanız.
2. Bir renk değil, bir ilişki seçin. Önce hissi belirleyin, sonra geometrinin diğer tonları size sunmasına izin verin. Sakinlik analogous demektir. Etki tamamlayıcı demektir. Canlılık triadik demektir.
3. Diğer tonları çemberden okuyun. Eşleşen şekli bırakın ve noktaları alın. Gözle kestirmeyin. Çember, sezginizden daha doğrudur.
4. Ton eklemeden önce değerleri doğru ayarlayın. Sanatçı Chou (@hong_chou_) tarafından da dile getirilen güçlü bir hamle: "oldukça monokromatik bir renk paletiyle başlayın ve önce kontrastı ve değerleri doğru almaya odaklanın," ardından "uyumu kaybetmeden en parlak alanlara başka tonlar katın." Değer iskelet, ton ise cilt.
5. Bir ana renkle birleştirin. Temel renginizin bir izini diğer tüm renklere katın, böylece ortak bir alt ton paylaşırlar.
6. Orantıları belirleyin. Bir renk öncü, biri destekleyici ve biri de aksan olacak şekilde 60-30-10 kuralını kullanın. Bunu birazdan ele alıyoruz.
7. Bağlamda test edin, sonra yineleyin. Gerçek ekranlarda, gerçek boyutlarda, gerçek içeriğe karşı kontrol edin. Ayarlayın. Gönderin.

Ruh halini şemayla eşleştirin

Önce hissi seçin, işte başvuracağınız tablo.

Orantı hakkında: altıncı adımın önemli olmasının nedeni, ilişkinin tek başına hiyerarşi oluşturmamasıdır. 60-30-10 kuralı bunu düzeltir. House Beautiful'ın tarif ettiği gibi, "%60 için bir baskın renk, %30 için ikincil bir renk ve kalan %10 için bir aksan tonu" kullanırsınız. Bu bölünmeyi kendi yazısında ayrıntılı ele alıyoruz, bu yüzden bunu hatırlatıcı olarak alın, ders olarak değil: baskın renk genellikle sakin temelinizdir ve aksan, tamamlayıcı bir tonun kendini kanıtladığı yerdir.

Çember matematiğini sizin için yapan araçlar

color.adobe.com'da deneyin

Açıları elle hesaplamanız gerekmiyor. Bir avuç ücretsiz araç geometriyi çalıştırır ve hex kodlarını size teslim eder.

Bir uyarı: araçlar düşünmeyi atlamayı kolaylaştırır. Bir oluşturucu size matematiksel olarak geçerli bir ilişki sunar, ancak markanızı, kontrast ihtiyaçlarınızı ya da aksanınızın beyaz üzerinde bir erişilebilirlik kontrolünden geçip geçmediğini bilmez. Araç çember matematiğini yapar, yargıyı hala siz yaparsınız. Daha fazla renk ve tasarım analizini tek bir yerde tutuyoruz.

SSS

Renk şeması ile renk uyumu arasındaki fark nedir?

Renk şeması, seçtiğiniz belirli renk kümesidir. Renk uyumu ise o renklerin rastgele değil de düzenli okunmasını sağlayan ilişkidir. Her iyi şema bir uyum üzerine inşa edilir, ancak uyum olmadan da bir şema oluşturabilir ve gürültüyle karşılaşabilirsiniz.

Bir paletteki renk sayısı ne kadar olmalıdır?

Çoğu marka için üç ila beş her şeyi karşılar. House Beautiful'ın tarif ettiği 60-30-10 orantısıyla uygulanan bir baskın, bir veya iki ikincil, bir veya iki aksan. Dört ayrı tonun ötesinde uyumu elle tutmak zorlaşır; bu yüzden Spotify gibi disiplinli markalar tek bir tona yaslanır ve bunun yerine birçok tint üzerinde çalışır.

Yeni başlayanlar için hangi renk şeması en iyisidir?

Analogous veya monokromatik. İkisi de doğrudan karşıtlıktan kaçındığı için affedicidir. Monokromatik, tek bir ton içinde çalıştığınız için kırmak neredeyse imkansızdır; analogous ise yalnızca komşular arasındaki değer kontrastını yönetmenizi ister.

Çarpışmayan veya titreşmeyen tamamlayıcı renkler nasıl oluşturulur?

Onları eşit miktarlarda veya eşit doygunlukta kullanmayın. Bir tonun alanı domine etmesine izin verin ve karşısındakini küçük, genellikle daha doygun bir aksan olarak tutun. 60-30-10 bölümü, tam olarak iki karşıtın aynı ses düzeyinde kavga etmesini durdurmak için vardır.

Renk uyumu kullanıcıların tepkisini gerçekten etkiler mi?

İlk izlenimi ölçülebilir şekilde etkiler. Interaction Design Foundation, Basel Üniversitesi ve Google araştırmalarına dayanarak, insanların tasarım çekiciliğini 17 ila 50 milisaniye içinde, büyük ölçüde renk ve kompozisyona göre değerlendirdiğini belirtiyor. Uyum, o anlık yargının okuduğu şeydir.

Sadece bir palet oluşturucu kullanıp teoriyi atlayabilir miyim?

Saniyeler içinde geçerli bir ilişki oluşturabilirsiniz, evet. Bir oluşturucunun yapamayacağı şey orantıyı ayarlamak, değer kontrastını düzeltmek, erişilebilirliği kontrol etmek veya markanızın anlamını bilmektir. Teori, geçerli bir paleti işleyen bir palete dönüştüren şeydir.

Renk tahminini bırakın

Renk uyumu çalıştırabileceğiniz bir sistemdir, ya sahip olduğunuz ya da olmadığınız bir yetenek değil. Çember ilişkileri kodlar, altı şema üstüne bıraktığınız şekillerdir ve orantı ile değer bir ilişkiyi tutunacak bir palete dönüştürür.

Tek bir temel renk seçin, bir his belirleyin ve diğer tonları geometriden okuyun. Değerleri doğru ayarlayın, bir ana renkle birleştirin, 60-30-10 olarak bölün ve gerçekten yaşadığı yerde test edin. Tüm yöntem bu, ve her seferinde sezgiyi yener.

Doğru hissettiren bir palet asla tesadüf değildir. Çember üzerinde adını koyup yeniden kullanabileceğiniz bir ilişkidir.

Sadece tek bir ekranda değil, tüm bir marka genelinde tutunacak bir palete mi ihtiyacınız var? Brainy renk sistemleri inşa eder. Brainy marka paletinizi oluştursun.