AI Marka Renk Paleti Oluşturucu
Markanızı tanımlayın; ana, ikincil, vurgu, arka plan ve metin renklerini içeren, kullanıma hazır bir renk paleti, kullanım kılavuzu ve CSS değişkenleri edinin.
Girdi
Protected by Cloudflare Turnstile
Çıktı
Readme
Marka renk paletinde neler bulunur?
Marka paleti, her renge bir görev verir. Ana renk, logoda ve ana düğmelerde kullanılan ve insanların aklında kalan renktir. İkincil renk ana rengi destekler, vurgu rengi harekete geçirici mesajları öne çıkarır; arka plan ve metin renkleri ise sayfanın bütünlüğünü sağlar.
Kontrast, estetik kadar önemlidir. Web İçeriği Erişilebilirlik Yönergeleri (WCAG), normal metin ile arka planı arasında en az 4.5:1, daha katı AAA düzeyi içinse 7:1 kontrast oranı önerir.
Araç açıklaması
Markanız hakkında bilgi verin alanında markanızın ne yaptığını, kimlere hitap ettiğini ve nasıl bir his vermesi gerektiğini açıklayın. Bir Marka kişiliği seçin (Profesyonel, Eğlenceli, Lüks, Minimal, Cesur veya Doğal) ya da Açıklamayla eşleştir seçeneğini kullanın; yapay zekâ bunu metninizden çıkarır.
Adlandırılmış beş renk elde edersiniz: Ana renk, İkincil renk, Vurgu, Arka plan ve Metin. Çıktı biçimi, bu renklerin değerlerini HEX, RGB, HSL, CMYK ve diğer biçimler arasında değiştirir; her rengin bir kopyalama düğmesi vardır. Kullanım kılavuzu her rengin nasıl kullanılacağını açıklar; CSS değişkenleri ise stil sayfasına yapıştırabileceğiniz bir kod bloğu sunar. Yapay zekâdan, metin ile arka plan arasında en az 7:1; ana renk ve vurgu renkleri arasında ise en az 3:1 kontrast oranı sağlaması istenir.
Örnek
"Portland'da mahalle ölçeğinde çalışan bir kahve kavurucusu. Sıcak, samimi ve sürdürülebilir" açıklaması için kavrulmuş kahverengisi bir ana renk, krem rengi bir arka plan ve kiremit rengi bir vurgu elde edebilirsiniz. CSS değişkenleri şöyle olabilir:
:root {
--brand-primary: #5b3a29;
--brand-secondary: #a47551;
--brand-accent: #d9643a;
--brand-background: #faf6f0;
--brand-text: #2b211c;
}Özellikler
- Her biri için açık bir rol, ad ve kullanım notu bulunan beş renk
- Altı kişilik seçeneği veya açıklamanızdan belirlenen bir kişilik
- Renkleri ihtiyacınız olan biçimde veya tüm renk kümesini CSS değişkenleri olarak kopyalama
Sınırlamalar
Araç kontrastı kendisi ölçmez. Bu nedenle yayımlamadan önce metin ve arka plan renklerini bir kontrast denetleyicisinde kontrol edin.