Tasarımcılar İçin Renk Teorisi: Her İyi Renk Paletinin Arkasındaki Sistem
Tasarımcılar için renk teorisi. Renk çemberi, uyum, algı, psikoloji, erişilebilirlik ve modern tasarım sistemlerinin tüm bunları nasıl piyasaya sürülen bir ürüne dönüştürdüğü.
Renk teorisi, sanat tarihi dersi gibi öğretilir ve inşaat mühendisliği gibi uygulanır. Renk çemberleri, uyumlar, tamamlayıcı renkler. Sıcak ve soğuk.
"Kırmızı tutkuyu ifade eder." Bunlar, çoğu tasarımcının okulda eline verilen ve neredeyse hiçbirinin gerçek bir ürün arayüzüyle temasından sağ çıkamadığı eserlerdir.
Çalışan tasarımcıların aslında ihtiyaç duyduğu şey bir yığın. Gözün rengi nasıl algıladığından, renk çemberi ve uyumlarından, kontrast ve hiyerarşiye, psikoloji ve kültüre, palet oluşturmaya ve nihayetinde işi teslim eden belirteçlere ve tasarım sistemlerine kadar uzanan katmanlı bir sistem. Bir katmanı atlarsanız, palet Figma'da iyi görünür ancak üretimde dağılır.
Bu makale tüm yığını anlatıyor. Her katmanın daha derine inmek için kendi Brainy makalesi vardır. Burada onları birbirine bağlıyoruz.
Renk Teorisi Gerçekte Sizden Ne Çözmenizi İstiyor
Renk teorisi bir dizi estetik kural değil, bir palet teslim edilmeden önce birlikte çalışması gereken bir vizyon, algı ve sistematik düşünme yığınıdır. Özetle: İnsan görüşü tuhaftır, renk fizikseldir ve tasarımcılar, yüzlerce cihazda ve onlarca bağlamda milyonlarca insan için işe yarayan çıktılar üretmek zorundadır. Teori, bu sorun hakkında akıl yürütmek için kullandığımız kelime dağarcığıdır. Bir dizi emir değildir. "Bu garip geliyor"dan "vurgu arka planla yarışıyor ve 14 puntoda kontrast yetersiz kalıyor"a geçmenizi sağlayan ortak kavramlar kümesidir.
Katmanlar kasıtlı olarak oluşturulmuştur. Her katman farklı bir soruyu yanıtlar.
| Katman | Yanıtladığı soru |
|-------|-------------------------|
| Algı | Göz bu rengi bağlam içinde nasıl görüyor? |
| Renk Çarkı | Bu renkler arasındaki ton ilişkisi nedir? |
| Uyum | Bu renkler birbiriyle ilişkili mi yoksa çatışıyor mu? |
| Kontrast | Bu okunabilir, görülebilir, tıklanabilir mi? |
| Palet | Bu marka veya ürün hangi renklere sahip? |
| Sistem | Bu renkler ölçekte nasıl tutarlı bir şekilde uygulanıyor? |
| Erişilebilirlik | Sistemdeki her renk eşleşmesi her kullanıcı için işe yarıyor mu? |
Her katman yük taşıyıcıdır. Algısal düşünme olmadan tasarlanmış bir palet bağlamda başarısız olur. Erişilebilirlik olmadan oluşturulmuş bir sistem denetimde başarısız olur.
Palet mantığı olmadan seçilen bir uyum ölçekte başarısız olur. Katmanlar birleşir, bu da rengi doğru seçmenin neden katlanarak artan getiriler sağladığının nedenidir.
Renk Çarkı, Uyumlar ve Gerçekte Ne İşe Yaradıkları
renk çemberi, renk tonu ilişkilerinin bir modelidir ve uyumlar, gözün ilişkili olarak algıladığı çiftleri ve grupları seçmek için kısayollardır.
Çoğu tasarımcı renk çarkını birincil-ikincil-üçüncül üçgenler olarak öğrenir ve bir daha asla kullanmaz. Bu bir israftır. Renk çemberi, hangi renklerin birbirine ait olduğunu ve hangilerinin çatıştığını anlamanın en hızlı yoludur; bu da bir palete, şemaya veya markaya yeni bir renk eklediğiniz her seferinde önemlidir.
Ürün ve marka çalışmalarında dört uyum önemlidir.
Tamamlayıcı
Renk çemberinde zıt renkler. Mavi ve turuncu, kırmızı ve yeşil, mor ve sarı. Tamamlayıcı renkler, iki ton arasında mümkün olan en yüksek görsel gerilimi yaratır.
Bu, tek anlık etki için (bir poster, bir kahraman görseli, bir spor üniforması) harika, ancak uzun süreli arayüz kullanımı için berbattır; bu nedenle neredeyse hiç saf tamamlayıcı ürün paletleri görmezsiniz. Kullanıcı arayüzünde, tamamlayıcı renkler yumuşatılır: bir ton baskın olur, diğeri ise ölçülü bir vurgu olarak ortaya çıkar.
Benzer Renkler
Renk çemberinde bitişik renkler. Gökyüzü mavisi, mavi, mavi-mor. Benzer renk paletleri tutarlı ve sakin bir his verir.
Bunlar, çoğu modern marka sistemleri'in temelini oluşturur. Tehlike şu ki, renkler arasında yeterli değer kontrastı yoksa monoton görünebilirler. Analog renkler, renk paleti'yi rakip bir küme olarak değil, bir aile olarak ele aldığınızda işe yarar.
Üçlü ve Bölünmüş Tamamlayıcı: Az Kullanılan Çift
Tamamlayıcı ve analog renkler tasarım okullarında en çok dikkat çeken renklerdir. Sonraki iki uyum daha az konuşulur ve çalışan tasarımcılar için genellikle daha kullanışlıdır.
Üçlü
Renk çemberi etrafında eşit aralıklarla yerleştirilmiş üç renk. Kırmızı-sarı-mavi. Turuncu-yeşil-mor. Üçlü paletler neşeli ve yüksek enerjili bir his verir, bu yüzden çocuk markalarında, sporda ve eğlencede karşımıza çıkarlar.
Ürün tasarımında, saf üçlü renk nadirdir çünkü dengelemek zordur. Üçlüden ilham alan paletler (bir baskın renk, diğer ikisi daha soluk) her yerde bulunur.
Bölünmüş Tamamlayıcı
Bir renk artı tamamlayıcısının bitişiğindeki iki renk. Mavi artı sarı-turuncu ve kırmızı-turuncu. Bölünmüş tamamlayıcı renkler, tamamlayıcı renklerin kontrastının çoğunu daha az gerilimle korur. Bu, birçok iyi uygulanmış marka sisteminde arama yaptığınızda ortaya çıkan, hafife alınan bir uyumdur.
Uyumlar araçlardır, cevaplar değil. "Üçlü yapalım" diyerek bir marka paleti seçmezsiniz. Önerilen kombinasyonlar hakkında akıl yürütmek ve zaten işe yarayanları tespit etmek için uyumları kullanırsınız.
Algı, Teoriyi Her Zaman Yener
Aynı düğmedeki aynı kırmızı, nötr bir sayfada acil, turuncu bir sayfada gürültülü ve koyu kırmızı bir sayfada görünmez olarak algılanır ve bunların hiçbiri tekerlek tarafından açıklanmaz.
Bağlam, renkteki güç çarpanıdır. Bir rengin sabit bir anlamı, sabit bir parlaklığı veya sabit bir okunabilirliği yoktur. Yanında ne varsa, bir saniye önce ekranda ne varsa, kullanıcının baktığı ekran ne olursa olsun ve o ekrana vuran ışık ne olursa olsun bir ilişkisi vardır. Algı olmadan teori, boşlukta teoridir.
Üç algı etkisini bilmekte fayda var.
Eş zamanlı kontrast. Aynı gri, siyahın yanında daha açık, beyazın yanında daha koyu görünür. Bunun anlamı şudur: Beyaz bir stüdyo arka planına karşı seçtiğiniz bir marka rengi, koyu bir ana görsele yerleştirildiğinde tamamen farklı görünecektir. Renkleri izole bir şekilde değil, üretim bağlamında test etmelisiniz.
Kromatik adaptasyon. Göz, ortam rengine 500 milisaniye veya daha kısa sürede uyum sağlar. Sıcak turuncu bir ana görselde beş saniye geçirdikten sonra nötr bir içerik alanına kaydırılan bir sayfa, o içerik alanının gerçekte olduğundan daha soğuk görünecektir. Kullanıcının algısı, farkında olmadan değişmiştir.
Değer kümelenmesi. Göz, benzer parlaklıktaki öğeleri ilişkili, benzer koyuluktaki öğeleri ise ayrı olarak gruplandırır. Hiyerarşi böyle çalışır. Güçlü bir tasarım, renk kontrastından ziyade değer kontrastını kullanır çünkü görsel sistem önce değeri işler.
Renk Psikolojisi: Kanıtlar ve Batıl İnançlar
Renk psikolojisi gerçektir, ancak renk psikolojisi olarak adlandırılan şeylerin çoğu geri dönüştürülmüş efsanelerdir; bu nedenle tasarımcıların kanıtları folklorik bilgilerden ayırmaları gerekir.
Loyola marka tanıma çalışması (renk, marka tanımanın %80'ine kadarını etkiliyor), algılanan aciliyet üzerindeki doygunluk etkileri, karanlık mod tercihleri ve kültürel renk çağrışımları üzerine gerçek araştırmalar vardır. Bunlar faydalıdır. Ayrıca, en ufak bir inceleme altında çöken "kırmızı, dönüşümü %21 artırır" iddiasında bulunan bir sürü blog yazısı da var. Bunlar faydalı değil.
Hızlı test: Bağlam, kültür veya hedef kitleyi içermeyen herhangi bir renk psikolojisi iddiası batıl inançtır. Renk anlamı her zaman bağlamsaldır. Yeşil, ABD'deki fintech sektöründe parayı, wellness sektöründe ise doğayı temsil eder ve her ikisi de kendi bağlamlarında doğrudur.
Gerçek olanın ne olduğu, geri dönüştürülen şeyin ne olduğu ve renk psikolojisinin marka ve ürün çalışmalarında nasıl uygulanacağına dair ayrıntılı bilgi için, Tasarımda renk psikolojisi makalesi kanıta dayalı bir çerçeve sunmaktadır.
Oran Kuralları Ürün Ölçeğinde Neden Bozuldu?
60-30-10 kuralı ve benzerleri tek yüzeyli bir sorunu çözdü ve ürün tasarımı tek bir yüzey değildir.
İç tasarım, "her renkten ne kadarının duvarlarda, mobilyalarda ve aksesuarlarda kullanılacağı" sorusuna cevap vermek için 60-30-10 oranını icat etti. Bu, bir odaya net bir şekilde uyar. Ancak yüzlerce yüzeye, onlarca duruma, açık ve koyu moda ve çeşitli cihazlarda kullanıcılara sahip dijital bir ürüne uymaz.
Modern ürün rengi, roller için oranı terk etti. Yüzey, içerik, vurgu, durum, anlamsal. Her rol, tema başına farklı bir ham değere çözümlenen bir tasarım belirteci alır. Bu, 60-30-10'un yerini alır ve ölçeklenebilir tek şeydir.
Oranların neden bozulduğu ve rol tabanlı token sistemlerinin pratikte nasıl göründüğüne dair ayrıntılı açıklama 60-30-10 kuralı ihlal edildi. makalesinde yer almaktadır.
Erişilebilirlik Artık Renk Teorisinin Bir Parçası
WCAG ve APCA, erişilebilirliği "sonunda QA'nın incelediği bir şey" olmaktan çıkarıp renk sisteminin kendisinin bir özelliği haline getirdi.
Uzun bir süre boyunca erişilebilirlik ayrı bir konuydu. Tasarımcılar estetik için bir palet seçer, QA oranları sonunda kontrol eder, bir şeyler ayarlanır ve herkes devam ederdi. Bu iş akışı ölçeklenebilir değildir. Artık piyasaya sürülen her tasarım sistemi, erişilebilirliği token katmanında kodlar; bu da paletin kendisinin baştan itibaren kontrast oranı ve algısal eşiklere göre tasarlanması gerektiği anlamına gelir.
Özetle: WCAG 2.2 AA, uyumluluk tabanıdır (4.5:1 gövde, 3:1 büyük metin ve metin dışı kullanıcı arayüzü). APCA, gerçek okunabilirlikle daha iyi korelasyon gösteren ve WCAG 3 için önerilen algısal algoritmadır. Gerçek ürünler her ikisini de hedef alır.
Çalışan tasarımcının WCAG oranlarına, APCA'ya ve tasarım sistemlerinin kontrastı nasıl tokenleştirdiğine dair tam bakış açısı için, erişilebilir renk kontrastı makalesi konuyu baştan sona ele almaktadır.
Bir Palet Oluşturma: Çalışan Tasarımcının Yığını
Gönderilen ve ölçeklenen bir palet, tek seferde seçilmek yerine katman katman oluşturulur.
İşleyen süreç, kasıtlı bir sırayla ilerler. Her katman bir sonrakini kısıtlar; bu da paleti tutarlı tutmanın ve tek seferlik renk seçimlerinden oluşan bir koleksiyona dönüşmemesini sağlamanın yoludur.
-
Tarafsız bir renk skalasıyla başlayın. 8 ila 12 gri (veya griye yakın, genellikle markanın sıcaklığına doğru hafifçe kaydırılmış) tonu oluşturun. Gerçek bir arayüzün çoğu nötr renklerden oluşur. Bu, diğer tüm katmanların üzerine oturduğu temeldir.
-
Marka vurgusunu seçin. Bir okuyucunun tek başına gördüğünde markayla ilişkilendireceği tek şey olan bir ana renk. Burada ölçülü olmak önemlidir. Vurgu katmanını marka anları, birincil eylemler ve yüksek sinyalli öğeler için ayırın.
-
Anlamsal renkler ekleyin. Başarı, uyarı, kritik, bilgi. Bunlar işlevseldir, dekoratif değildir ve marka kişiliğini taşımadan açık ve koyu modda çalışmalıdırlar. Bunları süsleme değil, kullanışlılık olarak ele alın.
-
Durum katmanına genişletin. Üzerine gelme, odaklanma, basılı tutma, devre dışı bırakma, seçili. Bunlar genellikle diğer katmanlardan türetilir (üzerine gelme için daha koyu bir vurgu, devre dışı bırakma için soluk bir nötr renk) ancak kendi simgeleridir. 5. Her şeyi tokenleştirin.** Gönderilen her renk eşleşmesinin bir rol adı olması gerekir.
text-on-accent,bg-subtle,border-default. Bir tasarımcı token olmadan ham bir renge ulaşabiliyorsa, palet zaten sızdırıyor demektir. -
Sadece matematiğe değil, algıya göre de test edin. Önce WCAG oranları, sonra APCA puanları, ardından gerçek dünya testleri: gri tonlama modu, şaşılık testi, düşük ışık önizlemesi, markada çalışmayan kişilerden beş saniyelik tepkiler.
-
Koyu modu paralel bir token seti olarak gönderin. Bir filtre değil. Bir ters çevirme değil. Aynı tokenleri farklı değerlere çözümleyen uygun bir paralel palet.
Tek Seferde Değil, Sırayla Oluşturun
Sıra önemlidir çünkü nötr renkler herhangi bir sayfada ağır işi üstlenir ve vurgu rengi ile başlayan tasarımcılar, paletin geri kalanını, geçerliliğini yitirebilecek bir karar etrafında oluştururlar. Sessiz katmanla başlayın. Yüksek sesli katmanı en sona ekleyin.
Uygulamalı Renk Teorisi Olarak Tasarım Sistemleri
Günümüzde renk teorisi için en iyi referans materyali bir ders kitabı değil, büyük ölçekte ürün gönderen markaların kamuya açık tasarım sistemi belgeleridir.
Bu sistemler, yığının her katmanını varsayılan ayarlara entegre eder. Ayrıca ücretsiz, açık kaynaklıdır ve her gün ürün rengi gönderen kişiler tarafından sürdürülmektedir.
Material Design 3
m3.material.io adresinden canlı olarak izleyin.
Material 3, uygulamalı sistem olarak renk teorisi konusunda en açık olanıdır. Her rolün, o rolün üzerine yerleştirilen metin/ikonlar olan eşleştirilmiş bir on- karşılığı vardır; ölçekler HSL yerine ton-renk-renk tonundan türetilmiştir ve tüm sistem tek bir kaynak renkten dinamik olarak tema oluşturmak üzere tasarlanmıştır.
Bundan çıkarılacak sonuç: on- deseni. Bir tasarımcı bir düğme için primary seçtiğinde, sistem o düğmedeki metnin hangi renkte olması gerektiğini zaten bilir. Erişilebilirlik ve kontrast teorisi isimlendirmeye entegre edilmiştir.
Radix Renkleri
Radix-ui.com adresinden canlı olarak izleyin.
Radix, her bir adımın belirli bir role (uygulama arka planı, ince arka plan, UI öğesi, üzerine gelme, odaklanma, aktif, düz, metin, yüksek kontrastlı metin) eşlendiği, ton başına 12 adımlı ölçekler sunar. Bu, etkili bir şekilde kontrast merdivenine zımbalanmış bir renk uyumu referansıdır. Tasarımcılar, yüksek kontrastlı metne ihtiyaç duyduklarında ve alt kademelere karşı AA (Aktif Harf Değerlendirmesi) testinden geçeceğini bildiklerinde 11. kademeye yönelirler.
Bundan çıkarılacak sonuç: numaralı merdiven. Bir ölçeğin her kademesine bir rol vermek, her tasarım incelemesinde "hangi griyi kullanmalıyım" tartışmasını ortadan kaldırır.
⟦MARKA2⟧ Spektrum: Ölçekte Algısal Tekdüzelik
Material ve Radix, rengi rol katmanında çözer. ⟦MARKA3⟧ daha derine iner ve ölçeklerin kendilerini algısal modeller üzerine kurarak, tonlar değiştiğinde kontrast ilişkilerinin korunmasını sağlar.
spectrum.adobe.com adresinden canlı olarak izleyin.
Spectrum, algısal olarak tekdüze ölçekler kullanır, böylece aynı kademe numarasına sahip iki simge, her tonda aynı görsel ağırlığa sahip olur. Bu, algısal ilişkiler ölçek düzeyinde kilitlendiği için bir temanın kontrastı bozmadan maviden turuncuya dönebileceği anlamına gelir.
Bundan çıkarılacak sonuç: algısal tekdüzelik. Eğer ölçeğiniz OKLCH veya HSLuv gibi algısal modeller üzerine kuruluysa, erişilebilirlik her yeni renkte yeniden doğrulanması gereken bir şey olmaktan ziyade marka temaları arasında taşınabilir hale gelir.
SSS
Bir tasarımcı olarak renk teorisini nasıl öğrenirim?
Yukarıdan aşağıya doğru (algı, tekerlek, uyum, kontrast, palet, sistem) sıralamayı okuyun, ardından gerçek bir projede sırayla uygulayın. Uygulama olmadan teori bir hafta içinde kaybolur. Teslim edilmiş bir palete uygulanan teori kalıcıdır çünkü geri bildirim anındadır. Algı için Josef Albers'in Renk Etkileşimi kitabını okuyarak başlayın, uygulanan kontrast merdivenleri için Radix Colors belgelerine bir öğleden sonra ayırın ve yukarıdaki sıralamayı kullanarak gerçek bir palet oluşturun.
Bilimi bilmem gerekiyor mu yoksa sadece araçları kullanabilir miyim?
Işık fiziğini veya koni hücrelerinin biyolojisini bilmeden de ürün teslim edebilirsiniz. Algı, kontrast ve rol tabanlı sistem düşüncesini bilmeden ürün teslim edemezsiniz.
Araçlar matematiği halleder. Tasarımcı ise yargıyı. Tamamen araçlara dayanan bir tasarımcı, araçların ne zaman yanlış olduğunu (özellikle WCAG 2 matematiği için bu sık sık olur) anlayamayan bir tasarımcıdır.
Yeni tasarımcıların renk konusunda yaptığı en büyük hata nedir?
Önce vurgu rengini seçmek. Vurgu rengi, paletin en dikkat çekici rengidir ve paletin geri kalanını tek bir dikkat çekici karar etrafında oluşturmak neredeyse her zaman dikkat çekici bir palet ortaya çıkarır.
Nötr renklerle başlayın. Vurgu rengini en son belirleyin. Paletin geri kalanı sağlam ise vurgu rengini daha sonra her zaman değiştirebilirsiniz.
Renk Teorisi İsteğe Bağlı Değil, Ortamın Bir Parçasıdır
Renk teorisi, kimsenin tartışmadığı ve herkesin, bilseler de bilmeseler de uyguladığı tasarımın bir parçasıdır.
"Bu mercan rengi, doğru hissettiriyor" diyen bir tasarımcı renk teorisini uyguluyor demektir. "Düğmeyi daha dikkat çekici hale getirebilir miyiz?" diye soran bir ürün yöneticisi renk teorisi sorusu soruyor demektir. "Bu sayfa dağınık görünüyor" diyen bir kullanıcı, değer-kontrast hatasını bildiriyor demektir.
Teori zaten ortada. Soru şu: Bunu bilinçli olarak mı uyguluyorsunuz yoksa sonradan mı tepki veriyorsunuz?
Yığın üzerinde çalışmak, görünmeyeni görünür kılar. Renk seçmeyi bırakıp palet tasarlamaya başlarsınız. Ton seçmeyi bırakıp sistem tasarlamaya başlarsınız. Erişilebilirlik konusunda tahmin yürütmeyi bırakıp ürünü piyasaya sürmeye başlarsınız.
Kazanç katlanarak artar. Yığın üzerinden tasarlanmış bir palet, marka kimliğini temiz bir şekilde yeniden oluşturur, koyu renkleri temiz bir şekilde kullanır, ölçeklenebilirliği temiz bir şekilde sağlar ve denetimlerden temiz bir şekilde geçer. Rastgele seçilen bir palet ise bunların hiçbirini yapmaz ve her seferinde ekibin zamanını boşa harcar.
Yığın hakkında bilgi edinin. Yığın üzerinde çalışın. Yığının ürününü piyasaya sürün.
Want a color system that actually works end to end? Brainy builds palettes from perception to tokens with accessibility baked in.
Get Started
