Kendi ürün fotoğraflarınızdan bir marka renk paleti oluşturun
Gerçek ürününüzün ve ambalajınızın fotoğraflarından renkleri çıkarın, her birine bir görev verin ve bir reklama, altyazıya ya da son karta girmeden önce her metin eşleşmesini WCAG kontrast değerine göre denetleyin.
Logo dosyası olan ama renk listesi olmayan birçok küçük marka var. Renkler ürünün kendisinde yaşar: şişede, etikette, kutuda, kumaşta. Bir reklam, küçük resim ya da altyazı stili yapma zamanı geldiğinde biri bir fotoğraftan bir hex kodu gözle seçer ve umut eder.
Bunu yaklaşık on dakikada daha iyi yapabilirsiniz. Renkleri gerçek ürünün fotoğraflarından çıkarın, her birine bir görev verin ve hangi çiftlerin metin olarak okunabilir olduğunu kontrol edin. Ücretsiz renk paleti çıkarıcımız bunların çıkarılmasını ve kontrolünü tarayıcınızda yapar, hiçbir şey yüklenmez.
Neden bir ilham panosu değil de üründen başlamalısınız
İnsanlar ürününüzü rafta ya da ellerinde nasıl göründüğüyle tanır. Renkleri ambalajla eşleşen bir reklam, bir bakışta aynı markaymış gibi hissettirir; sapan bir reklam ise taklit gibi hissettirir. Üründen alınan bir palet, gerçekte ne sattığınız konusunda da dürüsttür; bir ilham panosu bunu nadiren yapar.
Hizmetler için de işe yarar. Fiziksel bir ürününüz yoksa, en iyi ekran görüntülerinizi, mağaza cephenizi ya da ekip fotoğraflarınızı kullanın; insanların sizinle zaten ilişkilendirdiği her şeyi.
Adım 1: fotoğrafları seçin ve kırpın
İki ya da üç temiz fotoğraf seçin: düz bir arka plan üzerinde ürün, ambalajın yüzü dönük ve beğendiğiniz bir yaşam tarzı çekimi. Sonra sıkı biçimde kırpın. Çıkarıcı verdiğiniz her pikseli sayar; ahşap bir masanın üstündeki bir şişe, masayı markanızın renklerinden biri olarak döndürür. Ürüne ve etikete kırpın, palet ürünün kendisi olur.
Mümkünse gün ışığında ya da düz bir ışıkta çekin. Sıcak bir lamba beyaz ambalajı krem rengine çevirir ve çıkardığınız her renk bu tonu taşır.
Adım 2: beş ila sekiz renk çıkarın
Her fotoğrafı çıkarıcıya bırakın ve temiz bir ürün çekimi için 5 ya da 6 renk, kalabalık bir çekim için 8 isteyin. Benzer pikselleri gruplar ve her grubun ortalamasını, en büyükten başlayarak, her birinin görselin ne kadarını kapladığı oranıyla listeler. Başlangıç noktası sabittir, bu yüzden aynı fotoğraf her zaman aynı paleti verir. Beyaz bir şişedeki kırmızı kapak gibi küçük parlak bir vurgu ise ortalamada kaybolmak yerine kendi renk örneğini alır.
Tüm fotoğraflarınızı çalıştırın ve tekrar eden renklere bakın. Marka odur. Yalnızca tek bir çekimde görünen bir renk genellikle arka plan ya da ışıktır.
Adım 3: her renge bir görev verin
Bir palet, her rengin bir rolü olduğunda işe yarar. Çoğu markanın dörde ihtiyacı vardır:
- Arka plan: bir düzenin çoğunun üzerine oturduğu renk. Çoğunlukla ambalajın temel rengi ya da açık bir nötr.
- Metin: arka plan üzerinde okunabilir koyu bir renk. Koyu siyah iş görür. Kontrol testini geçerse derin bir marka rengi daha iyi olur.
- Vurgu: bir düğme, bir fiyat etiketi ya da tek bir vurgulanmış kelime için kullanılan parlak olan renk.
- Destek: kutular, ayırıcılar ve ikincil metinler için bir ya da iki nötr.
Fotoğrafın verdiği her şeyi kullanmaya direnin. Net görevleri olan beş adlandırılmış renk, yüz reklamı tutarlı tutar. On iki renk tutmaz.
Adım 4: bir şeye koymadan önce kontrastı kontrol edin
Büyük bir monitörde iyi görünen renk çiftleri, güneşte bir telefonda okunması zor olabilir ve düşük görüşü olan insanlar için çok daha zordur. W3C'nin Web İçeriği Erişilebilirlik Yönergeleri bunun için bir sayı verir, kontrast oranı; bu 1:1 (aynı renk iki kez) ile 21:1 (beyaz üzerinde siyah) arasında değişir. Eşikler şöyledir:
| Normal metin | Büyük metin | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Büyük metin, WCAG’ın tanımına göre en az 18 punto ya da 14 punto kalın demektir. Sayılar da kesin sınırlardır: W3C'nin 1.4.3 hakkındaki yönergesi, hesaplanan bir oranın yuvarlanmaması gerektiğini söyler; yani 4.499:1, 4.5:1'i karşılamaz.
WCAG web içeriği için yazılmıştı, reklamlar için değil, ama akıl yürütme ekranda gösterilen her metne uygulanır; buna videoya gömülü altyazılar ve son karttaki kelimeler de dahildir.
Çalışılmış bir örnek
Diyelim ki ambalajınız size lacivert bir #1a3c6e, krem bir #fdf6e3 ve turuncu bir #e07a2e veriyor.
Formül (L1 + 0.05) / (L2 + 0.05)'tir; burada L1 daha açık rengin, L2 daha koyu rengin göreli parlaklığıdır. Göreli parlaklık siyah için 0'dan beyaz için 1'e kadar uzanır. Lacivert yaklaşık 0.046, krem yaklaşık 0.923 ve turuncu yaklaşık 0.300 çıkar.
- Krem üzerinde lacivert metin: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, yuvarlanmış rakamlarla yaklaşık 10.1, tam hesapta 10.16:1. Bu her boyutta AAA'yı geçer. Ana eşleşmeniz budur.
- Krem üzerinde turuncu metin: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, yaklaşık 2.78:1. Bu büyük metin için bile başarısız olur. Turuncu, krem üzerinde kelime taşımamalı.
- Turuncu üzerinde siyah metin: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, yuvarlanmış rakamlarla 7.0, tam hesapta 6.99:1. Bu tüm metinler için AA'yı geçer ama AAA'nın biraz altında kalır. Bir düğme etiketi için uygundur.
- Lacivert üzerinde krem metin: ilk çiftle aynı çift, dolayısıyla aynı 10.16:1. Bir çifti tersine çevirmek oranı asla değiştirmez.
Yani roller neredeyse kendiliğinden seçilir: krem arka plan, lacivert metin, turuncu ise üzerinde siyah kelimelerle bir vurgu şekli (turuncu üzerinde lacivert yalnızca 3.65:1'dir, bu da yalnızca büyük metin için AA'dır). Çıkarıcı bu tüm ızgarayı bir kerede gösterir: her renk diğerlerinin karşısında, ayrıca beyaz ve siyahla birlikte, her hücre AAA, AA, AA büyük ya da Başarısız olarak derecelendirilmiş.
Adım 5: bir kez yazıya dökün
Paleti CSS özel özellikleri ya da JSON olarak dışa aktarın ve logo dosyalarınızın yanında saklayın. Karar verdikten sonra değişkenleri göreve göre yeniden adlandırın: --brand-bg, --brand-text, --brand-accent bir ay sonra --color-3'ten daha iyi okunur. Her birinin altına hangi eşleşmelerin geçtiğini söyleyen bir satır ekleyin, böylece kimse kontrolü yeniden yapmak zorunda kalmaz.
Sonra sayıları elinizdeki resmi herhangi bir şeyle karşılaştırın. Bir fotoğraf, kameranızın gördüğü rengi verir; bu basılı ambalaja yakındır ama mürekkep spesifikasyonuyla aynı değildir. Yazıcınızın ya da tasarımcınızın kesin değerleri varsa, onlar geçerlidir.
Paletin reklam ve gönderilerde kullanımı
- Altyazılar ve alt yazılar: metin renginiz, arka plan renginizde bir kutu üzerinde ya da tersi. Önce çifti kontrol edin.
- Son kartlar: arka plan rengi, logo ve metin renginizde tek bir satır. Vurgu rengi, kısa bir çağrı için arkasındaki düğme şeklini doldurabilir.
- Küçük resimler ve kapaklar: bir vurgu, bir büyük okunabilir kelime, bolca arka plan.
- Ambalajdaki QR kodları: bir marka rengi, ambalajdan açıkça koyuysa işe yarar. Ücretsiz QR kod oluşturucumuz kontrast düşükse uyarır.
Hermoso nerede yer alıyor
Hermoso bir AI pazarlama ajanıdır. Pazarınızda zaten işe yarayan reklamları araştırır, markanıza uygun görsel ve video reklamları yapar, kendi sosyal hesaplarınıza gönderi yayınlayıp planlar ve kendi reklam hesaplarınızda ücretli kampanyalar yürütür. Markanızı web sitenizden eklediğinizde ürünlerinizi, logonuzu ve paletinizi öğrenir. Altyazılar ve son kartlar siz istemedikçe kapalı kalır; istediğinizde metin, kutu ve son kart renklerini hex kodlarıyla ayarlayabilirsiniz, böylece burada kontrol ettiğiniz çiftler yayına girer. Web uygulamasında ya da Claude, ChatGPT ve Cursor içinde MCP sunucusu üzerinden çalışır.
Sıkça sorulanlar
Ürün renklerimin hex kodlarını nasıl bulurum?
Temiz bir fotoğrafı ürüne ya da ambalaja kırpın ve bir renk paleti çıkarıcısına bırakın. Ana renkleri HEX, RGB ve HSL olarak listeler. İki ya da üç fotoğraf çalıştırın ve tekrar eden renkleri tutun.
Metnin kontrast oranı ne olmalı?
WCAG 2.2 kapsamında AA seviyesi normal metin için 4.5:1, büyük metin için 3:1 ister; AAA ise 7:1 ve 4.5:1 ister. Büyük metin en az 18 punto ya da 14 punto kalındır.
4.49:1, AA için yeterli mi?
Hayır. W3C, oranın eşikle karşılaştırılırken yuvarlanmaması gerektiğini söyler; yani 4.499:1, 4.5:1'i karşılamaz.
Bir marka paletinde kaç renk olmalı?
Her birine bir görev vermeye yetecek kadar: genellikle bir arka plan, bir metin rengi, bir vurgu ve bir ya da iki nötr. Net rolleri olan beş adlandırılmış renk, uzun bir listeden daha iyi tutarlılık sağlar.
Bir fotoğraftaki renkler kesin mi?
Hayır. Bunlar kameranın o ışık altında kaydettiği renklerdir; ürüne yakındır ama bir baskı ya da mürekkep spesifikasyonuyla aynı değildir. Resmi değerleriniz varsa onları kullanın.