Ücretsiz Marka Kimliği Kiti Oluşturucu

Marka Kimliği Kiti Oluşturucu, marka adınızı, sloganınızı, logonuzu, beş marka renginizi ve başlık ile metin yazı tiplerinizi tek sayfalık bir marka kartında toplar. Kartı PNG olarak indirir, renk ve yazı tiplerini CSS değişkenleri olarak kopyalarsınız. Logo tasarımı, marka stratejisi ve tescil araştırması aracın kapsamı dışında kalır.

İbrahim Özkan · Dijital Pazarlama Uzmanı

Marka Kimliği Kitinizi Oluşturun

Kitinizi oluşturmak için marka adınızı ve isteğe bağlı sloganınızı yazın, logonuzu yükleyin, beş rengi seçin ve başlık ile metin yazı tipini belirleyin. Marka kartınız siz değiştirdikçe güncellenir. Kartı PNG indir düğmesiyle indirebilir, renk ve yazı tiplerini CSS değişkenlerini kopyala düğmesiyle alabilirsiniz.

1. Marka adını girin. Bu ad marka kartının üst bandında başlık olarak görünür. Logo yüklemezseniz logo alanlarında da marka adı yer alır.
2. Logonuzu Logo seç düğmesiyle yükleyin. Mümkünse SVG ya da şeffaf arka planlı PNG kullanın. Araç tek logo alır ve kartta bu logoyu hem açık hem koyu zeminde gösterir.
3. Renkleri seçin. Ana renk, İkincil, Vurgu, Koyu ve Açık alanlarının her biri bir renk seçicidir. Logo yüklediyseniz Renkleri logodan öner düğmesi ilk üç rengi logodan doldurur.
4. Yazı tiplerini seçin. Başlık ve Metin için listedeki 13 yazı tipinden birer tane belirleyin. Araç CSS değişkenlerine yedek font olarak sans-serif yazar.
5. Önizlemeyi inceleyin. Marka kartında renklerin HEX ve RGB kodlarını, Türkçe karakterlerin görünümünü ve logonun oranını kontrol edin.
6. Kartı indirin. PNG indir düğmesi 1600 × 2000 piksellik marka kartını indirir. CSS değişkenlerini kopyala düğmesi renk ve yazı tipi değişkenlerini panoya kopyalar.

Kitin doğruluğu girdiğiniz verilere bağlıdır. Araç renkleri yalnız siz Renkleri logodan öner düğmesine bastığınızda logodan doldurur ve kartta logonun en boy oranını korur. Kurumsal kimlik dosyanızda tanımlı renkler ve fontlar varsa kiti bu değerlerle doldurun.

Marka Kimliği Kiti Nedir?

Marka kimliği kiti, bir markanın logo varyantlarını, renk kodlarını, font tercihlerini ve bunların temel kullanım kurallarını tek yerde toplayan başvuru setidir. Amacı, içeriği kim hazırlarsa hazırlasın markanın web sitesinde, sosyal medyada ve sunumlarda aynı görünmesini kolaylaştırmaktır.

Bu araç kiti birbirine bağlı kararlar zinciri olarak ele alır. Marka adı logoyu, logo renk sistemini, renk sistemi de tipografi ve kullanım kurallarını etkiler. Zincirin sonunda renk ve yazı tipi kararları CSS değişkenlerine, yani brand token adı verilen küçük veri birimlerine dönüşür.

Kit görsel kimliği kapsar. Hitap biçimi, ses tonu ve kelime seçimi gibi sözel kararlar sosyal medyada marka dili çalışmasında belirlenir. Hangi içeriğin hangi amaçla ve hangi formatta yayınlanacağı ise sosyal medya içerik stratejisi kapsamındadır. Kit, bu iki çalışmanın ürettiği içeriklerin görsel olarak tutarlı kalmasına yardım eder.

Marka kimliği kiti renk paleti çıkarıcıdan nasıl ayrılır?

Renk paleti çıkarıcı bir görseldeki baskın renkleri bulur. Marka kimliği kiti ise bu renklere Ana renk, Vurgu veya Koyu gibi görevler verir ve onları logo ile tipografiyle birlikte tek bir marka kartında toplar.

Bir fotoğraftan ya da logodan renk kodlarını bulmak için Renk Paleti Çıkarıcı aracını kullanabilirsiniz. Bulduğunuz kodların hangi rolde kullanılacağına karar verdikten sonra sayfanın üstündeki araçta renk seçicilere girebilirsiniz.

Marka Renkleri Nasıl Belirlenir?

Marka renklerini belirlerken önce her renge bir görev verin, sonra metin ile zemin eşleşmelerinin okunabilir olup olmadığını kontrast oranıyla kontrol edin. Bu araç Ana renk, İkincil, Vurgu, Koyu ve Açık olmak üzere beş renk rolüyle çalışır.

Renk seçiminin duygusal ve stratejik tarafı marka çalışmasının konusudur. Kit, seçilmiş renklerin günlük üretimde tutarlı kullanılmasını sağlar. Dijital kullanım için HEX kodu yeterlidir. Marka kartı her rengin HEX ve RGB kodunu yazar. Adobe'un logo rehberi, dijital kullanımda HEX değerinin, üretim gerektiğinde RGB ve CMYK değerlerinin kaydedilmesini önerir.

Renk rolleri neyi ifade eder?

Renk rolü, bir rengin arayüzde ve tasarımda hangi işi yapacağını tanımlar. Rol adıyla çalışmak, ekipteki herkesin aynı rengi aynı amaçla kullanmasını kolaylaştırır.

• Ana renk markayı en çok temsil eden renktir. Logo, başlık ve ana düğme gibi öne çıkan alanlarda kullanılır.
• İkincil renk ana rengi destekler. Çoğunlukla kart, bölüm zemini ve ikincil alanlarda yer alır.
• Vurgu rengi dikkat çekilmesi gereken küçük alanlar içindir. Vurgu çizgisi, etiket veya ikon bu role örnektir.
• Koyu renk gövde metni ve koyu zeminler içindir. Uzun okuma alanlarında rahat okunacak kadar koyu bir renk seçilir. Kartta logonun koyu zemin örneği bu renkle gösterilir.
• Açık renk sayfanın ve şablonların temel zemin rengidir. Kartta logonun açık zemin örneği bu renkle gösterilir.

Renk kontrastı nasıl kontrol edilir?

Metin rengi ile zemin rengi arasındaki kontrast oranını hesaplayın ve normal metin için en az 4,5'e 1, büyük metin için en az 3'e 1 oranını hedefleyin. Bu eşikler WCAG 2.2'nin 1.4.3 başarı ölçütünden gelir. Büyük metin, yaklaşık 24 piksel normal ya da 18,5 piksel kalın yazıya karşılık gelir.

Kontrast her renk çifti için ayrı hesaplanır. Aynı turuncu ton beyaz zeminde okunmazken koyu lacivert zeminde yeterli kontrast sağlayabilir. Araç kontrast hesaplamaz. Bu yüzden renkleri tek tek değerlendirmek yerine metin ve zemin eşleşmelerini ayrıca kontrol edip not etmek daha güvenlidir. Aşağıdaki örnek bölümde bu farkı somut değerlerle görebilirsiniz.

Marka Tipografisi Nasıl Düzenlenir?

Marka tipografisini düzenlemek için bir başlık fontu, bir gövde fontu ve her biri için bir yedek font belirleyin. Seçtiğiniz fontların Türkçe karakterleri eksiksiz gösterdiğini ve kullanım alanınıza uygun lisansa sahip olduğunu da kontrol edin.

İki font ailesi çoğu marka için yönetilebilir bir başlangıçtır. Başlık fontu karakteri taşır, gövde fontu ise uzun metinde okunabilirliği korur. Önizlemede ğ, ü, ş, ö, ç harflerine ve özellikle büyük İ ile küçük ı harflerine bakın. Bazı fontlar bu harflerde yedek fonta geçerek metnin görünümünü bozar.

Yedek font, asıl font yüklenemediğinde tarayıcının kullanacağı fonttur. Araç bu sırayı CSS değişkeninde "Inter", sans-serif gibi, seçtiğiniz yazı tipinin ardından sans-serif gelen bir font dizisi olarak yazar. Böylece font dosyası hiç yüklenmese bile metin benzer bir yapıda görüntülenir.

Font lisansı neden kontrol edilmelidir?

Font lisansı, font dosyasını nerede kullanabileceğinizi ve başkalarıyla paylaşıp paylaşamayacağınızı belirler. Bir fontla tasarım yapma izni, font dosyasını kitle birlikte dağıtma izni anlamına gelmez.

Örneğin ev, öğrenci veya ticari olmayan kullanım için lisanslanmış bir uygulama kullanmıyorsanız Windows ile gelen fontlarla logo ve basılı çıktı hazırlayabilirsiniz. Microsoft'un font dağıtım SSS sayfasına göre ise bu font dosyalarını başka bilgisayarlara veya sunuculara kopyalayamazsınız. Google Fonts kataloğunda en yaygın lisans SIL Open Font License olarak öne çıkar. Google Fonts SSS sayfası, bu fontların ticari kullanımına ve lisans koşullarına uygun biçimde yeniden dağıtılmasına izin verildiğini belirtir.

Logo Kullanım Kuralları Nasıl Hazırlanır?

Logo kullanım kurallarını hazırlarken onaylı logo varyantlarını, logonun çevresindeki güvenli alanı, en küçük kullanım boyutunu, hangi zeminde hangi varyantın kullanılacağını ve yasak uygulamaları yazılı hâle getirin. Adobe'un logo tasarım rehberi de en az ana, ters ve tek renkli varyantların, güvenli alanın, minimum boyutun, kesin renk değerlerinin ve hatalı kullanım örneklerinin belgelenmesini önerir.

• Varyantlar açık zemin için ana logoyu, koyu zemin için ters logoyu ve tek renk baskı için siyah ya da beyaz sürümü kapsar.
• Güvenli alan logonun çevresinde başka öğe bulunmaması gereken boşluktur. Bu ölçüyü sembolün yüksekliği gibi logonun kendi geometrisinden alın ve dört yöne uygulayın.
• Minimum boyut logoyu kademeli olarak küçültüp yazının ve ince detayların okunmaz hâle geldiği noktayı bularak belirlenir. Ekran için piksel, baskı için milimetre değerini ayrı yazın.
• Zemin kuralı hangi varyantın beyaz, renkli, koyu ve fotoğraflı zeminlerde kullanılacağını söyler.
• Yasak uygulamalar logoyu esnetmeyi, rengini değiştirmeyi, gölge veya parlama efekti eklemeyi ve logonun okunmadığı karmaşık zeminlere yerleştirmeyi kapsar.

Logo minimum boyutun altına düştüğünde daha da küçültmek yerine sadeleştirilmiş bir sembole geçmek daha sağlıklıdır. Bu sembolü tarayıcı sekmesi için Favicon Oluşturucu ile, mobil uygulama ve ana ekran simgeleri için Uygulama İkonu Oluşturucu ile hazırlayabilirsiniz. Logoyu broşür, afiş ya da ambalaj gibi basılı materyallerde bir bağlantıyla birlikte kullanacaksanız aynı logoyla Logolu QR Kod Oluşturucu üzerinden markalı bir QR kod hazırlayabilirsiniz.

Brand Tokens Nedir ve Nasıl Dışa Aktarılır?

Brand token, bir marka kararını görev adıyla saklayan ve farklı araçların aynı biçimde okuyabildiği küçük bir veri birimidir. Bu araçta token'ları web siteleri için CSS değişkenleri olarak kopyalarsınız. Araç JSON dosyası üretmez.

Token'ın değeri, rolün adından ayrı tutulur. Sitenizin bütün düğmeleri --renk-ana değişkenini kullanıyorsa ana renginizi değiştirdiğinizde tek satırı güncellemeniz yeterli olur. Aynı mantık sosyal medya şablonlarında ve sunum dosyalarında da tekrar eden renk aramalarını azaltır.

CSS değişkenleri nasıl kullanılır?

CSS değişkenlerini :root seçicisinde tanımlayın ve stil kurallarında var() fonksiyonuyla çağırın. MDN belgelerine göre :root üzerinde tanımlanan değişken sayfanın her yerinde kullanılabilir.

.button-primary {
  background-color: var(--renk-ana, #123456);
  color: var(--renk-acik, #FFFFFF);
  font-family: var(--font-baslik);
}

var() içindeki ikinci değer yedek değerdir. Değişken tanımlanmamışsa tarayıcı bu değeri kullanır. Kopyaladığınız değişkenleri ana stil dosyanızın başına eklerseniz değişkenler bütün sayfalarda hazır olur.

JSON token dosyası nasıl okunur?

JSON token dosyasında her token bir $value değeri taşır ve $type alanı token türünü belirtir. Bu yapı, W3C Design Tokens Community Group'un Ekim 2025'te ilk kararlı sürüm olarak yayımladığı Design Tokens Format Module 2025.10 belgesinde tanımlanmıştır.

Belgeye göre renk token'ının değeri renk uzayını, renk bileşenlerini ve isteğe bağlı HEX karşılığını içeren bir nesnedir. Font ailesi token'ı ise tek bir font adı ya da tercih sırasına göre dizilmiş font adlarından oluşur. Belge, dosya uzantısı olarak .tokens veya .tokens.json kullanılmasını önerir. Aşağıdaki kısaltılmış örnek bu yapıya göre hazırlanmıştır. Araç bu dosyayı üretmez; ekibiniz bu biçimi kullanıyorsa dosyayı kopyaladığınız değerlerle kendiniz hazırlayabilirsiniz.

{
  "brand": {
    "color": {
      "$type": "color",
      "primary": {
        "$value": { "colorSpace": "srgb", "components": [0.0706, 0.2039, 0.3373], "hex": "#123456" },
        "$description": "Logo, başlık ve ana düğme"
      },
      "secondary": {
        "$value": { "colorSpace": "srgb", "components": [0.8667, 0.9333, 1], "hex": "#DDEEFF" },
        "$description": "Kart ve bölüm zemini"
      }
    },
    "font": {
      "$type": "fontFamily",
      "heading": { "$value": ["Arial", "sans-serif"] },
      "body": { "$value": ["Inter", "sans-serif"] }
    }
  }
}

Tablodaki her satır aracın kopyaladığı CSS değişkenini ve aynı karar için önerilen JSON yolunu gösterir. CSS değişkenleri tarayıcıda doğrudan çalışır. JSON dosyası ise tasarım araçlarına aktarmak veya başka platformlar için kod üretmek isteyen ekiplerin işine yarar; araç bu dosyayı üretmez.

Aynı renk kodlarını OG Görseli Oluşturucu aracına girerek bağlantı paylaşımlarında görünen görselleri de kitinizdeki paletle hazırlayabilirsiniz.

Marka Kimliği Kiti Örneği

Örnek kitte Örnek Marka adlı varsayımsal bir marka için ana renk #123456, ikincil renk #DDEEFF ve başlık fontu olarak Arial seçildi. Vurgu, koyu ve açık renkler ile metin fontu da eklendiğinde araçtaki çıktı bir marka kartı ve CSS değişkenleridir. Kontrast oranlarını araç hesaplamaz; aşağıdaki tabloda ayrıca hesaplandı.

Örneği tamamlamak için vurgu rengi olarak #E8A33D, koyu renk olarak #1F2933, açık renk olarak #FFFFFF ve metin fontu olarak Inter kullanıldı. Inter, SIL Open Font License 1.1 ile yayımlanan açık kaynaklı bir fonttur. Bu değerler gerçek bir markaya ait değildir ve yalnızca kitin nasıl çalıştığını göstermek için seçilmiştir.

Oranlar WCAG 2.2'deki göreli parlaklık formülüyle hesaplanmıştır. Tablo, vurgu rengindeki okunabilirlik sorununun zemin seçiminden kaynaklandığını gösteriyor. Aynı turuncu, ana renk zemin üzerinde 5,90'a 1 oranına ulaşır ve normal metin eşiğini geçer. Ana renkteki metin de ikincil renk zemin üzerinde 10,75'e 1 oranıyla rahat okunur. Bu eşleşmeleri marka kartıyla birlikte paylaştığınız notlara yazmak, ekibin turuncu metni beyaz zemine koyma hatasını baştan önler.

Araçtaki yazı tipi listesinde Arial yoktur; başlık için listedeki yazı tiplerinden birini seçersiniz. Başlık için Montserrat seçildiğinde CSS değişkenlerini kopyala düğmesi aşağıdaki metni verir.

:root {
  --renk-ana: #123456;
  --renk-ikincil: #DDEEFF;
  --renk-vurgu: #E8A33D;
  --renk-koyu: #1F2933;
  --renk-acik: #FFFFFF;
  --font-baslik: "Montserrat", sans-serif;
  --font-metin: "Inter", sans-serif;
}

Arial, Windows ile gelen lisanslı bir fonttur ve araçtaki listede yer almaz. Araç hiçbir font dosyasını vermez, yalnızca font adını yazar. Inter dosyasını sitenizde barındırmak isterseniz lisans metnini dosyayla birlikte saklayın.

Sık Sorulan Sorular

Aşağıdaki sorular kitin kapsamını, dışa aktarılan dosyaları ve logo varyantlarını kısaca yanıtlar.

Brand kit nedir?

Brand kit, marka kimliği kitinin İngilizce adıdır ve logo, renk, font ile temel kullanım kurallarını bir arada tutan başvuru setini anlatır. Türkçe kaynaklarda marka kiti veya marka seti adıyla da geçer.

Renk kodları nasıl kaydedilir?

Renk kodları marka kartında rol adıyla birlikte HEX ve RGB değeri olarak yazılır ve CSS değişkenlerine aynı HEX değeriyle geçer. Baskı işlerinde kullanacağınız CMYK veya Pantone karşılıklarını tasarımcınızdan ya da matbaanızdan ayrıca almanız gerekir.

CSS değişkenleri indirilebilir mi?

Dosya olarak indirilmez; renk ve font kararları CSS değişkenlerini kopyala düğmesiyle panoya kopyalanır. Değişkenleri sitenizin stil dosyasına yapıştırdıktan sonra değişkenleri stil kurallarında var() fonksiyonuyla kullanabilirsiniz.

Açık ve koyu logo varyantları var mı?

Araç tek logo dosyası alır ve marka kartında bu logoyu hem açık hem koyu zeminde gösterir. Logonuzu yeniden çizmez ya da renklerini ters çevirmez. Koyu zeminde okunmayan bir logo için ters varyantı tasarımcınızdan isteyin.

Araç logo tasarlar mı?

Hayır, araç logo tasarlamaz. Var olan logonuzu yükler ve renk ile font kararlarıyla birlikte kitte düzenlersiniz. Logonuz yoksa önce bir tasarımcıyla çalışmanız ve marka adının tescil durumunu kontrol etmeniz gerekir.

Profesyonel brand book yerine geçer mi?

Hayır, bu kit profesyonel bir brand book yerine geçmez. Brand book genellikle marka hikâyesini, konumlandırmayı, görsel dili, baskı ve ambalaj uygulamalarını da kapsar. Bu kit günlük dijital üretimde ihtiyaç duyulan renk, font ve logo kararlarını hızlıca paylaşmaya yarar.

Kaynaklar

1. Design Tokens Format Module 2025.10, W3C Design Tokens Community Group, kararlı sürüm, 28 Ekim 2025.
2. Design Tokens specification reaches first stable version, W3C Design Tokens Community Group duyurusu, 28 Ekim 2025.
3. Understanding Success Criterion 1.4.3 Contrast (Minimum), W3C WAI, WCAG 2.2.
4. Using CSS custom properties (variables), MDN Web Docs.
5. Font redistribution FAQ for Windows, Microsoft Learn.
6. Frequently Asked Questions, Google Fonts.
7. SIL Open Font License, SIL International.
8. The Inter typeface family, Rasmus Andersson.
9. How to design a logo, Adobe Express, 20 Temmuz 2026.
10. Marka Araştırma, Türk Patent ve Marka Kurumu.