Gerçekten İşe Yarayan Bir Marka Renk Paleti Nasıl Oluşturulur?
Çalışan bir tasarımcı için, karanlık mod, devre dışı bırakma durumları ve logonun ötesindeki her yüzeyde geçerliliğini koruyan bir marka renk paleti oluşturma rehberi. İçinde beş gerçek marka örneği bulunuyor.
Çoğu marka renk paleti, logo sunumu için oluşturulur ve ilk gerçek düğmenin devre dışı bırakılması gerekene kadar oldukça iyi kalır.
Çalışan bir marka renk paleti beş renkten ibaret değildir. Katmanlı bir sistemdir: bir temel renk, gerçek bir nötr renk skalası, anlamsal renkler, durum renkleri ve Figma açılmadan önce var olan bir karanlık mod planı. Bu makale, katmanları inceliyor, beş markanın bunu nasıl doğru yaptığını gösteriyor ve oluşturma sırasıyla sona eriyor.
Çoğu Marka Renk Paleti Neden Başarısız Oluyor?
Çoğu marka renk paleti, renklerin yanlış olmasından değil, bir logo sunumu için değil, bir ürün veya hizmet için oluşturulmalarından dolayı başarısız olur.
Tipik süreç şöyle işler: Bir tasarımcı moodboard oluşturur, brief'e uygun hissettiren beş renk seçer, bunları birincil, ikincil, vurgu, açık, koyu olarak etiketler ve paleti ürün, site, dokümanlar ve kampanyaları gönderen ekiplere teslim eder. Bu ekiplerin hiçbiri, beş renk örneği seçilirken odada değildi.
"İkincil" renk, kullanılabilir bir orta aralığa sahip değil. "Birincil" renk, gövde metni için çok doygun. Kimse nötr bir gri seçmedi, bu yüzden tasarımcı bir tane icat etti.
Karanlık mod ekibi pes etti ve her şeyi bir CSS filtresiyle tersine çevirdi. Palet, sunum için görevini yerine getirdi. İşinde başarısız oldu.
Çalışan Bir Paletin Beş Katmanı
Gerçek marka çalışmalarında ayakta kalan bir paletin beş rengi değil, beş katmanı vardır. Büyük ölçekte marka sistemleri geliştiren tasarımcılar, bir rengin hangi katmana ait olduğu konusunda tartışırlar, hangi yeşil tonunun "bizi daha çok yansıttığı" konusunda değil.
| Katman | Ne işe yarar | Tipik sayı |
|-------|--------------|----------------|
| Çapa | Marka tanınırlığını taşır | 1 (belki 1 destek) |
| Nötrler | Yüzeyler, metin, kenarlıklar, arka planlar | 9-12 adım |
| Semantik | Başarı, uyarı, kritik, bilgi | 3-5 aile |
| Durum | Üzerine gelme, odaklanma, basılı tutma, devre dışı bırakma | Her etkileşimli renkle eşleştirilir |
| Koyu | Her katmanın koyu mod çözünürlüğü | Tam paralel set |
Listede olmayanlara dikkat edin. "İkincil marka rengi", "üçüncü", "vurgu 2" yok. İkinci bir marka rengine ihtiyaç duyduğunu düşünen çoğu marka aslında daha kapsamlı bir nötr renk skalasına veya daha cesur bir çapaya ihtiyaç duyar.
Düzleştirme hatadır. Katmanlar özelliktir.
Çapa Rengini İlk ve Son Olarak Seçin
Çapa rengi, markanın her yüzeyde tanınmasını sağlayan tek renktir ve iki kez seçilir: birincisi başlangıçta, ikincisi ise yanında ne olması gerektiği belirlendikten sonra.
İlk seçim yönlendiricidir. Çapa rengi, logodan arındırıldığında bile markayı işaret edecek tek renk olmalıdır. Renk seçimi aynı zamanda duygusal bir iddiadır ve bu noktada renk psikolojisi, hex kodu kullanılmadan önce işin yarısını halleder. Stripe mor, Linear mor, Figma mavi, Notion siyah, Slack macenta gibi renkleri düşünün. Tek bir renk kimlik çalışmasını yapar.
İkinci seçim tekniktir. Nötr renk skalası oluşturulduktan sonra, çapa renginde neredeyse her zaman küçük bir değişiklik gerekir. Nötr renkle kontrast oluşturmalı, karanlık mod için ayarlanmış bir kardeş renge sahip olmalı ve fareyle üzerine gelindiğinde veya basıldığında bulanıklaşmayan durumlar sunmalıdır. Gerçek marka sistemleri, tek bir sabit altıgen yerine 5-9 kademeli bir çerçeve sunar.
Nötr Renkler Paleti Oluşturur
Bir arayüzün büyük bir kısmı nötr renklerden oluşur ve gerçek bir nötr renk skalasına sahip olmayan bir markanın paleti yoktur, bir ruh hali panosu vardır.
Gerçek bir nötr renk skalası, yanında bulunduğu çerçeve rengine göre ayarlanmış, beyaza yakın renkten siyaha yakın renge kadar 9 ila 12 kademeli bir skaladır. Saf griler genellikle sıcak bir çerçeve renginin yanında cansız, mavi bir çerçeve renginin yanında ise çok soğuk görünür.
Nötr renk skalası, erişilebilir renk kontrastı'in tasarıma dahil edildiği veya tasarımdan çıkarıldığı yerdir. Her yüzey kademesinin kontrast oluşturan bir metin kademesi ve bir kenarlık kademesi vardır. Her kademenin bir rolü vardır: arka plan, ince arka plan, yüzey, yükseltilmiş yüzey, kaplama, ayırıcı, kenarlık, soluk metin, varsayılan metin, güçlü metin.
En güçlü nötr renk paletine sahip markalar, nötr rengi paletin kahramanı olarak ele alırlar, dolgu malzemesi olarak değil. Çapa, bayraktır. Nötr renkler tüm ülkedir.
Çapa Disiplinini Başarmış Üç Marka
Bu üç marka, derin bir nötr renk skalasına karşı ölçülü bir çapa rengi kullanır ve çapa rengi asla yayılmadığı için tanınabilir kalır.
Notion
notion.com/product adresinden canlı olarak inceleyin.
Notion minimalist uç noktayı sunuyor. Çalışma yüzeyinin neredeyse tamamı, siyah metinli, ayarlanmış bir kırık beyazdır. Tek bir koyu lacivert, pazarlama bandını taşıyor ve anlamsal katman, görev durumları için kırmızı, turuncu, mavi, yeşil gibi görünür renk işini yapıyor.
Ne çalmalı: bir temel renk seçin, sonra markanın ikinci bir temel renge ihtiyacı olup olmadığını sorun. Dürüst cevap genellikle hayır olur.
⟦MARKA3⟧
linear.app üzerinden canlı izleyin.
⟦MARKA4⟧, kategorideki en iddialı koyu renk paletini kullanıyor. Temel renk tek bir mor. Nötr renkler, farklı işler yapan tam bir koyu mod ölçeği (yüzey, ince yüzey, yükseltilmiş yüzey, kaplama) oluşturuyor.
Ne çalmalı: ürün koyu modda gönderiliyorsa, koyu renk paletini açık renk paletiyle aynı özenle oluşturun, bir filtre geçişi olarak değil.
⟦MARKA7⟧
stripe.com/payments adresinden canlı olarak inceleyebilirsiniz.
⟦MARKA8⟧, SaaS'ta en temiz çapa katmanı disiplinini uyguluyor. Mora çalan mor renk, harekete geçirici mesajlarda, satır içi bağlantılarda, illüstrasyonlarda ve marka anlarında görünüyor ve neredeyse başka hiçbir yerde kullanılmıyor. Mor renk göründüğünde, göz onu dekorasyon değil, eylem olarak algılıyor.
Çalınacak şey: Çapa ne kadar ölçülü olursa, marka o kadar tanınabilir olur. Gevşek çapalar gürültü olarak algılanır.
Nötr Renklerin Tüm Hikayeyi Anlattığı İki Marka
Bu iki marka, nötr ölçeğin kendisinin markayı taşıdığı ve çapanın ya tek renkli ya da rollerine göre sembolize edildiği durumlarda neler olduğunu gösteriyor.
Supabase
supabase.com adresinden canlı izleyin.
Supabase, geliştirici araçlarında en disiplinli tek vurgulu paleti kullanır. Yüzey neredeyse tek renkli koyu nötr tonlardan oluşur. Çapa, tek bir zümrüt yeşilidir ve yalnızca marka öğelerinde, harekete geçirici mesajlarda (CTA) ve başarı durumlarında görünür. Partiye asla ikinci bir marka rengi davet edilmez. Nötr ölçek markayı temsil eder. Yeşil ise fiili temsil eder.
Ne çalınmalı: Nötr sistem yeterince disiplinli ise, bir marka gürültülü çapayı tamamen atlayabilir. Bazı markaların imza rengi değil, imza gri tonlaması gerekir.
Shopify
Polaris.shopify.com adresinden canlı olarak inceleyin.
Shopify'ın Polaris sistemi, bir marka paletinin tamamen tokenleştirilmiş halini gösterir. Palet, rol-token ağacı olarak sunulur: yüzey, metin, simge, kenarlık, etkileşimli, kritik, uyarı, başarı, bilgi; her rol açık ve koyu değerler taşır. Polaris, tasarımcının tanımlanmış token'ların ötesine geçmesine izin vermez. Palet bir his değil, bir sözleşmedir.
Ne çalınmalı: Token'ları önce roller olarak yazın ve son adımda yalnızca onaltılık koda dönüştürün. Bir token adı bir rol yerine bir rengi tanımlarsa, palet sapacaktır.
6 Adımlı Oluşturma Sırası
Paleti bu sırayla oluşturun ve yaygın hataların çoğu fiziksel olarak gerçekleşemez.
-
Renk listesinden önce rol listesini yazın. Çapa, nötr yüzeyler, nötr metin, nötr kenarlıklar, anlamsal başarı, anlamsal uyarı, anlamsal kritik, anlamsal bilgi, durum üzerine gelme, durum odaklanma, durum devre dışı. Bunu önce kağıda yazın.
-
Son onaltılık kodu değil, çapa yönünü seçin. Tek ton, kaba açıklık hedefi, kaba doygunluk hedefi. Düzenlenebilir tutun.
-
Sonra, bu çapa göre ayarlanmış nötr ölçeği oluşturun. 9 ila 12 adım. Her adımı diğerleriyle karşılaştırın. Soğuk nötrler soğuk çapa renkleri için, sıcak nötrler sıcak çapa renkleri için.
-
Semantik renkleri tek tek değil, bir set olarak ekleyin. Başarı, uyarı, kritik, bilgi. Kardeş gibi hissettirmeleri gerekiyor. Sonradan eklenen tek başına bir yeşil, neredeyse her zaman birlikte oluşturulmadığı bir palete karşı yanlış görünür.
-
Durum renklerini yeni renkler icat ederek değil, eşleştirerek tanımlayın. Fareyle üzerine gelme genellikle ölçekte bir veya iki adımlık bir kaymadır. Odaklanma genellikle çapa renginde çerçevelenmiş bir halkadır. Devre dışı bırakılmış genellikle belirli bir nötr adımdır.
-
Çapa renginin son hex değerini en son kaydedin. Üzerinde bulunduğu nötr renge karşı kontrast kontrolleri yapın. Karanlık mod kardeşini ayarlayın. Fareyle üzerine gelme ve basılı tutma adımlarını ekleyin. Ancak şimdi çapa kaydedilmiş bir değer haline gelir.
Sıralamanın Önemi
Her katman bir sonrakini kısıtlar ve adımları tersten uygulamak, paletlerin birbirleriyle çatışan renklere sahip olmasına neden olur.
Çapa rengini en son seçerseniz, içinde yer alması gereken nötr ölçeği tam olarak bilerek seçersiniz. İlk önce seçerseniz, her nötr seçim, arayüz mevcut olmadan önce karar verilen bir renk etrafında bir uzlaşma haline gelir.
Bu katmanlamanın ardındaki teori için, Tasarımcılar için renk teorisi sütunu tüm yığını kapsar. Nötr artı çapa eşleştirmelerinin ardındaki kontrast kuralları için, erişilebilir renk kontrastı ayrıntıları ele alır. Tasarım sistemleri içindeki paletler için, tasarım sistemleri kılavuzu daha geniş bir bakış açısı sunar.
Çoğu Paleti Öldüren Üç Hata
Aynı üç hata neredeyse her başarısız marka renk paletinde ortaya çıkar ve üçü de rolleri seçmeden önce onaltılık kod seçmekten kaynaklanır.
Logo renk örneği hatası. Logoda beş renk olduğu için beş palet rengi. Sonraki aşamalarda beş renge ihtiyaç duyulmaz. Nötr renkler yok, anlamsal katman yok, karanlık mod planı yok. En yaygın hata türü.
Doygunluk tuzağı. Her renk aynı doygunlukta, genellikle yüksek. Bir moodboard'da canlı görünür, gerçek bir arayüzde yorucu hissettirir. İyi paletler doygunluğu agresif bir şekilde değiştirir ve 60-30-10 kuralı gibi oran kuralları, en canlı tonların çerçeveye hakim olmasını engeller.
Eksik orta nokta. Bir açık nötr, bir koyu nötr, aralarında hiçbir şey yok. Gerçek arayüzler ölçeğin ortasında yer alır. Sadece iki nötr renge sahip bir palet, ana renk ne kadar iyi olursa olsun, düz bir şekilde sunulur.
Süreci düzeltin ve hatalar görünmeyi bırakır.
SSS
Bir marka renk paletinde kaç renk olmalı?
Düşündüğünüzden daha az ana renk, düşündüğünüzden daha fazla nötr renk. Çoğu kargo markasının 1 ana renk tonu, 9-12 nötr adım, 3-5 semantik aile, eşleştirilmiş durum renkleri ve paralel bir karanlık mod seti vardır. Renk tonu sayısı azdır. Adım sayısı fazladır.
Karanlık mod için ayrı bir palete ihtiyacım var mı?
Ayrı bir palete değil. Aynı paletin paralel bir çözünürlüğüne ihtiyacınız var. Roller aynı kalır, yalnızca ham onaltılık değerler temaya göre değişir. Bir tasarımcı karanlık modu sıfırdan elle yeniden çiziyorsa, palet bir sistem olarak oluşturulmamıştır.
Bir marka paleti oluşturmak için palet oluşturucu kullanabilir miyim?
Bir oluşturucu ana renk tonunu ve kabaca bir nötr yönü belirleyebilir. Sistemi oluşturamaz. Bu makaledeki her kargo paleti elle ayarlanmıştır: nötrler ana renk tonuna uyacak şekilde ısıtılmış veya soğutulmuş, semantik aileler ayarlanmış, karanlık mod değerleri özel olarak ayarlanmış, durum renkleri adım adım eşleştirilmiştir.
Renk Örneklerini Değil, Sistemi Oluşturun
Bir marka renk paleti, bir moodboard'daki beş renkten ibaret değildir. Bu, roller, nötr bir ölçek, anlamsal sinyaller, durum renkleri ve karanlık mod planı içeren, belirli bir sırayla oluşturulmuş katmanlı bir sistemdir.
Notion, Linear, Stripe, Supabase ve Shopify, renk örnekleriyle kazanmadı. Paleti altyapı olarak ele alarak kazandılar: tek bir temel, tam bir nötr ölçek, anlam ifade eden bir anlamsal katman, eşleştirilmiş bir durum katmanı, ilk günden itibaren tasarlanmış karanlık mod.
Katmanları oluşturun, 6 adımlı sırayı uygulayın ve bir odayı dekore eder gibi marka renkleri seçmeyi bırakın.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
